feat: update navbar with new content
This commit is contained in:
parent
74ba8ea91d
commit
e3288c0787
5 changed files with 56 additions and 59 deletions
|
@ -1,6 +1,20 @@
|
|||
<template>
|
||||
<div id="navbar">
|
||||
<!-- -->
|
||||
<div id="navbar" class="navbar-row">
|
||||
<div id="channel-info" class="navbar-row">
|
||||
<!-- h1 to help screen readers -->
|
||||
<h1 id="channel-name">
|
||||
# {{ channel.name }}
|
||||
</h1>
|
||||
<span id="channel-description">
|
||||
{{ channel.description }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="buttons" class="navbar-row">
|
||||
<a class="button" href="https://git.gorb.app/gorb/frontend">
|
||||
<Icon name="lucide:code-xml" title="Source"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -12,77 +26,54 @@ const props = defineProps<INavbar>();
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.navbar-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#navbar {
|
||||
--font-size: calc(var(--navbar-height) * 0.45);
|
||||
--side-margins: calc(var(--font-size) * 0.5);
|
||||
|
||||
min-height: var(--navbar-height);
|
||||
max-height: var(--navbar-height);
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
background: var(--optional-topbar-background);
|
||||
background-color: var(--topbar-background-color);
|
||||
border-bottom: 1px solid var(--padding-color);
|
||||
}
|
||||
|
||||
#navbar-left,
|
||||
#navbar-middle,
|
||||
#navbar-right {
|
||||
top: 0;
|
||||
height: var(--navbar-height);
|
||||
#channel-info {
|
||||
margin-left: var(--side-margins);
|
||||
gap: calc(var(--font-size) * 0.75);
|
||||
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--navbar-gap);
|
||||
}
|
||||
|
||||
#navbar-left {
|
||||
left: var(--side-margins);
|
||||
}
|
||||
|
||||
#navbar-middle {
|
||||
max-width: 50dvw;
|
||||
}
|
||||
|
||||
#navbar-right {
|
||||
right: var(--side-margins);
|
||||
}
|
||||
|
||||
.context-icon {
|
||||
height: calc(var(--navbar-height) * 0.7);
|
||||
width: calc(var(--navbar-height) * 0.7);
|
||||
border-radius: var(--guild-icon-radius);
|
||||
}
|
||||
|
||||
.context-title {
|
||||
min-height: var(--navbar-height);
|
||||
max-height: var(--navbar-height);
|
||||
|
||||
#channel-name {
|
||||
font-size: var(--font-size);
|
||||
font-weight: 500;
|
||||
font-size: calc(var(--navbar-height) * .5);
|
||||
line-height: var(--navbar-height);
|
||||
}
|
||||
|
||||
.navbar-item {
|
||||
#channel-description {
|
||||
font-size: calc(var(--font-size) * 0.8);
|
||||
text-overflow: ellipsis;
|
||||
|
||||
/* TODO make new theme colour? unsure of it's name, this is good enough for now */
|
||||
color: var(--reply-text-color);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
transition: color 300ms;
|
||||
display: flex;
|
||||
#buttons {
|
||||
margin-right: var(--side-margins);
|
||||
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
height: var(--navbar-icon-size);
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.navbar-item:hover {
|
||||
color: var(--primary-highlighted-color);
|
||||
}
|
||||
|
||||
.navbar-item-icon {
|
||||
width: var(--navbar-icon-size);
|
||||
height: 100%;
|
||||
.button {
|
||||
color: var(--secondary-text-color);
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
|
@ -47,6 +47,8 @@ import { generateIrcColor } from '#imports';
|
|||
const { getDisplayName } = useProfile()
|
||||
const { fetchMe } = useApi()
|
||||
|
||||
// TODO this file is a mess, and we need to stop using fetchWithApi
|
||||
|
||||
const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
|
||||
|
||||
const me = await fetchMe() as UserResponse;
|
||||
|
|
|
@ -3,8 +3,9 @@
|
|||
<GuildSidebar v-if="guild" :guild="guild" />
|
||||
<div class="flex-container-column">
|
||||
<GuildNavbar id="navbar"
|
||||
v-if="guild"
|
||||
:guild="guild" />
|
||||
v-if="guild && channel"
|
||||
:guild="guild"
|
||||
:channel="channel"/>
|
||||
|
||||
<div class="flex-container-row">
|
||||
<MessageArea :channel-url="channelUrlPath" />
|
||||
|
@ -15,14 +16,17 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { GuildResponse, INavbar } from "~/types/interfaces";
|
||||
|
||||
const route = useRoute();
|
||||
const { fetchGuild } = useApi()
|
||||
const { fetchGuild, fetchChannel } = useApi()
|
||||
|
||||
const channelUrlPath = `channels/${route.params.channelId}`;
|
||||
const channelId = route.params.channelId as string
|
||||
const guildId = route.params.serverId as string
|
||||
|
||||
const guild: GuildResponse | undefined = await fetchGuild(route.params.serverId as string)
|
||||
const channelUrlPath = `channels/${channelId}`;
|
||||
|
||||
const guild = await fetchGuild(guildId)
|
||||
const channel = await fetchChannel(channelId)
|
||||
|
||||
// function toggleInvitePopup(e: Event) {
|
||||
// e.preventDefault();
|
||||
|
|
|
@ -12,7 +12,6 @@ complementaryColor = white
|
|||
--navbar-height: 5dvh;
|
||||
--navbar-icon-size: 3dvh;
|
||||
--navbar-gap: calc(3dvh * .2);
|
||||
--side-margins: calc(.6dvw + .35dvh); /* try to make it reasonable at any aspect ratio */
|
||||
|
||||
--standard-radius: .5em;
|
||||
--button-radius: .6em;
|
||||
|
|
|
@ -131,6 +131,7 @@ export interface NavbarItem {
|
|||
|
||||
export interface INavbar {
|
||||
guild: GuildResponse
|
||||
channel: ChannelResponse
|
||||
}
|
||||
|
||||
export interface NavbarOptions {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue