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