add slight rounding to main ui shell
This commit is contained in:
parent
9bdeb6e5c2
commit
9d1a885d87
4 changed files with 19 additions and 7 deletions
|
@ -4,7 +4,7 @@
|
|||
import Messages from "./Messages.svelte";
|
||||
import { quadInOut } from "svelte/easing";
|
||||
import { maybeFly } from "../animations";
|
||||
import { statusBarStore } from "../stores";
|
||||
import { showSidebar, statusBarStore } from "../stores";
|
||||
|
||||
export let channel;
|
||||
</script>
|
||||
|
@ -21,7 +21,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
|
||||
<div class="main-container" class:round-left="{ $showSidebar }" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
|
||||
{#if $statusBarStore}
|
||||
<div class="info-bar">
|
||||
<span class="info-text">{ $statusBarStore }</span>
|
||||
|
|
|
@ -19,14 +19,14 @@
|
|||
font-size: var(--h6);
|
||||
}
|
||||
|
||||
.presence-sidebar {
|
||||
.presence-sidebar-limited {
|
||||
min-width: 248px;
|
||||
max-width: 248px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="sidebar-container presence-sidebar" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-container" class:presence-sidebar-limited="{ !$smallViewport }" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
|
||||
<div class="sidebar sidebar-full">
|
||||
<span class="online-label">ONLINE</span>
|
||||
|
||||
<div class="sidebar-buttons">
|
||||
|
@ -34,7 +34,7 @@
|
|||
<button class="sidebar-button">
|
||||
<UserView size={28} user={entry.user}></UserView>
|
||||
{#if entry.bridgesTo || entry.privacy || entry.terms}
|
||||
<span class="user-badge" on:click={ () => overlayStore.push(OverlayType.UserInfo, { presenceEntry: entry }) }>SERVICE</span>
|
||||
<button class="user-badge" on:click={ () => overlayStore.push(OverlayType.UserInfo, { presenceEntry: entry }) }>SERVICE</button>
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
|
|
|
@ -87,7 +87,7 @@
|
|||
<span class="material-icons-outlined">settings</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
<div class="sidebar round-left">
|
||||
<div class="top-bar text-small text-bold">
|
||||
{#if $selectedCommunity.id !== -1}
|
||||
{$selectedCommunity.name || ""}
|
||||
|
|
|
@ -463,6 +463,10 @@ body {
|
|||
background-color: var(--background-color-1);
|
||||
}
|
||||
|
||||
.sidebar-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-buttons {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
@ -552,6 +556,14 @@ body {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* util */
|
||||
|
||||
.round-left {
|
||||
border-top-left-radius: var(--radius-mdplus);
|
||||
border-bottom-left-radius: var(--radius-mdplus);
|
||||
}
|
||||
|
||||
|
||||
/*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
*,
|
||||
|
|
Loading…
Reference in a new issue