parent
4074f09f65
commit
df6b75e994
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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'
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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'
|
||||||
|
|
Loading…
Reference in a new issue