fix: fix autosuggest width on mobile (#1186)

fixes #1185
This commit is contained in:
Nolan Lawson 2019-05-06 08:34:03 -07:00 committed by GitHub
parent d83062126a
commit 2abe15cc6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 16 deletions

View file

@ -14,14 +14,13 @@
</div>
<style>
.compose-autosuggest {
grid-area: autosuggest;
position: absolute;
left: 5px;
top: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.1s linear;
min-width: 400px;
max-width: calc(100% - 20px);
z-index: 7000;
}
.compose-autosuggest.is-dialog {
@ -32,13 +31,22 @@
opacity: 1;
}
@media (min-width: 480px) {
.compose-autosuggest {
min-width: 400px;
max-width: calc(100% - 20px);
}
}
@media (max-width: 479px) {
.compose-autosuggest {
/* hack: move this over to the left on mobile so it's easier to see */
/* on mobile, move it to the left and make it fill the viewport width */
transform: translateX(-58px); /* avatar size 48px + 10px padding */
min-width: 0;
width: calc(100vw - 20px);
}
.compose-autosuggest.is-dialog {
width: calc(100vw - 40px); /* extra padding when within the dialog */
}
}
</style>

View file

@ -12,6 +12,7 @@
{/if}
<ComposeInput {realm} {text} {autoFocus} on:postAction="doPostStatus()" />
<ComposeLengthGauge {length} {overLimit} />
<ComposeAutosuggest {realm} {text} />
<ComposeToolbar {realm} {postPrivacy} {media} {contentWarningShown} {text} />
<ComposeLengthIndicator {length} {overLimit} />
<ComposeMedia {realm} {media} />
@ -36,9 +37,11 @@
"avatar cw cw cw"
"avatar input input input"
"avatar gauge gauge gauge"
"avatar autosuggest autosuggest autosuggest"
"avatar toolbar toolbar length"
"avatar media media media";
grid-template-columns: min-content minmax(0, max-content) 1fr 1fr;
position: relative;
}
.compose-box.direct-reply {
@ -79,6 +82,7 @@
import ComposeMedia from './ComposeMedia.html'
import ComposeContentWarning from './ComposeContentWarning.html'
import ComposeFileDrop from './ComposeFileDrop.html'
import ComposeAutosuggest from './ComposeAutosuggest.html'
import { measureText } from '../../_utils/measureText'
import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
import { store } from '../../_store/store'
@ -113,7 +117,8 @@
ComposeStickyButton,
ComposeMedia,
ComposeContentWarning,
ComposeFileDrop
ComposeFileDrop,
ComposeAutosuggest
},
data: () => ({
size: void 0,

View file

@ -30,12 +30,10 @@
style="display: none;"
type="file"
accept={mediaAccept} >
<ComposeAutosuggest {realm} {text} />
</div>
<style>
.compose-box-toolbar {
grid-area: toolbar;
position: relative;
align-self: center;
}
.compose-box-toolbar-items {
@ -49,13 +47,11 @@
import { importShowEmojiDialog, importShowPostPrivacyDialog } from '../dialog/asyncDialogs'
import { doMediaUpload } from '../../_actions/media'
import { toggleContentWarningShown } from '../../_actions/contentWarnings'
import ComposeAutosuggest from './ComposeAutosuggest.html'
import { mediaAccept } from '../../_static/media'
export default {
components: {
IconButton,
ComposeAutosuggest
IconButton
},
data: () => ({
mediaAccept