diff options
| -rw-r--r-- | hi-ui/src/lib/Channel.svelte | 4 | ||||
| -rw-r--r-- | hi-ui/src/lib/LogOut.svelte | 12 | ||||
| -rw-r--r-- | hi-ui/src/routes/+layout.svelte | 11 | ||||
| -rw-r--r-- | hi-ui/src/routes/+page.svelte | 28 |
4 files changed, 46 insertions, 9 deletions
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte index 80c4505..7826c46 100644 --- a/hi-ui/src/lib/Channel.svelte +++ b/hi-ui/src/lib/Channel.svelte @@ -15,8 +15,8 @@ </script> <li - class="cursor-pointer hover:bg-teal-100" - class:bg-teal-300={active} + class="cursor-pointer hover:bg-slate-300" + class:bg-slate-400={active} on:click={activate} > #{name} diff --git a/hi-ui/src/lib/LogOut.svelte b/hi-ui/src/lib/LogOut.svelte index 439a530..64d26c9 100644 --- a/hi-ui/src/lib/LogOut.svelte +++ b/hi-ui/src/lib/LogOut.svelte @@ -2,6 +2,12 @@ import { logOut} from '../apiServer'; import { currentUser } from '../store'; + let user; + + currentUser.subscribe((value) => { + user = value; + }); + async function handleLogout(event) { event.preventDefault(); const response = await logOut(); @@ -12,7 +18,11 @@ </script> <form on:submit={handleLogout}> - <button type="submit">log out</button> + @{user.username} + <button + class="border-slate-500 border-solid border-2 font-bold p-1 rounded" + type="submit" + >log out</button> </form> <style> diff --git a/hi-ui/src/routes/+layout.svelte b/hi-ui/src/routes/+layout.svelte index e3c6561..3673e58 100644 --- a/hi-ui/src/routes/+layout.svelte +++ b/hi-ui/src/routes/+layout.svelte @@ -2,6 +2,15 @@ import "../app.css"; </script> -<div class="container mx-auto"> +<div id="app"> <slot /> </div> + +<style> + #app { + margin: 0; + padding: 1rem; + height: 100vh; + width: 100%; + } +</style> diff --git a/hi-ui/src/routes/+page.svelte b/hi-ui/src/routes/+page.svelte index 4ef26db..6025b6f 100644 --- a/hi-ui/src/routes/+page.svelte +++ b/hi-ui/src/routes/+page.svelte @@ -46,17 +46,35 @@ {#if loading} <h2>Loading…</h2> {:else if user != null} - <LogOut /> @{user.username} - <div class="flex flex-row"> - <div class="basis-1/4 border-solid border-2 border-sky-500"> + <LogOut /> + <div id="interface"> + <div> <ChannelList /> - <CreateChannelForm /> </div> - <div class="basis-3/4 border-solid border-2 border-sky-500"> + <div> <ActiveChannel /> + </div> + <div> + <CreateChannelForm /> + </div> + <div> <MessageInput /> </div> </div> {:else} <LogIn /> {/if} + +<style> + #interface { + height: 90%; + margin: 1rem; + display: grid; + grid-template-columns: 18rem auto; + grid-template-rows: auto 2rem; + grid-gap: 0.25rem; + } + #interface div { + border: 1px solid grey; + } +</style> |