From 730b0cb1dcece7264d81e07902e1576e7d92b1cb Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Wed, 9 Jul 2025 00:25:52 +0200 Subject: [PATCH 1/4] 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 --- components/Channel.vue | 2 +- layouts/client.vue | 89 ++++++++----------- .../[serverId]/channels/[channelId].vue | 13 ++- 3 files changed, 46 insertions(+), 58 deletions(-) diff --git a/components/Channel.vue b/components/Channel.vue index 0f48323..6bdc28b 100644 --- a/components/Channel.vue +++ b/components/Channel.vue @@ -30,7 +30,7 @@ const isCurrentChannel = props.uuid == props.currentUuid; .channel-list-link-container { text-align: left; display: flex; - height: 4dvh; + height: 1.5em; white-space: nowrap; align-items: center; } diff --git a/layouts/client.vue b/layouts/client.vue index a1ee86d..b98e304 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -6,21 +6,23 @@ main bar -
- - - -
- - - +
+
+ + + +
+ + + + +
+ +
- - - +
-
@@ -34,11 +36,10 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); \ No newline at end of file diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index 6bdcc7c..b5ee86a 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -91,9 +91,8 @@ function handleMemberClick(member: GuildMemberResponse) { } #members-container { - padding-top: 1dvh; - padding-left: 1dvw; - padding-right: 1dvw; + min-width: 12rem; + padding-top: 1em; border-left: 1px solid var(--padding-color); } @@ -102,14 +101,14 @@ function handleMemberClick(member: GuildMemberResponse) { flex-direction: column; overflow-y: scroll; max-height: 92dvh; - padding-left: 1dvw; - padding-right: 1dvw; + padding-left: 1.3em; + padding-right: 1.3em; margin-top: 1dvh; } .member-item { display: grid; - grid-template-columns: 2dvw 1fr; + grid-template-columns: 1.5em 1fr; margin-top: .5em; margin-bottom: .5em; gap: 1em; @@ -121,7 +120,7 @@ function handleMemberClick(member: GuildMemberResponse) { #channels-list { display: flex; flex-direction: column; - gap: 1dvh; + gap: .5em; } .member-avatar { From 9a2fe8fb373c006ac074031057d0fe4e5b90fa62 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Wed, 9 Jul 2025 00:43:23 +0200 Subject: [PATCH 2/4] refactor: change a lot of dynamic sizes to em and rem this makes the client feel a LOT snappier --- components/Button.vue | 2 +- components/Channel.vue | 4 ++-- components/MessageArea.vue | 1 + layouts/client.vue | 20 ++++++++-------- .../[serverId]/channels/[channelId].vue | 23 ++++++++++--------- 5 files changed, 26 insertions(+), 24 deletions(-) diff --git a/components/Button.vue b/components/Button.vue index fb44cf2..66706de 100644 --- a/components/Button.vue +++ b/components/Button.vue @@ -21,7 +21,7 @@ const props = defineProps<{ background-color: var(--primary-color); color: var(--text-color); - padding: 0.7dvh 1.2dvw; + padding: 0.4em 0.75em; font-size: 1.1em; transition: background-color 0.2s; diff --git a/components/Channel.vue b/components/Channel.vue index 6bdc28b..98f210e 100644 --- a/components/Channel.vue +++ b/components/Channel.vue @@ -23,8 +23,8 @@ const isCurrentChannel = props.uuid == props.currentUuid; .channel-list-link { text-decoration: none; color: inherit; - padding-left: .5dvw; - padding-right: .5dvw; + padding-left: .25em; + padding-right: .25em; } .channel-list-link-container { diff --git a/components/MessageArea.vue b/components/MessageArea.vue index 18b9ac5..244b239 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -246,6 +246,7 @@ router.beforeEach((to, from, next) => { padding-left: 1dvw; padding-right: 1dvw; overflow: hidden; + flex-grow: 1; } #message-box { diff --git a/layouts/client.vue b/layouts/client.vue index b98e304..469800d 100644 --- a/layouts/client.vue +++ b/layouts/client.vue @@ -74,27 +74,27 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); #left-column { display: flex; flex-direction: column; - gap: 2dvh; - padding-left: .5dvw; - padding-right: .5dvw; + 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: 1.5dvh; + padding-top: .5em; } #servers-list { display: flex; flex-direction: column; - gap: 1dvh; + gap: 1em; width: 3.2rem; } #middle-left-column { - padding-left: 1dvw; - padding-right: 1dvw; + padding-left: .25em; + padding-right: .25em; border-right: 1px solid var(--padding-color); - min-width: 10rem; + min-width: 10em; overflow-y: scroll; overflow-x: hidden; } @@ -106,12 +106,12 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds"); #home-button { border-bottom: 1px solid var(--padding-color); - padding-bottom: 1dvh; + padding-bottom: .375em; } #settings-menu { position: absolute; - bottom: .25dvh + bottom: .25em } \ No newline at end of file diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index b5ee86a..04d56f9 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -27,6 +27,7 @@
+
@@ -83,35 +84,35 @@ function handleMemberClick(member: GuildMemberResponse) { From a6572c20f971c4f0d8e05d99f6fac86f29c59541 Mon Sep 17 00:00:00 2001 From: JustTemmie <47639983+JustTemmie@users.noreply.github.com> Date: Wed, 9 Jul 2025 01:04:37 +0200 Subject: [PATCH 4/4] fix: remove accidental duplication of member list this was for local testing, forgot to remove it --- pages/servers/[serverId]/channels/[channelId].vue | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue index 04d56f9..d0c702d 100644 --- a/pages/servers/[serverId]/channels/[channelId].vue +++ b/pages/servers/[serverId]/channels/[channelId].vue @@ -27,7 +27,6 @@
-