samuelandert.eth/auth.andert.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

major ui overhaul adding skeletonlabs design system

Browse Source
This commit is contained in:
Samuel Andert
2023-07-27 09:30:30 +02:00
parent 371e42e4ee
commit 460deb3be1
30 changed files with 994 additions and 1050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/lib/components/Messages.svelte
View File

@ -1,6 +1,7 @@
<script>
import { onMount, afterUpdate } from 'svelte';
import Composite from '$lib/core/Composite.svelte';
import { Avatar } from '@skeletonlabs/skeleton';
export let store;
@ -27,22 +28,22 @@
{#if isStoreLoaded}
{#if $store.messages}
<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
{#each $store.messages as message}
<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
<div class="flex items-center justify-between">
<p class="text-sm text-gray-600">
{message.type} | {message.sender}
</p>
<p class="text-xs text-gray-600">{message.timestamp}</p>
<div class="grid gap-2">
{#each $store.messages as message}
<div class="p-4 space-y-2 rounded-tl-none card variant-soft">
<header class="flex items-center justify-between">
<p class="font-bold">{message.type} | {message.sender}</p>
<small class="opacity-50">{message.timestamp}</small>
</header>
<p>{message.text}</p>
</div>
<p class="mt-2 text-base text-gray-800">{message.text}</p>
</div>
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite composite={message.composite} />
</div>
{/if}
{/each}
{#if message.composite}
<div class="overflow-y-auto max-h-80vh">
<Composite composite={message.composite} />
</div>
{/if}
{/each}
</div>
</main>
{/if}
{:else}