dvdrw/litechatplus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: tighten up css

Browse Source 
created a bunch of utility classes and use those instead
This commit is contained in:
dvdrw 2023-02-12 20:57:46 +01:00
parent 6e7a836cbd
commit 380d3a7d89
Signed by: dvdrw
GPG Key ID: 044B8425E3CD03E0
9 changed files with 291 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/lib/About.svelte
View File

@ -2,13 +2,13 @@
import { version } from '$app/environment'; import { version } from '$app/environment';
</script> </script>
<div class="about d-flex col no-select"> <div class="about d-flex col no-select text-center">
<h1 class="litechat">litechat<span class="plus">plus</span></h1> <h1 class="litechat mb-0 color-300">litechat<span class="plus color-cyan super">plus</span></h1>
<p>A [<i>fedwave</i>] chat client.</p> <p>A [<i>fedwave</i>] chat client.</p>
<div class="d-flex build-info"> <div class="d-flex build-info px-24 select-text color-400">
<p class="version">Version: {version}</p> <p class="version">Version: {version}</p>
<div class="spacer" /> <div class="spacer" />
<p class="commit">{__COMMIT__}</p> <p class="commit select-all">{__COMMIT__}</p>
</div> </div>
</div> </div>
@ -16,29 +16,6 @@
.about { .about {
height: var(--top-screen-cutout-height); height: var(--top-screen-cutout-height);
width: var(--sidebar-width, 350px); width: var(--sidebar-width, 350px);
text-align: center;
} }
.litechat {
color: var(--base-300);
margin-bottom: 0px;
& .plus {
vertical-align: super;
color: var(--cyan);
}
}
.build-info {
padding-left: 24px;
padding-right: 24px;
& > * {
user-select: text;
}
}
.version {
color: var(--base-400);
}
</style> </style>

4
src/lib/Avatar.svelte
View File

@ -5,9 +5,9 @@
export let size: string = 'var(--avatar-size)'; export let size: string = 'var(--avatar-size)';
</script> </script>
<div class="avatar" style:--color="{color}" style:--size="{size}" on:click> <button class="avatar pa-0 border-0" style:--color="{color}" style:--size="{size}" on:click>
<img src="{avatar}" alt="{`${username}'s avatar`}"> <img src="{avatar}" alt="{`${username}'s avatar`}">
</div> </button>
<style> <style>
.avatar, .avatar > img { .avatar, .avatar > img {

144
src/lib/ChatMessage.svelte
View File

@ -6,15 +6,15 @@
export let isHeader: boolean = true; export let isHeader: boolean = true;
</script> </script>
<div class="message" class:subseq="{!isHeader}"> <div class="message d-flex p-relative pl-8 pr-24" class:subseq="{!isHeader}">
{#if isHeader} {#if isHeader}
<div class="avatar" style="background-color: {message.color}"> <div class="avatar radius-pill overflow-hidden no-select" style="background-color: {message.color}">
<img alt="{message.username}'s avatar" src="{message.avatar || '/troll_haz2.png'}"> <img class="w-100" alt="{message.username}'s avatar" src="{message.avatar || '/troll_haz2.png'}">
</div> </div>
{/if} {/if}
<div class="container"> <div class="container">
{#if isHeader} {#if isHeader}
<div class="top"> <div class="top d-flex grow-1">
<div class="username"> <div class="username">
{message.username} {message.username}
</div> </div>
@ -25,24 +25,25 @@
</div> </div>
<div class="spacer" /> <div class="spacer" />
{#if globalMode} {#if globalMode}
<a href="/{message.channel}" class="channel" <a href="/{message.channel}" class="channel radius-4 px-2 text-end color-700 no-select"
class:local="{$room == message.channel.toLowerCase()}"> class:local="{$room == message.channel.toLowerCase()}">
{message.channel} {message.channel}
</a> </a>
{/if} {/if}
</div> </div>
{/if} {/if}
<div class="text"> <div class="text basis-0">
{@html message.message} {@html message.message}
</div> </div>
</div> </div>
</div> </div>
<style> <style lang="scss">
:root { :root {
--message-line-height: 22px; --message-line-height: 22px;
--avatar-size: 35px; --avatar-size: 35px;
--greentext-color: #789922; --greentext-color: #789922;
--message-group-spacing: 8px;
} }
* { * {
@ -51,54 +52,26 @@
font-family: IBM Plex Sans font-family: IBM Plex Sans
} }
.message {
position: relative;
padding-left: 8px;
padding-right: 24px;
display: flex;
}
.message:last-child {
margin-bottom: 12px;
}
.message:hover { .message:hover {
background: var(--base-700); background: var(--base-700);
} }
.avatar { .avatar {
border-radius: 9999px;
overflow: hidden;
min-height: var(--avatar-size); min-height: var(--avatar-size);
min-width: var(--avatar-size); min-width: var(--avatar-size);
max-height: var(--avatar-size); max-height: var(--avatar-size);
max-width: var(--avatar-size); max-width: var(--avatar-size);
user-select: none;
}
.avatar > img {
width: 100%;
height: auto
} }
.message:not(.subseq) { .message:not(.subseq) {
padding-top: 4px; padding-top: 4px;
margin-top: 8px; margin-top: var(--message-group-spacing);
} }
.subseq { .subseq {
margin-top: 0; margin-top: 0;
padding-top: 0; padding-top: 0;
padding-left: calc(16px + var(--avatar-size)); padding-left: calc(16px + var(--avatar-size)) !important;
}
.subseq > .container {
margin-left: 0;
padding-top: 2px;
padding-bottom: 2px;
} }
.container { .container {
@ -107,87 +80,72 @@
justify-content: space-between; justify-content: space-between;
margin-left: 8px; margin-left: 8px;
width: 100%; width: 100%;
}
.top { .subseq > & {
display: flex; margin-left: 0;
height: 18px; padding-top: 2px;
} padding-bottom: 2px;
}
.top .spacer {
flex-grow: 1;
} }
.username { .username {
font-weight: bold; font-weight: bold;
font-optical-sizing: auto;
height: 12px; height: 12px;
font-family: IBM Plex Mono, Consolas, monospace; font-family: IBM Plex Mono, Consolas, monospace;
} }
.channel { .channel {
--background: var(--base-600); background-color: var(--base-600);
border-radius: 4px;
background-color: var(--background);
padding-left: 2px;
padding-right: 2px;
text-align: right;
font-family: IBM Plex Mono, Consolas, monospace; font-family: IBM Plex Mono, Consolas, monospace;
text-transform: lowercase; text-transform: lowercase;
color: var(--base-700);
user-select: none;
} }
.channel.local { .channel.local {
--background: var(--cyan); background-color: var(--cyan);
} }
.text { .text {
flex-basis: 0; & :global(.mention) {
} font-weight: 800;
color: var(--yellow);
}
.text :global(.mention) { & :global(p:empty), & :global(br:nth-last-child(1)), & :global(br) {
font-weight: 800; display: none;
color: var(--yellow); }
}
.text :global(p:empty), .text :global(br:nth-last-child(1)), .text :global(br) { & > :global(blockquote) {
display: none; margin: 0;
} color: var(--greentext-color);
}
.text > :global(blockquote) { & > :global(p), & > :global(blockquote) {
margin: 0; line-height: var(--message-line-height);
color: var(--greentext-color); }
}
.text > :global(p), .text > :global(blockquote) { & :global(h1) {
line-height: var(--message-line-height); margin: 0;
} margin-top: 8px;
margin-bottom: 8px;
font-size: 1.5em;
}
.text :global(h1) { & :global(*) {
margin: 0; overflow-wrap: anywhere;
margin-top: 8px; }
margin-bottom: 8px;
font-size: 1.5em;
}
.text :global(*) { & :global(p) {
overflow-wrap: anywhere; margin: 0;
} }
.text :global(p) { & :global(img) {
margin: 0; height: var(--message-line-height);
} vertical-align: bottom;
}
.text :global(img) { & :global(h1 img) {
height: var(--message-line-height); height: calc(2 * var(--message-line-height));
vertical-align: bottom; vertical-align: bottom;
} }
.text :global(h1 img) {
height: calc(2 * var(--message-line-height));
vertical-align: bottom;
} }
</style> </style>

168
src/lib/ChatMessages.svelte
View File

@ -1,90 +1,101 @@
<script lang="ts"> <script lang="ts">
import FAB from './ui/FAB.svelte'; import FAB from './ui/FAB.svelte';
import MessageView from './MessageView.svelte'; import MessageView from './MessageView.svelte';
import Input from './Input.svelte'; import Input from './Input.svelte';
import { Svrollbar } from 'svrollbar'; import { Svrollbar } from 'svrollbar';
import { chat_lock, chat, localMessages as messages, shouldTweet } from './chat'; import { chat_lock, chat, localMessages as messages, shouldTweet } from './chat';
import { globalMode } from './settings'; import { globalMode } from './settings';
import { onMount, onDestroy, tick } from 'svelte'; import { onMount, onDestroy, tick } from 'svelte';
import type { Unsubscriber } from 'svelte/store'; import type { Unsubscriber } from 'svelte/store';
import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/svelte-fontawesome';
import { faArrowDown } from '@fortawesome/free-solid-svg-icons'; import { faArrowDown } from '@fortawesome/free-solid-svg-icons';
let stickToBottom = true; let stickToBottom = true;
let viewport: Element, contents: Element; let viewport: Element, contents: Element;
let tweet: HTMLAudioElement; let tweet: HTMLAudioElement;
shouldTweet.subscribe((should) => { shouldTweet.subscribe((should) => {
if (should) { if (should) {
if (tweet) { if (tweet) {
tweet.volume = 0.5; tweet.volume = 0.5;
tweet?.play().catch(() => {}); tweet?.play().catch(() => {});
} }
shouldTweet.set(false); shouldTweet.set(false);
} }
}); });
export async function scrollToBottom(smooth = true) { export async function scrollToBottom(smooth = true) {
viewport && viewport &&
viewport.scrollTo({ viewport.scrollTo({
top: viewport.scrollHeight, top: viewport.scrollHeight,
behavior: smooth ? 'smooth' : undefined behavior: smooth ? 'smooth' : undefined
}); });
} }
let releaseLock: Unsubscriber; let releaseLock: Unsubscriber;
onMount(async () => { onMount(async () => {
releaseLock = chat_lock.subscribe(() => {}); releaseLock = chat_lock.subscribe(() => {});
await chat.hydrate(); await chat.hydrate();
await tick(); await tick();
viewport && (viewport.scrollTop = viewport.scrollHeight); viewport && (viewport.scrollTop = viewport.scrollHeight);
}); });
messages.subscribe(async () => { messages.subscribe(async () => {
if (stickToBottom) { if (stickToBottom) {
// Wait for the message to be added to the DOM // Wait for the message to be added to the DOM
await tick(); await tick();
// Scroll the list to the bottom with the new DOM // Scroll the list to the bottom with the new DOM
await scrollToBottom(false); await scrollToBottom(false);
// vlist?.scrollToIndex(ms.length); // vlist?.scrollToIndex(ms.length);
// Fake debounce to make sure we're still stuck at the bottom // Fake debounce to make sure we're still stuck at the bottom
await tick(); await tick();
stickToBottom = true; stickToBottom = true;
} }
}); });
onDestroy(() => { onDestroy(() => {
releaseLock?.(); releaseLock?.();
}); });
function onScroll(e: Event) { function onScroll(e: Event) {
if (!e.isTrusted) return; if (!e.isTrusted) return;
const scrollOffset = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight; const scrollOffset = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
if (scrollOffset >= 80) {
stickToBottom = false;
} else if (scrollOffset < 80) {
stickToBottom = true;
}
}
if (scrollOffset >= 80) {
stickToBottom = false;
} else if (scrollOffset < 80) {
stickToBottom = true;
}
}
</script> </script>
<div class="scroller"> <div class="scroller grow-1 basis-0 p-relative">
<audio src="/tweet.mp3" bind:this={tweet} /> <audio src="/tweet.mp3" bind:this={tweet} />
<Svrollbar {viewport} {contents} margin={{ right: 6, bottom: 12, top: 12 }} <Svrollbar
alwaysVisible {viewport}
--svrollbar-track-width="8px" --svrollbar-thumb-width="4px" /> {contents}
<MessageView messages="{$messages}" showChannel="{$globalMode}" margin={{ right: 6, bottom: 12, top: 12 }}
bind:viewport bind:contents on:scroll={onScroll} /> alwaysVisible
--svrollbar-track-width="8px"
--svrollbar-thumb-width="4px"
/>
<MessageView
messages={$messages}
showChannel={$globalMode}
bind:viewport
bind:contents
on:scroll={onScroll}
/>
{#if !stickToBottom} {#if !stickToBottom}
<FAB --background="{'var(--base-700)'}" on:click={() => scrollToBottom()}><FontAwesomeIcon icon="{faArrowDown}" /></FAB> <FAB --background={'var(--base-700)'} on:click={() => scrollToBottom()}
><FontAwesomeIcon icon={faArrowDown} /></FAB
>
{/if} {/if}
</div> </div>
<Input /> <Input />
@ -92,9 +103,6 @@
<style> <style>
.scroller { .scroller {
min-height: 0; min-height: 0;
flex-grow: 1;
flex-basis: 0;
position: relative;
} }
.scroller > :global(.viewport) { .scroller > :global(.viewport) {
@ -106,16 +114,14 @@
margin-bottom: 32px; margin-bottom: 32px;
} }
.scroller > :global(*) { .scroller > :global(*) {
/* hide scrollbar */ -ms-overflow-style: none !important;
-ms-overflow-style: none !important; scrollbar-width: none !important;
scrollbar-width: none !important; }
}
.scroller > :global(*::-webkit-scrollbar) { .scroller > :global(*::-webkit-scrollbar) {
/* hide scrollbar */ display: none !important;
display: none !important; }
}
.scroller :global(.v-thumb) { .scroller :global(.v-thumb) {
z-index: 101; z-index: 101;

13
src/lib/Header.svelte
View File

@ -2,7 +2,7 @@
export let flex = false; export let flex = false;
</script> </script>
<div class="header" class:flex="{flex}"> <div class="header p-relative" class:d-flex="{flex}">
<slot /> <slot />
</div> </div>
@ -11,19 +11,12 @@
--header-size: 48px; --header-size: 48px;
--header-color: var(--base-600); --header-color: var(--base-600);
--header-z: 101; --header-z: 101;
} --header-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
.flex {
display: flex;
flex-direction: row;
} }
.header { .header {
position: relative;
height: var(--header-size); height: var(--header-size);
box-shadow: none; /* var(--header-shadow) */
/* box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px; */
background-color: var(--header-color); background-color: var(--header-color);
} }

14
src/lib/Input.svelte
View File

@ -13,19 +13,15 @@
} }
</script> </script>
<div class="container"> <div class="container p-relative d-flex pa-16 pt-0">
<textarea bind:value="{input}" on:keydown={keydown} class="input" /> <textarea bind:value="{input}" on:keydown={keydown} class="input grow-1 radius-16 border-0 pa-8 bg-700 color-300" />
</div> </div>
<style> <style>
.container { .container {
height: calc(2 * var(--message-line-height)); height: calc(2 * var(--message-line-height));
display: flex;
padding: 16px;
padding-top: 0;
margin-top: -12px; margin-top: -12px;
z-index: 100; z-index: 100;
position: relative
} }
.container::before, .container::after { .container::before, .container::after {
@ -41,14 +37,8 @@
.container::after { right: 0; } .container::after { right: 0; }
.input { .input {
flex-grow: 1;
resize: none; resize: none;
border-radius: 16px;
border: none;
z-index: 100; z-index: 100;
padding: 8px;
background: var(--base-700);
color: var(--base-300);
} }
.input:focus { .input:focus {

10
src/lib/SignIn.svelte
View File

@ -47,13 +47,13 @@
<p class="no-select">Method:</p> <p class="no-select">Method:</p>
<div class="signin-buttons grow-1 d-flex"> <div class="signin-buttons grow-1 d-flex">
<button <button
class="grow-1" class="p-relative grow-1"
disabled disabled
on:click={() => (selectedMethod = 'userpass')} on:click={() => (selectedMethod = 'userpass')}
class:selected={selectedMethod == 'userpass'}>Username</button class:selected={selectedMethod == 'userpass'}>Username</button
> >
<button <button
class="grow-1" class="p-relative grow-1"
on:click={() => (selectedMethod = 'token')} on:click={() => (selectedMethod = 'token')}
class:selected={selectedMethod == 'token'}>Token</button class:selected={selectedMethod == 'token'}>Token</button
> >
@ -67,6 +67,7 @@
<textarea <textarea
class:error class:error
spellcheck="false" spellcheck="false"
class="w-100 bg-800 radius-4 pa-8"
on:change={() => (error = false)} on:change={() => (error = false)}
placeholder="Paste token here" placeholder="Paste token here"
bind:value={token} bind:value={token}
@ -90,7 +91,6 @@
.selected { .selected {
background-color: var(--base-600); background-color: var(--base-600);
color: var(--base-700); color: var(--base-700);
position: relative;
margin-left: -32px; margin-left: -32px;
margin-right: -32px; margin-right: -32px;
border-radius: 24px; border-radius: 24px;
@ -129,13 +129,9 @@
} }
textarea { textarea {
width: 100%;
max-width: 100%; max-width: 100%;
height: 150px; height: 150px;
background-color: var(--base-800);
border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
padding: 8px;
word-break: break-all; word-break: break-all;
} }

20
src/lib/TopScreen.svelte
View File

@ -52,8 +52,8 @@
} }
</script> </script>
<div transition:slide class="top screen" bind:clientHeight> <div transition:slide class="top screen p-relative d-flex col" bind:clientHeight>
<div class="about"> <div class="about p-absolute">
<About /> <About />
</div> </div>
@ -128,7 +128,9 @@
</div> </div>
</div> </div>
<style> <style lang="scss">
@use "$lib/styles/utils";
:global(body) { :global(body) {
--top-screen-cutout-height: 20vh; --top-screen-cutout-height: 20vh;
--top-screen-background-color: var(--base-700); --top-screen-background-color: var(--base-700);
@ -139,21 +141,17 @@
height: calc(100vh - var(--top-screen-cutout-height)); height: calc(100vh - var(--top-screen-cutout-height));
max-height: calc(100vh - var(--top-screen-cutout-height)); max-height: calc(100vh - var(--top-screen-cutout-height));
background-color: var(--top-screen-background-color); background-color: var(--top-screen-background-color);
display: flex;
flex-direction: column;
position: relative;
} }
:global(.container.mobile) .about {
display: none;
}
.about { .about {
position: absolute;
z-index: 500; z-index: 500;
bottom: calc(-1 * var(--top-screen-cutout-height)); bottom: calc(-1 * var(--top-screen-cutout-height));
opacity: var(--about-opacity); opacity: var(--about-opacity);
display: var(--about-display); display: var(--about-display);
:global(.container.mobile) & {
display: none;
}
} }
:global(.container.mobile) .settings { :global(.container.mobile) .settings {

130
src/lib/styles/utils.scss
View File

@ -14,6 +14,16 @@
.no-select { .no-select {
user-select: none; user-select: none;
} }
.select-text {
user-select: text;
}
.select-all {
user-select: all;
}
.select-contain {
user-select: contain;
}
.clickable { .clickable {
cursor: pointer; cursor: pointer;
@ -89,3 +99,123 @@
margin-top: 2px; margin-top: 2px;
margin-bottom: 2px; margin-bottom: 2px;
} }
@mixin gen-directions($prefix, $prop, $i, $sz) {
.#{$prefix}l-#{$i} {
#{$prop}-left: #{$sz} !important;
}
.#{$prefix}r-#{$i} {
#{$prop}-right: #{$sz} !important;
}
.#{$prefix}x-#{$i} {
#{$prop}-left: #{$sz};
#{$prop}-right: #{$sz};
}
.#{$prefix}t-#{$i} {
#{$prop}-top: #{$sz} !important;
}
.#{$prefix}b-#{$i} {
#{$prop}-bottom: #{$sz} !important;
}
.#{$prefix}y-#{$i} {
#{$prop}-top: #{$sz};
#{$prop}-bottom: #{$sz};
}
.#{$prefix}a-#{$i} {
#{$prop}-left: #{$sz};
#{$prop}-right: #{$sz};
#{$prop}-top: #{$sz};
#{$prop}-bottom: #{$sz};
}
}
@mixin border-directions($i ,$sz) {
.radius-tl-#{$i} {
border-top-left-radius: #{$sz};
}
.radius-tr-#{$i} {
border-top-right-radius: #{$sz};
}
.radius-t-#{$i} {
@extend .radius-tl-#{$i};
@extend .radius-tr-#{$i};
}
.radius-bl-#{$i} {
border-bottom-left-radius: #{$sz};
}
.radius-br-#{$i} {
border-bottom-right-radius: #{$sz};
}
.radius-b-#{$i} {
@extend .radius-bl-#{$i};
@extend .radius-br-#{$i};
}
.radius-l-#{$i} {
@extend .radius-tl-#{$i};
@extend .radius-bl-#{$i};
}
.radius-r-#{$i} {
@extend .radius-tr-#{$i};
@extend .radius-br-#{$i};
}
.radius-#{$i} {
@extend .radius-l-#{$i};
@extend .radius-r-#{$i};
}
}
$spacings: (0 0px, 1 1px, 2 2px, 4 4px, 6 6px, 8 8px, 12 12px, 16 16px, 18 18px, 24 24px, 32 32px, 36 36px, 48 48px);
@each $i, $sz in $spacings {
@include gen-directions(p, padding, $i, $sz);
@include gen-directions(m, margin, $i, $sz);
@include border-directions($i, $sz);
}
@include border-directions(pill, 9999px);
.border-0 { border: 0; }
$colors: (100 base-100, 200 base-200, 300 base-300, 400 base-400, 500 base-500, 600 base-600, 700 base-700, 800 base-800, yellow yellow, orange orange, red red, magenta magenta, violet violet, blue blue, cyan cyan, green green);
@each $i, $name in $colors {
.color-#{$i} {
color: var(--#{$name}) !important;
}
.bg-#{$i} {
background-color: var(--#{$name});
}
}
@each $i in (start, end, center, justify, left, right) {
.text-#{$i} {
text-align: #{$i};
}
}
.super {
vertical-align: super;
}
@each $i in (hidden, scroll) {
.overflow-x-#{$i} {
overflow-x: #{$i};
}
.overflow-y-#{$i} {
overflow-y: #{$i};
}
.overflow-#{$i} {
@extend .overflow-x-#{$i};
@extend .overflow-y-#{$i};
}
}
@each $i in (relative, absolute, fixed, sticky) {
.p-#{$i} {
position: #{$i};
}
}