From df741ee5d4df36bb88f320898ef2393dfa66fc4c Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Mon, 14 Jul 2025 19:24:59 +0200 Subject: [PATCH] fix: sidebar scrolling, and such --- layouts/client.vue | 117 +++++++++++---------------- public/themes/ash.css | 5 ++ public/themes/dark.css | 5 ++ public/themes/description.css | 5 ++ public/themes/light.css | 5 ++ public/themes/rainbow-capitalism.css | 5 ++ 6 files changed, 71 insertions(+), 71 deletions(-) diff --git a/layouts/client.vue b/layouts/client.vue index 8aeaf9c..e5d7907 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -8,27 +8,37 @@ -
+
-
+
-
- - - - -
-
+ +
+ + + + + + + + + + + + +
+ +
-
- - + +
@@ -42,6 +52,7 @@ import { ModalBase } from '#components'; import { render } from 'vue'; import GuildDropdown from '~/components/Guild/GuildDropdown.vue'; import Button from '~/components/UserInterface/Button.vue'; +import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue'; import type { GuildResponse } from '~/types/interfaces'; const loading = useState("loading", () => false); @@ -243,68 +254,29 @@ function createDropdown() { #left-column { display: flex; flex-direction: column; - justify-content: space-between; - align-items: center; - gap: .75em; + padding-left: .25em; padding-right: .25em; padding-top: .5em; - border-right: 1px solid var(--padding-color); + background: var(--optional-sidebar-background); background-color: var(--sidebar-background-color); } -#left-column-top, #left-column-bottom { +.left-column-segment { display: flex; flex-direction: column; - justify-content: center; - align-items: center; - gap: 1.5dvh; - overflow-y: scroll; + scrollbar-width: none; - -ms-overflow-style: none; } -#left-column-top::-webkit-scrollbar, #left-column-bottom::-webkit-scrollbar { +.left-column-segment::-webkit-scrollbar { display: none; } -#left-column-bottom { - padding-top: 1dvh; - border-top: 1px solid var(--padding-color); -} - -#middle-left-column { - padding-left: 1dvw; - padding-right: 1dvw; - border-right: 1px solid var(--padding-color); -} - -#home-button { - border-bottom: 1px solid var(--padding-color); - padding-bottom: 1dvh; -} - -#servers-list { - display: flex; - flex-direction: column; - gap: 1em; - width: 3.2rem; - padding-top: .5em; -} - -#create-button { - color: var(--primary-color); - background-color: transparent; - border: none; - cursor: pointer; - font-size: 2rem; - padding: 0; - display: inline-block; -} - -#create-icon { - float: left; +#left-column-middle { + overflow-y: scroll; + flex-grow: 1; } #middle-left-column { @@ -317,24 +289,27 @@ function createDropdown() { overflow-x: hidden; } +#home-button { + height: 3em; +} + .sidebar-icon { width: 3rem; height: 3rem; - overflow-y: scroll; - overflow-x: hidden; } -#home-button { - border-bottom: 1px solid var(--padding-color); - padding-bottom: .375em; +.sidebar-bottom-buttons { + color: var(--primary-color); + background-color: transparent; + border: none; + cursor: pointer; + font-size: 2.4rem; + padding: 0; + display: inline-block; } -#settings-menu { - color: var(--primary-color) -} - -#settings-menu:hover { - color: var(--primary-highlighted-color) +.sidebar-bottom-buttons:hover { + color: var(--primary-highlighted-color); } diff --git a/public/themes/ash.css b/public/themes/ash.css index 63aaa53..3f27868 100644 --- a/public/themes/ash.css +++ b/public/themes/ash.css @@ -11,6 +11,11 @@ --chatbox-background-color: #3a3733; --padding-color: #e0e0e0; + + --sidebar-width: 3em; + --standard-radius: .5em; + --button-radius: .6em; + --pfp-radius: 100%; --primary-color: #f07028; --primary-highlighted-color: #f28f4b; diff --git a/public/themes/dark.css b/public/themes/dark.css index 3673d4c..d03f07f 100644 --- a/public/themes/dark.css +++ b/public/themes/dark.css @@ -18,4 +18,9 @@ --secondary-highlighted-color: #8f5b2c; --accent-color: #b35719; --accent-highlighted-color: #c76a2e; + + --sidebar-width: 3em; + --standard-radius: .5em; + --button-radius: .6em; + --pfp-radius: 100%; } \ No newline at end of file diff --git a/public/themes/description.css b/public/themes/description.css index 209fb36..91f6e7f 100644 --- a/public/themes/description.css +++ b/public/themes/description.css @@ -20,6 +20,11 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; + --sidebar-width: 3em; + --standard-radius: .5em; + --button-radius: .6em; + --pfp-radius: 100%; + --optional-body-background: ; /* background element for the body */ --optional-chat-background: ; /* background element for the chat box */ --optional-topbar-background: ; /* background element for the topbar */ diff --git a/public/themes/light.css b/public/themes/light.css index fdd4756..44e5318 100644 --- a/public/themes/light.css +++ b/public/themes/light.css @@ -11,6 +11,11 @@ --chatbox-background-color: #dfdbd6; --padding-color: #484848; + + --sidebar-width: 3em; + --standard-radius: .5em; + --button-radius: .6em; + --pfp-radius: 100%; --primary-color: #df5f0b; --primary-highlighted-color: #ef6812; diff --git a/public/themes/rainbow-capitalism.css b/public/themes/rainbow-capitalism.css index 0e146d9..0fe2287 100644 --- a/public/themes/rainbow-capitalism.css +++ b/public/themes/rainbow-capitalism.css @@ -19,6 +19,11 @@ --accent-color: #ff218c80; --accent-highlighted-color: #df1b6f80; + --sidebar-width: 3em; + --standard-radius: .5em; + --button-radius: .6em; + --pfp-radius: 100%; + /* --optional-body-background: background */ --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80); --optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);