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

feat: improve channel list appearance

Browse source
This commit is contained in:
SauceyRed 2025-05-29 22:16:42 +02:00
parent be528649e1
commit 6a3c8e8982
Signed by: sauceyred
GPG key ID: 270B096EF6E9A462
2 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

13
components/Channel.vue
View file

@ -1,19 +1,21 @@
<template>
<div v-if="current" class="channel-list-link-container">
<div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
<NuxtLink class="channel-list-link" :href="props.href">
# {{ name }}
# {{ props.name }}
</NuxtLink>
</div>
<div v-else class="channel-list-link-container current-channel">
<div v-else class="channel-list-link-container rounded-corners">
<NuxtLink class="channel-list-link" :href="props.href">
# {{ name }}
# {{ props.name }}
</NuxtLink>
</div>
</template>
<script lang="ts" setup>
const props = defineProps<{ name: string, href: string, current?: boolean }>();
const props = defineProps<{ name: string, uuid: string, currentUuid: string, href: string }>();
const isCurrentChannel = props.uuid == props.currentUuid;
</script>
@ -30,6 +32,7 @@ const props = defineProps<{ name: string, href: string, current?: boolean }>();
display: flex;
height: 4dvh;
white-space: nowrap;
align-items: center;
}
.current-channel {

15
pages/servers/[serverId]/channels/[channelId].vue
View file

@ -18,9 +18,8 @@
</h3>
</div>
<div id="channels-list">
<Channel v-for="channel of channels" v-if="route.params.channelId == channel?.uuid" :name="channel.name"
:href="route.path" :current="true" />
<Channel v-for="channel of channels" v-else :name="channel.name"
<Channel v-for="channel of channels" :name="channel.name"
:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
</div>
</div>
@ -102,19 +101,19 @@ const members = [
];
onMounted(async () => {
loading.value = true;
console.log("channelid: set loading to true");
server.value = await fetchWithApi(`servers/${route.params.serverId}`);
channels.value = await fetchWithApi(
`servers/${route.params.serverId}/channels`
);
console.log("channels:", channels.value);
channel.value = await fetchWithApi(
route.path
);
console.log("channel:", channel.value);
console.log("channelid: channel:", channel);
loading.value = false;
console.log("channelid: set loading to false");
});
@ -151,4 +150,10 @@ function toggleInvitePopup(e: Event) {
border-left: 1px solid rgb(70, 70, 70);
}
#channels-list {
display: flex;
flex-direction: column;
gap: 1dvh;
}
</style>