parent
d83062126a
commit
2abe15cc6f
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue