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

Compare commits

base: 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
..
compare: 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

No commits in common. "5cdeb36200af16d1c7c77b31e4a2328d02b9fe16" and "a111180b521fbc6a4e7b6a2beb7abd11a1c31c06" have entirely different histories.
5cdeb36200 ... a111180b52

6 changed files with 79 additions and 69 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.4em 0.75em; padding: 0.7dvh 1.2dvw;
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: .25em; padding-left: .5dvw;
padding-right: .25em; padding-right: .5dvw;
} }
.channel-list-link-container { .channel-list-link-container {
text-align: left; text-align: left;
display: flex; display: flex;
height: 1.5em; height: 4dvh;
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: .5em; padding-top: 1dvh;
padding-bottom: .5em; padding-bottom: 1dvh;
margin: 0; margin: 0;
} }
.message-text ul { .message-text ul {
padding-left: 1em; padding-left: 2dvw;
} }
</style> </style>

1
components/MessageArea.vue
View file

@ -246,7 +246,6 @@ 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 {

107
layouts/client.vue
View file

@ -6,23 +6,21 @@
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"/> </NuxtLink>
</NuxtLink> <div id="servers-list">
<div id="servers-list"> <NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`"> <img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/> <Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
</NuxtLink>
</div>
<NuxtLink id="settings-menu" href="/settings">
<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
</NuxtLink> </NuxtLink>
</div> </div>
<slot /> <NuxtLink id="settings-menu" href="/settings">
<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
</NuxtLink>
</div> </div>
<slot />
</div> </div>
</template> </template>
@ -36,10 +34,11 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
<style> <style>
#client-root { #client-root {
/* border: 1px solid white; */
height: 100dvh; height: 100dvh;
width: 100dvw; display: grid;
display: flex; grid-template-columns: 1fr 4fr 18fr 4fr;
flex-direction: column; grid-template-rows: 4dvh auto;
text-align: center; text-align: center;
} }
@ -49,54 +48,37 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
.visible { .visible {
opacity: 100%; opacity: 100%;
transition: opacity 500ms; transition-duration: 500ms;
} }
#homebar { #homebar {
min-height: 4dvh; grid-row: 1;
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;
} }
#page-content { #client-root>div:nth-child(-n+4) {
display: flex; border-bottom: 1px solid var(--padding-color);
flex-direction: row;
flex-grow: 1;
overflow: auto;
} }
#left-column { #__nuxt {
display: flex; display: flex;
flex-direction: column; flex-flow: 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;
} }
#servers-list { .grid-column {
display: flex; padding-top: 1dvh;
flex-direction: column;
gap: 1em;
width: 3.2rem;
} }
#middle-left-column { #home {
padding-left: .25em; padding-left: .5dvw;
padding-right: .25em; padding-right: .5dvw;
border-right: 1px solid var(--padding-color);
min-width: 10em;
overflow-y: scroll;
overflow-x: hidden;
} }
.sidebar-icon { .sidebar-icon {
@ -104,14 +86,43 @@ 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: .375em; padding-bottom: 1dvh;
} }
#settings-menu { #settings-menu {
position: absolute; position: absolute;
bottom: .25em bottom: .25dvh
}
#servers-list {
display: flex;
flex-direction: column;
gap: 1dvh;
} }
</style> </style>

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

@ -27,7 +27,6 @@
<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>
@ -84,35 +83,36 @@ function handleMemberClick(member: GuildMemberResponse) {
<style> <style>
#middle-left-column { #middle-left-column {
padding-left: .5em; padding-left: 1dvw;
padding-right: .5em; padding-right: 1dvw;
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 {
width: 12rem; padding-top: 1dvh;
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;
padding-left: 1.25em; max-height: 92dvh;
padding-right: 1.25em; padding-left: 1dvw;
padding-top: 0.75em; padding-right: 1dvw;
padding-bottom: 0.75em; margin-top: 1dvh;
max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
} }
.member-item { .member-item {
display: flex; display: grid;
grid-template-columns: 2dvw 1fr;
margin-top: .5em; margin-top: .5em;
margin-bottom: .5em; margin-bottom: .5em;
gap: .5em; gap: 1em;
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: .5em; gap: 1dvh;
} }
.member-avatar { .member-avatar {