diff --git a/src/app/components/base/dialog/Dialog.vue b/src/app/components/base/dialog/Dialog.vue index 5665cb54..808dcde2 100644 --- a/src/app/components/base/dialog/Dialog.vue +++ b/src/app/components/base/dialog/Dialog.vue @@ -107,6 +107,6 @@ onMounted(() => { text-align: center; font-weight: var(--font-weight-l); font-style: var(--font-size-m); - padding-bottom: 8px; + padding-bottom: 14px; } diff --git a/src/app/components/base/form/Form.vue b/src/app/components/base/form/Form.vue index e2e0b001..df76deba 100644 --- a/src/app/components/base/form/Form.vue +++ b/src/app/components/base/form/Form.vue @@ -28,7 +28,6 @@ const submit = (e: Event) => { flex-direction: column; width: 250px; gap: 12px; - padding-top: 8px; .btn { text-align: center; diff --git a/src/app/components/base/icon/Icon.types.ts b/src/app/components/base/icon/Icon.types.ts index efbea507..108249c6 100644 --- a/src/app/components/base/icon/Icon.types.ts +++ b/src/app/components/base/icon/Icon.types.ts @@ -19,11 +19,11 @@ export type AppIcon = | 'eye-close' | 'eye-line' | 'file-fill' - | 'github-line' | 'global-line' | 'google-fill' | 'grid-line' | 'hand-coin' + | 'information-line' | 'key-2-line' | 'magic-line' | 'menu-line' diff --git a/src/app/components/base/link/Link.vue b/src/app/components/base/link/Link.vue index 8c9e20c6..29cc8b4c 100644 --- a/src/app/components/base/link/Link.vue +++ b/src/app/components/base/link/Link.vue @@ -4,6 +4,7 @@ v-tooltip="{ text: tooltip, position: tooltipPosition }" :href="to" :class="classes" + rel="noopener,noreferrer,nofollow" target="_blank" > diff --git a/src/app/pages/Frame.vue b/src/app/pages/Frame.vue index 5d24d676..4c7f79a5 100644 --- a/src/app/pages/Frame.vue +++ b/src/app/pages/Frame.vue @@ -15,22 +15,13 @@ :to="button.link" /> - -
@@ -46,8 +37,8 @@ import { computed, ref } from 'vue'; import { useI18n } from 'vue-i18n'; import { useRouter } from 'vue-router'; +import InfoButton from '@app/pages/navigation/info/InfoButton.vue'; import { AppIcon } from '@components/base/icon/Icon.types'; -import Icon from '@components/base/icon/Icon.vue'; import Link from '@components/base/link/Link.vue'; import AnimatedRouterView from '@components/misc/animated-router-view/AnimatedRouterView.vue'; import { useMediaQuery } from '@composables'; diff --git a/src/app/pages/dashboard/Dashboard.vue b/src/app/pages/dashboard/Dashboard.vue index f4a56265..50bd11a4 100644 --- a/src/app/pages/dashboard/Dashboard.vue +++ b/src/app/pages/dashboard/Dashboard.vue @@ -72,4 +72,9 @@ const rotateYear = (dir: -1 | 1) => { display: flex; grid-gap: 10px; } + +.version { + color: var(--c-text-dark-muted); + font-size: var(--font-size-xs); +} diff --git a/src/app/pages/navigation/info/InfoButton.vue b/src/app/pages/navigation/info/InfoButton.vue new file mode 100644 index 00000000..eaf797eb --- /dev/null +++ b/src/app/pages/navigation/info/InfoButton.vue @@ -0,0 +1,28 @@ + + + diff --git a/src/app/pages/navigation/info/InfoDialog.vue b/src/app/pages/navigation/info/InfoDialog.vue new file mode 100644 index 00000000..96bedc9c --- /dev/null +++ b/src/app/pages/navigation/info/InfoDialog.vue @@ -0,0 +1,61 @@ + + + + + diff --git a/src/app/pages/shared/Pane.vue b/src/app/pages/shared/Pane.vue index d11a6ee4..6ae13ab4 100644 --- a/src/app/pages/shared/Pane.vue +++ b/src/app/pages/shared/Pane.vue @@ -59,7 +59,7 @@ useScrollShadow(header, content, 'var(--app-scroll-box-shadow)'); .title { display: flex; - align-items: center; + align-items: end; gap: 8px; font-size: var(--font-size-s); font-weight: var(--font-weight-l); diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json index 43ade2cf..22aad174 100644 --- a/src/i18n/locales/de.json +++ b/src/i18n/locales/de.json @@ -11,6 +11,9 @@ } }, "app": { + "about": "Über Ocular", + "github": "Schau dir dieses Projekt auf {link} an!", + "madeWithLove": "Made with ❤️ by Simon", "name": "Ocular" }, "auth": { diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 79cc6bd4..06eec416 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -11,6 +11,9 @@ } }, "app": { + "about": "About Ocular", + "github": "Check this project out on {link}!", + "madeWithLove": "Made with ❤️ by Simon", "name": "Ocular" }, "auth": { diff --git a/src/icons/github-line.svg b/src/icons/github-line.svg deleted file mode 100644 index 61809ed3..00000000 --- a/src/icons/github-line.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/information-line.svg b/src/icons/information-line.svg new file mode 100644 index 00000000..cba15f5f --- /dev/null +++ b/src/icons/information-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/types/env.d.ts b/src/types/env.d.ts index c213bed0..3d9aa96f 100644 --- a/src/types/env.d.ts +++ b/src/types/env.d.ts @@ -22,11 +22,17 @@ declare interface HTMLDialogElement { } interface ImportMetaEnv { + // Development readonly OCULAR_TEST_USERNAME?: string; readonly OCULAR_TEST_PASSWORD?: string; + // Backend host readonly OCULAR_GENESIS_HOST: string; - readonly OCULAR_BUILD_TIMESTAMP: string; + + // Build information + readonly OCULAR_BUILD_TIMESTAMP: number; + readonly OCULAR_BUILD_SHA: string; + readonly OCULAR_BUILD_VERSION: string; } interface ImportMeta { diff --git a/vite.config.ts b/vite.config.ts index 854870c0..fe115930 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,3 +1,4 @@ +import { execSync } from 'child_process'; import vue from '@vitejs/plugin-vue'; import { defineConfig } from 'vite'; import { optimizeCssModules } from 'vite-plugin-optimize-css-modules'; @@ -17,7 +18,11 @@ export default defineConfig({ } }, define: { - 'import.meta.env.OCULAR_BUILD_TIMESTAMP': Date.now() + 'import.meta.env.OCULAR_BUILD_TIMESTAMP': Date.now(), + 'import.meta.env.OCULAR_BUILD_SHA': JSON.stringify(execSync('git rev-parse --short HEAD').toString().trim()), + 'import.meta.env.OCULAR_BUILD_VERSION': JSON.stringify( + execSync('git describe --tags --always --abbrev=0').toString().trim() + ) }, plugins: [ tsconfigPaths({ loose: true }),