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> <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"> <NuxtLink class="channel-list-link" :href="props.href">
# {{ name }} # {{ props.name }}
</NuxtLink> </NuxtLink>
</div> </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"> <NuxtLink class="channel-list-link" :href="props.href">
# {{ name }} # {{ props.name }}
</NuxtLink> </NuxtLink>
</div> </div>
</template> </template>
<script lang="ts" setup> <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> </script>
@ -30,6 +32,7 @@ const props = defineProps<{ name: string, href: string, current?: boolean }>();
display: flex; display: flex;
height: 4dvh; height: 4dvh;
white-space: nowrap; white-space: nowrap;
align-items: center;
} }
.current-channel { .current-channel {

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

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