fix: fix slim size compose dialog (#979)

fixes #106
This commit is contained in:
Nolan Lawson 2019-02-13 18:38:34 -08:00 committed by GitHub
parent 4074f09f65
commit df6b75e994
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 8 deletions

View file

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

View file

@ -1,4 +1,4 @@
<file-drop class="file-drop" accept={mediaAccept} ref:fileDrop > <file-drop class="file-drop {size === 'slim' ? 'slim-size' : ''}" accept={mediaAccept} ref:fileDrop >
<div class="file-drop-info"> <div class="file-drop-info">
<div class="file-drop-info-text"> <div class="file-drop-info-text">
<span class="file-drop-info-text-valid">Drop to upload</span> <span class="file-drop-info-text-valid">Drop to upload</span>
@ -34,6 +34,18 @@
border-radius: 6px; border-radius: 6px;
} }
.file-drop.slim-size {
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.file-drop.slim-size::-webkit-scrollbar {
display: none;
}
:global(.file-drop.drop-valid .file-drop-info, .file-drop.drop-invalid .file-drop-info) { :global(.file-drop.drop-valid .file-drop-info, .file-drop.drop-invalid .file-drop-info) {
display: flex; display: flex;
background: var(--file-drop-mask); background: var(--file-drop-mask);

View file

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

View file

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

View file

@ -1,4 +1,4 @@
<div class="compose-media"> <div class="compose-media {size === 'slim' ? 'slim-size' : ''}">
<img src={mediaItem.data.preview_url} {alt} /> <img src={mediaItem.data.preview_url} {alt} />
<div class="compose-media-delete"> <div class="compose-media-delete">
<button class="compose-media-delete-button" <button class="compose-media-delete-button"
@ -78,6 +78,16 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.compose-media-realm.slim-size {
max-height: 20vh;
}
@media (max-width: 767px) {
.compose-media.slim-size {
max-height: 15vh;
}
}
</style> </style>
<script> <script>
import { store } from '../../_store/store' import { store } from '../../_store/store'