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

feat: update appearance of members list
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
SauceyRed 2025-06-01 17:35:36 +02:00
parent 532aba5c21
commit e8d37af75e
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 29 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -24,11 +24,13 @@
</div> </div>
</div> </div>
<MessageArea :channel-url="channelUrlPath" /> <MessageArea :channel-url="channelUrlPath" />
<div id="members-list"> <div id="members-container">
<div class="member-item" v-for="member of members"> <div id="members-list">
<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" /> <div class="member-item" v-for="member of members">
<Icon v-else class="member-avatar" name="lucide:user" /> <img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span> <Icon v-else class="member-avatar" name="lucide:user" />
<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
</div>
</div> </div>
</div> </div>
</NuxtLayout> </NuxtLayout>
@ -79,14 +81,6 @@ function toggleInvitePopup(e: Event) {
</script> </script>
<style> <style>
.member-item {
display: flex;
justify-content: center;
align-items: center;
margin-top: .5em;
margin-bottom: .5em;
gap: .5em;
}
#middle-left-column { #middle-left-column {
padding-left: 1dvw; padding-left: 1dvw;
@ -94,13 +88,29 @@ function toggleInvitePopup(e: Event) {
border-right: 1px solid rgb(70, 70, 70); border-right: 1px solid rgb(70, 70, 70);
} }
#members-list { #members-container {
padding-top: 3dvh; padding-top: 3dvh;
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
border-left: 1px solid rgb(70, 70, 70); border-left: 1px solid rgb(70, 70, 70);
} }
#members-list {
display: grid;
grid-template-columns: auto;
}
.member-item {
display: grid;
grid-template-columns: 2dvw auto;
margin-top: .5em;
margin-bottom: .5em;
gap: 1em;
align-items: center;
text-align: left;
}
#channels-list { #channels-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -113,4 +123,9 @@ function toggleInvitePopup(e: Event) {
border-radius: 50%; border-radius: 50%;
} }
.member-display-name {
overflow: hidden;
text-overflow: ellipsis;
}
</style> </style>