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

Compare commits

base: gorb:a111180b521fbc6a4e7b6a2beb7abd11a1c31c06
Branches Tags
gorb:main
gorb:profile-modal
gorb:invite-page
gorb:fix-canvas-images
gorb:staging
gorb:server-side-token
gorb:device-list
gorb:dev
gorb:tauri
gorb:multiline-message-box
gorb:ui-refactor
gorb:home-page
gorb:usable-msesage-box-derogatory
gorb:improve-theming
gorb:back-button
..
compare: gorb:5cdeb36200af16d1c7c77b31e4a2328d02b9fe16
Branches Tags
gorb:main
gorb:profile-modal
gorb:invite-page
gorb:fix-canvas-images
gorb:staging
gorb:server-side-token
gorb:device-list
gorb:dev
gorb:tauri
gorb:multiline-message-box
gorb:ui-refactor
gorb:home-page
gorb:usable-msesage-box-derogatory
gorb:improve-theming
gorb:back-button

3 commits
a111180b52 ... 5cdeb36200

Author SHA1 Message Date
JustTemmie
5cdeb36200
refactor: more dv to em
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details
2025-07-09 00:46:59 +02:00
JustTemmie
9a2fe8fb37
refactor: change a lot of dynamic sizes to em and rem 
this makes the client feel a LOT snappier
 2025-07-09 00:43:23 +02:00
JustTemmie
730b0cb1dc
refactor: change the client from table to flexbox 
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
 2025-07-09 00:25:52 +02:00
6 changed files with 71 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/Button.vue
View file

@ -21,7 +21,7 @@ const props = defineProps<{
background-color: var(--primary-color); background-color: var(--primary-color);
color: var(--text-color); color: var(--text-color);
padding: 0.7dvh 1.2dvw; padding: 0.4em 0.75em;
font-size: 1.1em; font-size: 1.1em;
transition: background-color 0.2s; transition: background-color 0.2s;

6
components/Channel.vue
View file

@ -23,14 +23,14 @@ const isCurrentChannel = props.uuid == props.currentUuid;
.channel-list-link { .channel-list-link {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
padding-left: .5dvw; padding-left: .25em;
padding-right: .5dvw; padding-right: .25em;
} }
.channel-list-link-container { .channel-list-link-container {
text-align: left; text-align: left;
display: flex; display: flex;
height: 4dvh; height: 1.5em;
white-space: nowrap; white-space: nowrap;
align-items: center; align-items: center;
} }

6
components/Message.vue
View file

@ -188,12 +188,12 @@ function getDayDifference(date1: Date, date2: Date) {
<style module> <style module>
.message-text ul, h1, h2, h3, h4, h5, h6 { .message-text ul, h1, h2, h3, h4, h5, h6 {
padding-top: 1dvh; padding-top: .5em;
padding-bottom: 1dvh; padding-bottom: .5em;
margin: 0; margin: 0;
} }
.message-text ul { .message-text ul {
padding-left: 2dvw; padding-left: 1em;
} }
</style> </style>

1
components/MessageArea.vue
View file

@ -246,6 +246,7 @@ router.beforeEach((to, from, next) => {
padding-left: 1dvw; padding-left: 1dvw;
padding-right: 1dvw; padding-right: 1dvw;
overflow: hidden; overflow: hidden;
flex-grow: 1;
} }
#message-box { #message-box {

87
layouts/client.vue
View file

@ -6,6 +6,7 @@
main bar main bar
</div> </div>
</div> </div>
<div id = "page-content">
<div id="left-column"> <div id="left-column">
<NuxtLink id="home-button" href="/"> <NuxtLink id="home-button" href="/">
<img class="sidebar-icon" src="/public/icon.svg"/> <img class="sidebar-icon" src="/public/icon.svg"/>
@ -22,6 +23,7 @@
</div> </div>
<slot /> <slot />
</div> </div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -34,11 +36,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
<style> <style>
#client-root { #client-root {
/* border: 1px solid white; */
height: 100dvh; height: 100dvh;
display: grid; width: 100dvw;
grid-template-columns: 1fr 4fr 18fr 4fr; display: flex;
grid-template-rows: 4dvh auto; flex-direction: column;
text-align: center; text-align: center;
} }
@ -48,37 +49,54 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
.visible { .visible {
opacity: 100%; opacity: 100%;
transition-duration: 500ms; transition: opacity 500ms;
} }
#homebar { #homebar {
grid-row: 1; min-height: 4dvh;
grid-column: 1 / -1;
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
align-items: center; align-items: center;
background: var(--optional-topbar-background); background: var(--optional-topbar-background);
background-color: var(--topbar-background-color); background-color: var(--topbar-background-color);
border-bottom: 1px solid var(--padding-color);
padding-left: 5dvw; padding-left: 5dvw;
padding-right: 5dvw; padding-right: 5dvw;
} }
#client-root>div:nth-child(-n+4) { #page-content {
border-bottom: 1px solid var(--padding-color);
}
#__nuxt {
display: flex; display: flex;
flex-flow: column; flex-direction: row;
flex-grow: 1;
overflow: auto;
} }
.grid-column { #left-column {
padding-top: 1dvh; display: flex;
flex-direction: column;
gap: .75em;
padding-left: .25em;
padding-right: .25em;
border-right: 1px solid var(--padding-color);
background: var(--optional-sidebar-background);
background-color: var(--sidebar-background-color);
padding-top: .5em;
} }
#home { #servers-list {
padding-left: .5dvw; display: flex;
padding-right: .5dvw; flex-direction: column;
gap: 1em;
width: 3.2rem;
}
#middle-left-column {
padding-left: .25em;
padding-right: .25em;
border-right: 1px solid var(--padding-color);
min-width: 10em;
overflow-y: scroll;
overflow-x: hidden;
} }
.sidebar-icon { .sidebar-icon {
@ -86,43 +104,14 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
height: 3rem; height: 3rem;
} }
#current-info {
grid-column: 2;
grid-row: 1;
}
#left-column {
display: flex;
flex-direction: column;
gap: 2dvh;
padding-left: .5dvw;
padding-right: .5dvw;
border-right: 1px solid var(--padding-color);
background: var(--optional-sidebar-background);
background-color: var(--sidebar-background-color);
padding-top: 1.5dvh;
}
#middle-left-column {
padding-left: 1dvw;
padding-right: 1dvw;
border-right: 1px solid var(--padding-color);
}
#home-button { #home-button {
border-bottom: 1px solid var(--padding-color); border-bottom: 1px solid var(--padding-color);
padding-bottom: 1dvh; padding-bottom: .375em;
} }
#settings-menu { #settings-menu {
position: absolute; position: absolute;
bottom: .25dvh bottom: .25em
}
#servers-list {
display: flex;
flex-direction: column;
gap: 1dvh;
} }
</style> </style>

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

