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'}
<h1 class="sr-only">Compose status</h1>
{/if}
<ComposeFileDrop {realm} >
<ComposeFileDrop {realm} {size} >
<div class="{computedClassName} {hideAndFadeIn}">
<ComposeAuthor />
{#if contentWarningShown}
@ -10,11 +10,11 @@
<ComposeContentWarning {realm} {contentWarning} />
</div>
{/if}
<ComposeInput {realm} {text} {autoFocus} on:postAction="doPostStatus()" />
<ComposeInput {realm} {text} {autoFocus} {size} on:postAction="doPostStatus()" />
<ComposeLengthGauge {length} {overLimit} />
<ComposeToolbar {realm} {postPrivacy} {media} {contentWarningShown} {text} />
<ComposeLengthIndicator {length} {overLimit} />
<ComposeMedia {realm} {media} />
<ComposeMedia {realm} {media} {size} />
</div>
</ComposeFileDrop>
<ComposeStickyButton {showSticky}
@ -76,6 +76,7 @@
.compose-box.slim-size {
width: 560px;
max-width: calc(100vw - 40px);
overflow-x: hidden;
}
}
</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-text">
<span class="file-drop-info-text-valid">Drop to upload</span>
@ -34,6 +34,18 @@
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) {
display: flex;
background: var(--file-drop-mask);

View file

@ -1,6 +1,6 @@
<textarea
id="the-compose-box-input-{realm}"
class="compose-box-input"
class="compose-box-input { size ==='slim' ? 'slim-size' : ''}"
placeholder="What's on your mind?"
ref:textarea
bind:value=rawText
@ -29,6 +29,23 @@
*/
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>
<script>
import { store } from '../../_store/store'

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} />
<ComposeMediaItem {realm} {mediaItem} {index} {media} {size} />
{/each}
</div>
{/if}
@ -28,4 +28,4 @@
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} />
<div class="compose-media-delete">
<button class="compose-media-delete-button"
@ -78,6 +78,16 @@
width: 18px;
height: 18px;
}
.compose-media-realm.slim-size {
max-height: 20vh;
}
@media (max-width: 767px) {
.compose-media.slim-size {
max-height: 15vh;
}
}
</style>
<script>
import { store } from '../../_store/store'