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

Compare commits

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

No commits in common. "e8d37af75e25cefeec153b946014125e07ce649e" and "626c1c8453703d06647783dd2658067359b98934" have entirely different histories.
e8d37af75e ... 626c1c8453

2 changed files with 42 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

24
layouts/client.vue
View file

@ -123,6 +123,30 @@ 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,13 +24,11 @@
</div>
</div>
<MessageArea :channel-url="channelUrlPath" />
<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 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>
</NuxtLayout>
@ -81,6 +79,18 @@ 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;
@ -88,29 +98,12 @@ function toggleInvitePopup(e: Event) {
border-right: 1px solid rgb(70, 70, 70);
}
#members-container {
padding-top: 3dvh;
#members-list {
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;
@ -123,9 +116,4 @@ function toggleInvitePopup(e: Event) {
border-radius: 50%;
}
.member-display-name {
overflow: hidden;
text-overflow: ellipsis;
}
</style>