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

Compare commits

base: gorb:626c1c8453703d06647783dd2658067359b98934
Branches Tags
gorb:main
gorb:settings-page
gorb:info-components
gorb:guild-joining
gorb:guild-settings
gorb:dev
..
compare: gorb:e8d37af75e25cefeec153b946014125e07ce649e
Branches Tags
gorb:main
gorb:settings-page
gorb:info-components
gorb:guild-joining
gorb:guild-settings
gorb:dev

3 commits
626c1c8453 ... e8d37af75e

Author SHA1 Message Date
SauceyRed
e8d37af75e
feat: update appearance of members list
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
2025-06-01 17:35:36 +02:00
SauceyRed
532aba5c21
feat: merge two #member-list blocks 2025-06-01 17:03:19 +02:00
SauceyRed
f6523ae97f
feat: remove unnecessary styles from client layout 2025-06-01 17:02:58 +02:00
2 changed files with 30 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

24
layouts/client.vue
View file

@ -123,30 +123,6 @@ const members = [
grid-row: 1;
}
#test {
grid-column: 3;
grid-row: 1;
}
.member-item {
display: flex;
justify-content: center;
align-items: center;
}
#message-history,
#members-list {
padding-top: 3dvh;
}
#message-history {
display: flex;
flex-direction: column;
justify-content: space-between;
padding-left: 3dvw;
padding-right: 3dvw;
}
#left-column {
display: flex;
flex-direction: column;

48
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,18 +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;
}
#members-list {
padding-top: 3dvh;
}
#middle-left-column {
padding-left: 1dvw;
@ -98,12 +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;
@ -116,4 +123,9 @@ function toggleInvitePopup(e: Event) {
border-radius: 50%;
}
.member-display-name {
overflow: hidden;
text-overflow: ellipsis;
}
</style>