hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add slight rounding to main ui shell

Browse source
This commit is contained in:
hippoz 2023-06-25 18:10:17 +03:00
parent 9bdeb6e5c2
commit 9d1a885d87
Signed by: hippoz
GPG key ID: 56C4E02A85F2FBED
4 changed files with 19 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/ChannelView.svelte
View file

@ -4,7 +4,7 @@
import Messages from "./Messages.svelte"; import Messages from "./Messages.svelte";
import { quadInOut } from "svelte/easing"; import { quadInOut } from "svelte/easing";
import { maybeFly } from "../animations"; import { maybeFly } from "../animations";
import { statusBarStore } from "../stores"; import { showSidebar, statusBarStore } from "../stores";
export let channel; export let channel;
</script> </script>
@ -21,7 +21,7 @@
} }
</style> </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} {#if $statusBarStore}
<div class="info-bar"> <div class="info-bar">
<span class="info-text">{ $statusBarStore }</span> <span class="info-text">{ $statusBarStore }</span>

8
frontend/src/components/PresenceSidebar.svelte
View file

@ -19,14 +19,14 @@
font-size: var(--h6); font-size: var(--h6);
} }
.presence-sidebar { .presence-sidebar-limited {
min-width: 248px; min-width: 248px;
max-width: 248px; max-width: 248px;
} }
</style> </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-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"> <div class="sidebar sidebar-full">
<span class="online-label">ONLINE</span> <span class="online-label">ONLINE</span>
<div class="sidebar-buttons"> <div class="sidebar-buttons">
@ -34,7 +34,7 @@
<button class="sidebar-button"> <button class="sidebar-button">
<UserView size={28} user={entry.user}></UserView> <UserView size={28} user={entry.user}></UserView>
{#if entry.bridgesTo || entry.privacy || entry.terms} {#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} {/if}
</button> </button>
{/each} {/each}

2
frontend/src/components/Sidebar.svelte
View file

@ -87,7 +87,7 @@
<span class="material-icons-outlined">settings</span> <span class="material-icons-outlined">settings</span>
</button> </button>
</div> </div>
<div class="sidebar"> <div class="sidebar round-left">
<div class="top-bar text-small text-bold"> <div class="top-bar text-small text-bold">
{#if $selectedCommunity.id !== -1} {#if $selectedCommunity.id !== -1}
{$selectedCommunity.name || ""} {$selectedCommunity.name || ""}

12
frontend/src/styles/global.css
View file

@ -463,6 +463,10 @@ body {
background-color: var(--background-color-1); background-color: var(--background-color-1);
} }
.sidebar-full {
width: 100%;
}
.sidebar-buttons { .sidebar-buttons {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -552,6 +556,14 @@ body {
cursor: pointer; 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 */ /*! the tweaks below are heavily based on modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
*, *,