diff options
| author | Owen Jacobson <owen@grimoire.ca> | 2024-11-02 13:01:01 -0400 |
|---|---|---|
| committer | Owen Jacobson <owen@grimoire.ca> | 2024-11-02 13:01:01 -0400 |
| commit | e2908921d25347e3aab45afed9b9b4b807f79c25 (patch) | |
| tree | 9e0e7361d9b397ad92c9109523c072e2c5c66bba /ui/lib/components/MessageRun.svelte | |
| parent | 8088a8bd8bced9127edcb2284b993332d291b443 (diff) | |
| parent | a32b0ab6ad7995b8fff98e423793a7c6521ea1e9 (diff) | |
Merge remote-tracking branch 'origin/wip/mobile'
Diffstat (limited to 'ui/lib/components/MessageRun.svelte')
| -rw-r--r-- | ui/lib/components/MessageRun.svelte | 45 |
1 files changed, 28 insertions, 17 deletions
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte index 687eec3..cbf4f04 100644 --- a/ui/lib/components/MessageRun.svelte +++ b/ui/lib/components/MessageRun.svelte @@ -1,23 +1,34 @@ <script> - import { logins } from '$lib/store'; - import Message from '$lib/components/Message.svelte'; + import { logins, currentUser } from '$lib/store'; + import Message from '$lib/components/Message.svelte'; - export let sender; - export let messages; + export let sender; + export let messages; - let name; - $: name = $logins.get(sender); - - let scroll = (message) => { - message.scrollIntoView(); - } + let name; + $: name = $logins.get(sender); + $: ownMessage = $currentUser.id == sender; </script> -<div class="card card-hover m-4 px-4 py-1 relative"> - <span class="chip variant-soft sticky top-o left-0"> - @{name}: - </span> - {#each messages as { at, body }} - <Message {at} {body} /> - {/each} +<div + class="card card-hover m-4 px-4 py-1 relative" + class:own-message={ownMessage} + class:other-message={!ownMessage}> + <span class="chip variant-soft sticky top-o left-0"> + @{name}: + </span> + {#each messages as { at, body }} + <Message {at} {body} /> + {/each} </div> + +<style> + .own-message { + width: 80%; + margin-right: auto; + } + .other-message { + width: 80%; + margin-left: auto; + } +</style> |