frontend: add username to top bar and improve paddings
This commit is contained in:
parent
3668b45a30
commit
2574e7e0e6
5 changed files with 57 additions and 25 deletions
|
@ -63,6 +63,20 @@ body {
|
||||||
background-color: var(--background-color-1);
|
background-color: var(--background-color-1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* shared styles for all components */
|
||||||
|
|
||||||
|
.top-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 3.4em;
|
||||||
|
width: 100%;
|
||||||
|
padding: var(--space-sm);
|
||||||
|
border-bottom: 1px solid var(--background-color-2);
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.h1 {
|
.h1 {
|
||||||
font-size: 2.488rem;
|
font-size: 2.488rem;
|
||||||
}
|
}
|
||||||
|
@ -87,6 +101,8 @@ body {
|
||||||
font-size: 0.833rem;
|
font-size: 0.833rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* change box model */
|
||||||
|
|
||||||
*,
|
*,
|
||||||
::before,
|
::before,
|
||||||
::after {
|
::after {
|
||||||
|
|
|
@ -5,16 +5,6 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.top-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
height: 3.4em;
|
|
||||||
width: 100%;
|
|
||||||
padding: var(--space-xs);
|
|
||||||
border-bottom: 1px solid var(--background-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-heading {
|
.channel-heading {
|
||||||
margin-left: var(--space-xxs);
|
margin-left: var(--space-xxs);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
import { HashIcon } from "svelte-feather-icons";
|
import { HashIcon } from "svelte-feather-icons";
|
||||||
import { channels, selectedChannel } from "../../../stores";
|
import { channels, selectedChannel } from "../../../stores";
|
||||||
|
import UserTopBar from "./UserTopBar.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="sidebar">
|
<div class="sidebar-container">
|
||||||
|
<UserTopBar />
|
||||||
|
<div class="sidebar">
|
||||||
{#each $channels as channel (channel.id)}
|
{#each $channels as channel (channel.id)}
|
||||||
<button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
|
<button on:click="{ () => $selectedChannel = channel }" class="sidebar-button" class:selected={ channel.id === $selectedChannel.id }>
|
||||||
<div>
|
<div>
|
||||||
|
@ -12,16 +15,22 @@
|
||||||
<span>{ channel.name }</span>
|
<span>{ channel.name }</span>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.sidebar {
|
.sidebar-container {
|
||||||
|
background-color: var(--background-color-1);
|
||||||
|
border-right: 1px solid var(--background-color-2);
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 255px;
|
width: 255px;
|
||||||
max-width: 255px;
|
max-width: 255px;
|
||||||
padding: var(--space-sm);
|
}
|
||||||
background-color: var(--background-color-1);
|
|
||||||
border-right: 1px solid var(--background-color-2);
|
.sidebar {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: var(--space-xs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button {
|
.sidebar-button {
|
||||||
|
@ -30,13 +39,13 @@
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--background-color-1);
|
background-color: var(--background-color-1);
|
||||||
padding: var(--space-sm);
|
padding: var(--space-xs);
|
||||||
margin-bottom: var(--space-xxs);
|
margin-bottom: var(--space-xxs);
|
||||||
color: currentColor;
|
color: currentColor;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 3.4em;
|
max-height: 3.4em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
15
frontend/src/components/pages/main/UserTopBar.svelte
Normal file
15
frontend/src/components/pages/main/UserTopBar.svelte
Normal file
|
@ -0,0 +1,15 @@
|
||||||
|
<script>
|
||||||
|
import { AtSignIcon } from "svelte-feather-icons";
|
||||||
|
import { userInfoStore } from "../../../stores";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.user-heading {
|
||||||
|
margin-left: var(--space-xxs);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="top-bar">
|
||||||
|
<AtSignIcon />
|
||||||
|
<span class="h5 user-heading">{ $userInfoStore.username }</span>
|
||||||
|
</div>
|
|
@ -13,12 +13,14 @@ class Store {
|
||||||
const newLength = this._handlers.push(handler);
|
const newLength = this._handlers.push(handler);
|
||||||
const handlerIndex = newLength - 1;
|
const handlerIndex = newLength - 1;
|
||||||
handler(this.value);
|
handler(this.value);
|
||||||
|
console.log(this.value);
|
||||||
return () => {
|
return () => {
|
||||||
this._handlers.splice(handlerIndex, 1);
|
this._handlers.splice(handlerIndex, 1);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
updated() {
|
updated() {
|
||||||
|
console.log(this.value);
|
||||||
this._handlers.forEach(e => {
|
this._handlers.forEach(e => {
|
||||||
e(this.value);
|
e(this.value);
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue