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

refactor: change the client from table to flexbox

Browse source 
this makes the server, channel, and member list a constant size, making the text messages take up the entire remaining width
this also fixes the text wrapping you have already fixed on one of your branches

this change is required if we want to make the member list toggelable, or channel list resizable
This commit is contained in:
Twig 2025-07-09 00:25:52 +02:00
parent a111180b52
commit 730b0cb1dc
No known key found for this signature in database
3 changed files with 46 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

89
layouts/client.vue
View file

@ -6,21 +6,23 @@
main bar
</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 +36,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,47 +49,26 @@ 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);
}
#__nuxt {
#page-content {
display: flex;
flex-flow: column;
}
.grid-column {
padding-top: 1dvh;
}
#home {
padding-left: .5dvw;
padding-right: .5dvw;
}
.sidebar-icon {
width: 3rem;
height: 3rem;
}
#current-info {
grid-column: 2;
grid-row: 1;
flex-direction: row;
flex-grow: 1;
overflow: auto;
}
#left-column {
@ -103,10 +83,25 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
padding-top: 1.5dvh;
}
#servers-list {
display: flex;
flex-direction: column;
gap: 1dvh;
width: 3.2rem;
}
#middle-left-column {
padding-left: 1dvw;
padding-right: 1dvw;
border-right: 1px solid var(--padding-color);
min-width: 10rem;
overflow-y: scroll;
overflow-x: hidden;
}
.sidebar-icon {
width: 3rem;
height: 3rem;
}
#home-button {
@ -119,10 +114,4 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
bottom: .25dvh
}
#servers-list {
display: flex;
flex-direction: column;
gap: 1dvh;
}
</style>