fix: fix style of compose box in reply (#983)

Fixes #982
This commit is contained in:
Nolan Lawson 2019-02-14 08:46:43 -08:00 committed by GitHub
parent d0ba4fa5f7
commit 623c2c79cb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 14 deletions

View file

@ -1,7 +1,7 @@
{#if realm === 'home'}
<h1 class="sr-only">Compose status</h1>
{/if}
<ComposeFileDrop {realm} {size} >
<ComposeFileDrop {realm} >
<div class="{computedClassName} {hideAndFadeIn}">
<ComposeAuthor />
{#if contentWarningShown}
@ -10,11 +10,11 @@
<ComposeContentWarning {realm} {contentWarning} />
</div>
{/if}
<ComposeInput {realm} {text} {autoFocus} {size} on:postAction="doPostStatus()" />
<ComposeInput {realm} {text} {autoFocus} on:postAction="doPostStatus()" />
<ComposeLengthGauge {length} {overLimit} />
<ComposeToolbar {realm} {postPrivacy} {media} {contentWarningShown} {text} />
<ComposeLengthIndicator {length} {overLimit} />
<ComposeMedia {realm} {media} {size} />
<ComposeMedia {realm} {media} />
</div>
</ComposeFileDrop>
<ComposeStickyButton {showSticky}
@ -76,6 +76,9 @@
.compose-box.slim-size {
width: 560px;
max-width: calc(100vw - 40px);
}
.compose-box-realm-dialog {
overflow-x: hidden;
}
}
@ -137,6 +140,7 @@
computed: {
computedClassName: ({ overLimit, realm, size, postPrivacyKey, isReply }) => (classname(
'compose-box',
`compose-box-realm-${realm}`,
overLimit && 'over-char-limit',
size === 'slim' && 'slim-size',
isReply && postPrivacyKey === 'direct' && 'direct-reply'

View file

@ -1,4 +1,4 @@
<file-drop class="file-drop {size === 'slim' ? 'slim-size' : ''}" accept={mediaAccept} ref:fileDrop >
<file-drop class="file-drop file-drop-realm-{realm}" accept={mediaAccept} ref:fileDrop >
<div class="file-drop-info">
<div class="file-drop-info-text">
<span class="file-drop-info-text-valid">Drop to upload</span>
@ -34,7 +34,7 @@
border-radius: 6px;
}
.file-drop.slim-size {
.file-drop-realm-dialog {
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
@ -42,7 +42,7 @@
-ms-overflow-style: none;
}
.file-drop.slim-size::-webkit-scrollbar {
.file-drop-realm-dialog::-webkit-scrollbar {
display: none;
}

View file

@ -1,6 +1,6 @@
<textarea
id="the-compose-box-input-{realm}"
class="compose-box-input { size ==='slim' ? 'slim-size' : ''}"
class="compose-box-input compose-box-input-realm-{realm}"
placeholder="What's on your mind?"
ref:textarea
bind:value=rawText
@ -30,19 +30,19 @@
width: calc(100% - 5px);
}
.compose-box-input.slim-size {
.compose-box-input-realm-dialog {
max-height: 40vh;
overflow-y: auto;
}
@media (max-width: 767px) {
.compose-box-input.slim-size {
.compose-box-input-realm-dialog {
max-height: 30vh;
}
}
@media (max-width: 479px) {
.compose-box-input.slim-size {
.compose-box-input-realm-dialog {
max-height: 20vh;
}
}

View file

@ -1,7 +1,7 @@
{#if media.length}
<div class="compose-media-container" style="grid-template-columns: repeat({media.length}, 1fr);">
{#each media as mediaItem, index}
<ComposeMediaItem {realm} {mediaItem} {index} {media} {size} />
<ComposeMediaItem {realm} {mediaItem} {index} {media} />
{/each}
</div>
{/if}

View file

@ -1,4 +1,4 @@
<div class="compose-media {size === 'slim' ? 'slim-size' : ''}">
<div class="compose-media compose-media-realm-{realm}">
<img src={mediaItem.data.preview_url} {alt} />
<div class="compose-media-delete">
<button class="compose-media-delete-button"
@ -79,12 +79,12 @@
height: 18px;
}
.compose-media-realm.slim-size {
.compose-media-realm-dialog {
max-height: 20vh;
}
@media (max-width: 767px) {
.compose-media.slim-size {
.compose-media-realm-dialog {
max-height: 15vh;
}
}