gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: make sidebar size adjustable by theme
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-14 19:36:16 +02:00
parent df741ee5d4
commit 06de4777f9
No known key found for this signature in database
6 changed files with 8 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

14
layouts/client.vue
View file

@ -21,14 +21,6 @@
<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/> <NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" /> <Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
</NuxtLink> </NuxtLink>
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
</NuxtLink>
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<NuxtImg v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
</NuxtLink>
</div> </div>
<VerticalSpacer /> <VerticalSpacer />
<div class="left-column-segment"> <div class="left-column-segment">
@ -290,12 +282,12 @@ function createDropdown() {
} }
#home-button { #home-button {
height: 3em; height: var(--sidebar-width);
} }
.sidebar-icon { .sidebar-icon {
width: 3rem; width: var(--sidebar-width);
height: 3rem; height: var(--sidebar-width);
} }
.sidebar-bottom-buttons { .sidebar-bottom-buttons {

2
public/themes/ash.css
View file

@ -12,7 +12,7 @@
--padding-color: #e0e0e0; --padding-color: #e0e0e0;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/dark.css
View file

@ -19,7 +19,7 @@
--accent-color: #b35719; --accent-color: #b35719;
--accent-highlighted-color: #c76a2e; --accent-highlighted-color: #c76a2e;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/description.css
View file

@ -20,7 +20,7 @@
--accent-color: #ff218c80; --accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80; --accent-highlighted-color: #df1b6f80;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/light.css
View file

@ -12,7 +12,7 @@
--padding-color: #484848; --padding-color: #484848;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;

2
public/themes/rainbow-capitalism.css
View file

@ -19,7 +19,7 @@
--accent-color: #ff218c80; --accent-color: #ff218c80;
--accent-highlighted-color: #df1b6f80; --accent-highlighted-color: #df1b6f80;
--sidebar-width: 3em; --sidebar-width: 2.5em;
--standard-radius: .5em; --standard-radius: .5em;
--button-radius: .6em; --button-radius: .6em;
--pfp-radius: 100%; --pfp-radius: 100%;