improve message bar appearance on small viewports

This commit is contained in:
hippoz 2022-08-20 03:32:31 +03:00
parent 34f945b7f4
commit 6cf7da5089
Signed by: hippoz
GPG key ID: 7C52899193467641
2 changed files with 19 additions and 3 deletions

View file

@ -36,6 +36,7 @@
--space-unit: 1em; --space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit)); --space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit)); --space-xs: calc(0.5 * var(--space-unit));
--space-xsplus: calc(0.65 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit)); --space-sm: calc(0.75 * var(--space-unit));
--space-norm: var(--space-unit); --space-norm: var(--space-unit);
--space-normplus: calc(var(--space-unit) + var(--space-sm)); --space-normplus: calc(var(--space-unit) + var(--space-sm));

View file

@ -1,5 +1,5 @@
<script> <script>
import { SendIcon } from "svelte-feather-icons"; import { ArrowUpIcon, SendIcon } from "svelte-feather-icons";
import request from "../request"; import request from "../request";
import { apiRoute } from "../storage"; import { apiRoute } from "../storage";
import { messagesStoreProvider, overlayStore, smallViewport, typingStore, userInfoStore } from "../stores"; import { messagesStoreProvider, overlayStore, smallViewport, typingStore, userInfoStore } from "../stores";
@ -102,6 +102,16 @@
padding-bottom: 0; padding-bottom: 0;
} }
.message-input-container.small {
padding-top: var(--space-sm);
}
.message-input.small {
padding: var(--space-xsplus);
padding-left: var(--space-sm);
border-radius: 1.4em;
}
.message-input { .message-input {
width: 100%; width: 100%;
background-color : var(--background-color-2); background-color : var(--background-color-2);
@ -120,6 +130,10 @@
.send-button { .send-button {
margin-left: var(--space-sm); margin-left: var(--space-sm);
border-radius: 50%;
background-color: var(--purple-1);
aspect-ratio: 1 / 1;
flex-shrink: 0;
} }
.invisible { .invisible {
@ -148,7 +162,7 @@
} }
</style> </style>
<div class="message-input-container"> <div class="message-input-container" class:small={ $smallViewport }>
<div class="inner-input-container"> <div class="inner-input-container">
<textarea <textarea
placeholder={$smallViewport ? `Message #${channel.name}` : `Send something interesting to #${channel.name}`} placeholder={$smallViewport ? `Message #${channel.name}` : `Send something interesting to #${channel.name}`}
@ -159,10 +173,11 @@
on:input={ onInput } on:input={ onInput }
bind:value={ messageInput } bind:value={ messageInput }
bind:this={ messageTextarea } bind:this={ messageTextarea }
class:small={ $smallViewport }
/> />
{#if $smallViewport} {#if $smallViewport}
<button class="icon-button send-button" on:click="{ sendMessage }"> <button class="icon-button send-button" on:click="{ sendMessage }">
<SendIcon /> <ArrowUpIcon />
</button> </button>
{/if} {/if}
</div> </div>