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> </div>
<style> <style>
.compose-autosuggest { .compose-autosuggest {
grid-area: autosuggest;
position: absolute; position: absolute;
left: 5px; left: 5px;
top: 0; top: 0;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 0.1s linear; transition: opacity 0.1s linear;
min-width: 400px;
max-width: calc(100% - 20px);
z-index: 7000; z-index: 7000;
} }
.compose-autosuggest.is-dialog { .compose-autosuggest.is-dialog {
@ -32,13 +31,22 @@
opacity: 1; opacity: 1;
} }
@media (min-width: 480px) {
.compose-autosuggest {
min-width: 400px;
max-width: calc(100% - 20px);
}
}
@media (max-width: 479px) { @media (max-width: 479px) {
.compose-autosuggest { .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 */ transform: translateX(-58px); /* avatar size 48px + 10px padding */
min-width: 0;
width: calc(100vw - 20px); width: calc(100vw - 20px);
} }
.compose-autosuggest.is-dialog {
width: calc(100vw - 40px); /* extra padding when within the dialog */
}
} }
</style> </style>

View file

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

View file

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