feat: add links, build time, and git hash to settings menu
This commit is contained in:
parent
0565964b1b
commit
c8b7c1d909
2 changed files with 35 additions and 4 deletions
5
app.config.ts
Normal file
5
app.config.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
export default defineAppConfig({
|
||||||
|
title: "Gorb",
|
||||||
|
buildTimeString: new Date().toISOString(),
|
||||||
|
gitHash: process.env.COMMIT_REF || "N/A"
|
||||||
|
})
|
|
@ -2,8 +2,8 @@
|
||||||
<div id="settings-page-container">
|
<div id="settings-page-container">
|
||||||
<div id="settings-page">
|
<div id="settings-page">
|
||||||
<div id="sidebar">
|
<div id="sidebar">
|
||||||
<h4>(Search bar here)</h4>
|
|
||||||
<ul>
|
<ul>
|
||||||
|
<!-- categories and dynamic settings pages -->
|
||||||
<div v-for="category in categories" :key="category.displayName">
|
<div v-for="category in categories" :key="category.displayName">
|
||||||
<h2>{{ category.displayName }}</h2>
|
<h2>{{ category.displayName }}</h2>
|
||||||
<li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
|
<li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
|
||||||
|
@ -13,7 +13,22 @@
|
||||||
<span class="spacer"></span>
|
<span class="spacer"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p>
|
||||||
<Button text="Log Out" :callback=logout variant="scary"></Button>
|
<Button text="Log Out" :callback=logout variant="scary"></Button>
|
||||||
|
</p>
|
||||||
|
<span class="spacer"></span>
|
||||||
|
|
||||||
|
<p id="links-and-socials">
|
||||||
|
<NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
|
||||||
|
<NuxtLink href="https://docs.gorb.app" title="Backend Documentation"><Icon name="lucide:book-open-text" /></NuxtLink>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p style="font-size: .8em; color: var(--secondary-text-color)">
|
||||||
|
Version Hash: {{ appConfig.gitHash }}
|
||||||
|
<br>
|
||||||
|
Build Time: {{ appConfig.buildTimeString }}
|
||||||
|
</p>
|
||||||
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="sub-page">
|
<div id="sub-page">
|
||||||
|
@ -29,6 +44,8 @@ import Button from '~/components/Button.vue';
|
||||||
|
|
||||||
const { logout } = useAuth()
|
const { logout } = useAuth()
|
||||||
|
|
||||||
|
const appConfig = useAppConfig()
|
||||||
|
|
||||||
interface Page {
|
interface Page {
|
||||||
displayName: string;
|
displayName: string;
|
||||||
pageData: any; // is actually Component but TS is yelling at me :(
|
pageData: any; // is actually Component but TS is yelling at me :(
|
||||||
|
@ -49,6 +66,7 @@ import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
|
||||||
import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
|
import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
|
||||||
import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
|
import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
|
||||||
import Language from '~/components/Settings/AppSettings/Language.vue';
|
import Language from '~/components/Settings/AppSettings/Language.vue';
|
||||||
|
import { WINDOW } from 'cropperjs';
|
||||||
|
|
||||||
const settingsCategories = {
|
const settingsCategories = {
|
||||||
userSettings: {
|
userSettings: {
|
||||||
|
@ -103,7 +121,7 @@ function selectCategory(page: Page) {
|
||||||
background-color: var(--sidebar-background-color);
|
background-color: var(--sidebar-background-color);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
padding: 1dvh 1dvw;
|
padding: 1dvh 1dvw;
|
||||||
margin-left: auto;
|
margin-left: 0;
|
||||||
|
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
@ -128,6 +146,10 @@ function selectCategory(page: Page) {
|
||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar p {
|
||||||
|
margin: 2dvh 0.8dvw;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-focus {
|
.sidebar-focus {
|
||||||
background-color: var(--sidebar-highlighted-background-color);
|
background-color: var(--sidebar-highlighted-background-color);
|
||||||
}
|
}
|
||||||
|
@ -147,11 +169,15 @@ function selectCategory(page: Page) {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#links-and-socials * {
|
||||||
|
margin-right: 0.2em;
|
||||||
|
}
|
||||||
|
|
||||||
.spacer {
|
.spacer {
|
||||||
height: 0.2dvh;
|
height: 0.2dvh;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0.8dvh 1dvw;
|
margin: 0.8dvh 1dvw;
|
||||||
background-color: var(--spacing-color);
|
background-color: var(--padding-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* applies to child pages too */
|
/* applies to child pages too */
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue