hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

frontend: improve readability and css

Browse source
This commit is contained in:
hippoz 2022-04-22 23:01:44 +03:00
parent f7f536b318
commit e552de269b
Signed by: hippoz
GPG key ID: 7C52899193467641
4 changed files with 40 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/public/global.css
View file

@ -7,16 +7,27 @@
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-md: calc(1.25 * var(--space-unit));
--space-lg: calc(2 * var(--space-unit));
--space-xl: calc(3.25 * var(--space-unit));
@ -26,6 +37,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));

6
frontend/src/components/pages/main/ChannelView.svelte
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 {

1
frontend/src/components/pages/main/Main.svelte
View file

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

27
frontend/src/components/pages/main/Messages.svelte
View file

@ -48,24 +48,41 @@
<style>
.messages-container {
padding: var(--space-sm);
padding: var(--space-norm);
padding-bottom: 0;
padding-top: 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>