refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2024-12-23 01:35:03 -07:00
parent 190aeb3fef
commit 6d02485999
2 changed files with 35 additions and 30 deletions

View File

@ -109,35 +109,38 @@
? 'md:max-w-[calc(100%-260px)]' ? 'md:max-w-[calc(100%-260px)]'
: ''} w-full max-w-full flex flex-col" : ''} w-full max-w-full flex flex-col"
> >
{#if channel} <Navbar {channel} />
<Navbar {channel} />
<div
class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
id="messages-container"
bind:this={messagesContainerElement}
on:scroll={(e) => {
scrollEnd = Math.abs(messagesContainerElement.scrollTop) <= 50;
}}
>
{#key id}
<Messages
{channel}
{messages}
{top}
onLoad={async () => {
const newMessages = await getChannelMessages(localStorage.token, id, messages.length);
messages = [...messages, ...newMessages]; <div class="flex-1">
{#if channel}
<div
class=" pb-2.5 max-w-full z-10 scrollbar-hidden w-full h-full pt-6 flex-1 flex flex-col-reverse overflow-auto"
id="messages-container"
bind:this={messagesContainerElement}
on:scroll={(e) => {
scrollEnd = Math.abs(messagesContainerElement.scrollTop) <= 50;
}}
>
{#key id}
<Messages
{channel}
{messages}
{top}
onLoad={async () => {
const newMessages = await getChannelMessages(localStorage.token, id, messages.length);
if (newMessages.length < 50) { messages = [...messages, ...newMessages];
top = true;
return; if (newMessages.length < 50) {
} top = true;
}} return;
/> }
{/key} }}
</div> />
{/if} {/key}
</div>
{/if}
</div>
<div class=" pb-[1rem]"> <div class=" pb-[1rem]">
<MessageInput onSubmit={submitHandler} {scrollToBottom} {scrollEnd} /> <MessageInput onSubmit={submitHandler} {scrollToBottom} {scrollEnd} />

View File

@ -47,9 +47,11 @@
{$showSidebar ? 'ml-1' : ''} {$showSidebar ? 'ml-1' : ''}
" "
> >
<div class="line-clamp-1 capitalize font-medium font-primary text-lg"> {#if channel}
{channel.name} <div class="line-clamp-1 capitalize font-medium font-primary text-lg">
</div> {channel.name}
</div>
{/if}
</div> </div>
<div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400"> <div class="self-start flex flex-none items-center text-gray-600 dark:text-gray-400">