diff options
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> |