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

undo the last 6 merges i fucked up
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-07-10 16:10:55 +02:00
parent 0afb269788
commit 323178af6b
No known key found for this signature in database
14 changed files with 251 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

116
layouts/client.vue
View file

@ -3,24 +3,28 @@
<div :class="{ hidden: loading, visible: !loading }" id="client-root">
<div id="homebar">
<div class="homebar-item">
main bar
<marquee>
gorb!!!!!
</marquee>
</div>
</div>
<div id="left-column">
<NuxtLink id="home-button" href="/">
<img class="sidebar-icon" src="/public/icon.svg"/>
</NuxtLink>
<div id="servers-list">
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<img 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" />
<div id = "page-content">
<div id="left-column">
<NuxtLink id="home-button" href="/">
<img class="sidebar-icon" src="/public/icon.svg"/>
</NuxtLink>
<div id="servers-list">
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<img 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>
<NuxtLink id="settings-menu" href="/settings">
<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
</NuxtLink>
</div>
<NuxtLink id="settings-menu" href="/settings">
<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
</NuxtLink>
<slot />
</div>
<slot />
</div>
</template>
@ -34,11 +38,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
<style>
#client-root {
/* border: 1px solid white; */
height: 100dvh;
display: grid;
grid-template-columns: 1fr 4fr 18fr 4fr;
grid-template-rows: 4dvh auto;
width: 100dvw;
display: flex;
flex-direction: column;
text-align: center;
}
@ -48,37 +51,59 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
.visible {
opacity: 100%;
transition-duration: 500ms;
transition: opacity 500ms;
}
#homebar {
grid-row: 1;
grid-column: 1 / -1;
min-height: 4dvh;
display: flex;
justify-content: space-evenly;
align-items: center;
background: var(--optional-topbar-background);
background-color: var(--topbar-background-color);
border-bottom: 1px solid var(--padding-color);
padding-left: 5dvw;
padding-right: 5dvw;
}
#client-root>div:nth-child(-n+4) {
border-bottom: 1px solid var(--padding-color);
.homebar-item {
width: 100dvw;
}
#__nuxt {
#page-content {
display: flex;
flex-flow: column;
flex-direction: row;
flex-grow: 1;
overflow: auto;
}
.grid-column {
padding-top: 1dvh;
#left-column {
display: flex;
flex-direction: column;
gap: .75em;
padding-left: .25em;
padding-right: .25em;
border-right: 1px solid var(--padding-color);
background: var(--optional-sidebar-background);
background-color: var(--sidebar-background-color);
padding-top: .5em;
}
#home {
padding-left: .5dvw;
padding-right: .5dvw;
#servers-list {
display: flex;
flex-direction: column;
gap: 1em;
width: 3.2rem;
}
#middle-left-column {
padding-left: .25em;
padding-right: .25em;
border-right: 1px solid var(--padding-color);
min-width: 10em;
overflow-y: scroll;
overflow-x: hidden;
}
.sidebar-icon {
@ -86,43 +111,14 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
height: 3rem;
}
#current-info {
grid-column: 2;
grid-row: 1;
}
#left-column {
display: flex;
flex-direction: column;
gap: 2dvh;
padding-left: .5dvw;
padding-right: .5dvw;
border-right: 1px solid var(--padding-color);
background: var(--optional-sidebar-background);
background-color: var(--sidebar-background-color);
padding-top: 1.5dvh;
}
#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;
padding-bottom: .375em;
}
#settings-menu {
position: absolute;
bottom: .25dvh
}
#servers-list {
display: flex;
flex-direction: column;
gap: 1dvh;
bottom: .25em
}
</style>