Compare commits

..

3 commits

Author SHA1 Message Date
hippoz
164545bb26
frontend: add placeholder color for message input 2022-04-22 23:34:02 +03:00
hippoz
9bfc645a32
frontend: improve messages container padding 2022-04-22 23:10:00 +03:00
hippoz
e552de269b
frontend: improve readability and css 2022-04-22 23:01:44 +03:00
4 changed files with 47 additions and 11 deletions

View file

@ -7,16 +7,28 @@
src: url('assets/woff2/iosevka-aile-regular.woff2') format('woff2');
}
@font-face {
font-family: 'Iosevka Aile Web';
font-display: swap;
font-weight: 700;
font-stretch: normal;
font-style: normal;
src: url('assets/woff2/iosevka-aile-bold.woff2') format('woff2');
}
:root {
--background-color-1: hsl(180, 11%, 7%);
--background-color-2: hsl(180, 11%, 12%);
--foreground-color-1: hsl(0, 0%, 100%);
--foreground-color-2: hsl(0, 0%, 60%);
--foreground-color-1: rgb(253, 254, 255);
--foreground-color-2: rgb(218, 219, 220);
--foreground-color-3: rgb(153, 154, 155);
--space-unit: 1em;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-norm: var(--space-unit);
--space-normplus: calc(var(--space-unit) + var(--space-sm));
--space-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
@ -26,6 +38,7 @@
--radius-xxs: calc(0.25 * var(--radius-unit));
--radius-xs: calc(0.5 * var(--radius-unit));
--radius-sm: calc(0.75 * var(--radius-unit));
--radius-norm: var(--radius-unit);
--radius-md: calc(1.25 * var(--radius-unit));
--radius-lg: calc(2 * var(--radius-unit));
--radius-xl: calc(3.25 * var(--radius-unit));

View file

@ -47,6 +47,8 @@
<style>
.main-container {
background-color: var(--background-color-1);
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
@ -57,7 +59,6 @@
height: 3.4em;
width: 100%;
padding: var(--space-xs);
background-color: var(--background-color-1);
display: flex;
align-items: center;
border-bottom: 1px solid var(--background-color-2);
@ -69,8 +70,7 @@
.message-input-container {
width: 100%;
padding: var(--space-md);
background-color: var(--background-color-1);
padding: var(--space-norm);
}
.message-input {
@ -81,6 +81,12 @@
color: currentColor;
border-radius: var(--radius-md);
padding: var(--space-sm);
font-size: inherit;
line-height: inherit;
}
.message-input::placeholder {
color: var(--foreground-color-3);
}
</style>
@ -91,6 +97,6 @@
</div>
<Messages channelId="{ channel.id }" />
<div class="message-input-container">
<input type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
<input placeholder={`Send something interesting to #${channel.name}`} type="text" class="message-input" on:keydown={ onKeydown } bind:value={ messageInput }>
</div>
</div>

View file

@ -10,6 +10,7 @@
height: 100vh;
display: flex;
flex-direction: row;
overflow: hidden;
}
.fullscreen-message {

View file

@ -48,24 +48,40 @@
<style>
.messages-container {
padding: var(--space-sm);
padding: var(--space-normplus);
padding-bottom: 0;
height: 100%;
width: 100%;
flex-grow: 0;
overflow-y: auto;
overflow-x: hidden;
background-color: var(--background-color-1);
}
.pending {
.message {
overflow-x: none;
word-break: break-all;
}
.message-content {
color: var(--foreground-color-2);
}
.pending {
color: var(--foreground-color-3);
}
.author {
font-weight: bold;
margin-right: var(--space-xxs);
}
</style>
<div class="messages-container" on:scroll={ onScroll } bind:this={ scrollTarget }>
{#each $messages as message (message.id)}
<div>
<b>{ message.author_username }</b>
<span class:pending={ message._isPending }>{ message.content }</span>
<div class="message">
<span class="author">{ message.author_username }</span>
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
</div>
{/each}
</div>