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

feat: refactor left column in UI, add join guild icon

Browse source
This commit is contained in:
SauceyRed 2025-06-07 06:28:07 +02:00
parent 64c6276153
commit b82d5733a1
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
1 changed files with 48 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

46
layouts/client.vue
View file

@ -7,6 +7,7 @@
</div> </div>
</div> </div>
<div id="left-column"> <div id="left-column">
<div id="left-column-top">
<NuxtLink id="home-button" href="/"> <NuxtLink id="home-button" href="/">
<Icon name="lucide:house" class="white" size="2rem" /> <Icon name="lucide:house" class="white" size="2rem" />
</NuxtLink> </NuxtLink>
@ -16,6 +17,12 @@
</NuxtLink> </NuxtLink>
</div> </div>
</div> </div>
<div id="left-column-bottom">
<button id="join-server-button">
<Icon id="join-server-icon" name="lucide:square-plus" />
</button>
</div>
</div>
<slot /> <slot />
</div> </div>
</template> </template>
@ -26,6 +33,9 @@ import type { GuildResponse } from '~/types/interfaces';
const loading = useState("loading", () => false); const loading = useState("loading", () => false);
const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
for (let i = 0; i < 20; i++) {
guilds?.push(guilds[0]);
}
//const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[]; //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
//console.log("servers:", servers); //console.log("servers:", servers);
@ -124,13 +134,24 @@ const members = [
} }
#left-column { #left-column {
display: grid;
grid-template-rows: 1fr auto;
overflow-y: hidden;
border-right: 1px solid rgb(70, 70, 70);
padding-top: 1dvh;
padding-bottom: 1dvh;
}
#left-column-top {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2dvh; gap: 1.5dvh;
padding-left: .5dvw; overflow-y: scroll;
padding-right: .5dvw; }
border-right: 1px solid rgb(70, 70, 70);
padding-top: 1.5dvh; #left-column-bottom {
padding-top: 1dvh;
border-top: 1px solid rgb(70, 70, 70);
} }
#middle-left-column { #middle-left-column {
@ -148,6 +169,21 @@ const members = [
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1dvh; gap: 1dvh;
overflow-y: scroll;
}
#join-server-button {
color: white;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 2rem;
padding: 0;
display: inline-block;
}
#join-server-icon {
float: left;
} }
</style> </style>