JustTemmie
730b0cb1dc
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
41 lines
No EOL
985 B
Vue
41 lines
No EOL
985 B
Vue
<template>
|
|
<div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
|
|
<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
|
|
# {{ props.name }}
|
|
</NuxtLink>
|
|
</div>
|
|
<div v-else class="channel-list-link-container rounded-corners" tabindex="0">
|
|
<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
|
|
# {{ props.name }}
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
|
|
const props = defineProps<{ name: string, uuid: string, currentUuid: string, href: string }>();
|
|
|
|
const isCurrentChannel = props.uuid == props.currentUuid;
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.channel-list-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding-left: .5dvw;
|
|
padding-right: .5dvw;
|
|
}
|
|
|
|
.channel-list-link-container {
|
|
text-align: left;
|
|
display: flex;
|
|
height: 1.5em;
|
|
white-space: nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.current-channel {
|
|
background-color: var(--sidebar-highlighted-background-color);
|
|
}
|
|
</style> |