diff options
Diffstat (limited to 'hi-ui/src/lib/Message.svelte')
| -rw-r--r-- | hi-ui/src/lib/Message.svelte | 25 |
1 files changed, 13 insertions, 12 deletions
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte index 0e7cdaf..efc6641 100644 --- a/hi-ui/src/lib/Message.svelte +++ b/hi-ui/src/lib/Message.svelte @@ -3,28 +3,29 @@ import { currentUser } from '../store'; import { deleteMessage } from '../apiServer'; - export let at; + export let at; // XXX: Omitted for now. export let sender; export let message; let timestamp = new Date(at).toTimeString(); </script> -<div class="hover:bg-zinc-300 flex flex-row"> - <div class="sender basis-20 text-right mr-1"> +<div class="card card-hover m-4 relative"> + <span class="chip variant-soft sticky top-o left-0"> + <!-- TODO: should this show up for only the first of a run? --> @{sender.name}: - </div> - <div class="body grow"> + </span> + <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span> + <section class="p-4"> <SvelteMarkdown source={message.body} /> - </div> - <div class="timestamp basis-6"> - <!-- TODO: this is too long and looks awful. --> - <!-- {timestamp} --> - </div> + </section> </div> <style> - div:hover .controls { - display: block; + .card .timestamp { + display: none; + } + .card:hover .timestamp { + display: flex; } </style> |