@ -27,6 +27,7 @@
<div id="members-container"> <div id="members-container">
<div id="members-list"> <div id="members-list">
<MemberEntry v-for="member of members" :member="member" tabindex="0"/> <MemberEntry v-for="member of members" :member="member" tabindex="0"/>
<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
</div> </div>
</div> </div>
</NuxtLayout> </NuxtLayout>
@ -83,36 +84,35 @@ function handleMemberClick(member: GuildMemberResponse) {
<style> <style>
#middle-left-column { #middle-left-column {
padding-left: 1dvw; padding-left: .5em;
padding-right: 1dvw; padding-right: .5em;
border-right: 1px solid var(--padding-color); border-right: 1px solid var(--padding-color);
background: var(--optional-channel-list-background); background: var(--optional-channel-list-background);
background-color: var(--sidebar-background-color); background-color: var(--sidebar-background-color);
} }
#members-container { #members-container {
padding-top: 1dvh; width: 12rem;
padding-left: 1dvw;
padding-right: 1dvw;
border-left: 1px solid var(--padding-color); border-left: 1px solid var(--padding-color);
} }
#members-list { #members-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
max-height: 92dvh; padding-left: 1.25em;
padding-left: 1dvw; padding-right: 1.25em;
padding-right: 1dvw; padding-top: 0.75em;
margin-top: 1dvh; padding-bottom: 0.75em;
max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
} }
.member-item { .member-item {
display: grid; display: flex;
grid-template-columns: 2dvw 1fr;
margin-top: .5em; margin-top: .5em;
margin-bottom: .5em; margin-bottom: .5em;
gap: 1em; gap: .5em;
align-items: center; align-items: center;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
@ -121,7 +121,7 @@ function handleMemberClick(member: GuildMemberResponse) {
#channels-list { #channels-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1dvh; gap: .5em;
} }
.member-avatar { .member-avatar {