mirror of
https://github.com/HangarMC/Hangar.git
synced 2024-11-27 06:01:08 +08:00
- for colors & shortcuts
This commit is contained in:
Alessio Gravili
MiniDigger | Martin
parent
4a05cd2370
commit
80284d451a
@ -13,7 +13,7 @@
|
||||
<meta name="application-name" content="Hangar | PaperMC" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
</head>
|
||||
<body class="backgroundBody text-[#262626] dark:text-[#E0E6f0]">
|
||||
<body class="background-body text-[#262626] dark:text-[#E0E6f0]">
|
||||
<div id="app"></div>
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
@ -13,19 +13,19 @@
|
||||
<router-link
|
||||
:to="{ name: 'staff' }"
|
||||
class="flex items-center rounded-md px-6 py-2"
|
||||
hover="text-primary100 bg-primary50"
|
||||
hover="text-primary-100 bg-primary-50"
|
||||
>About Hangar
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'staff' }"
|
||||
class="flex items-center rounded-md px-6 py-2"
|
||||
hover="text-primary100 bg-primary50"
|
||||
hover="text-primary-100 bg-primary-50"
|
||||
>Imprint
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'staff' }"
|
||||
class="flex items-center rounded-md px-6 py-2"
|
||||
hover="text-primary100 bg-primary50"
|
||||
hover="text-primary-100 bg-primary-50"
|
||||
>Privacy Policy
|
||||
</router-link>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
</div>
|
||||
<div class="footerShape absolute z-1 left-0 right-0 top-0 overflow-hidden" style="transform: scaleY(-1) scaleX(-1);">
|
||||
<!--- <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-31.3l-40 4.4c-40 4.8-120 13.1-200 0-80-13.6-160-48.6-240-66.7-80-17.8-160-17.8-240-8.8-80 8.6-160 26.9-240 8.8-80-17.7-160-71.1-200-97.7L0 0v218z"></path></svg>
|
||||
--> <svg class="fill-backgroundLight10 dark:fill-backgroundDark80 h-180px min-w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-71.3l-40 0,961 V 0,480 C 268.5,456.5 537,433 857,433 C 1177,433 1548.5,456.5 1920,480 C 1920,480 1920,961 1920,961 Z"></path></svg>
|
||||
--> <svg class="fill-background-light-10 dark:fill-background-dark-80 h-180px min-w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 218" preserveAspectRatio="none"><path d="M0 218h1200v-71.3l-40 0,961 V 0,480 C 268.5,456.5 537,433 857,433 C 1177,433 1548.5,456.5 1920,480 C 1920,480 1920,961 1920,961 Z"></path></svg>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
@ -7,10 +7,10 @@ import {useInitialState} from "~/composables/useInitialState";
|
||||
import {useInternalApi} from "~/composables/useApi";
|
||||
|
||||
// not sure if they need to be part of the initial state, since we directly render them, would only save a request on page switch at most, but I guess its a good demonstration
|
||||
/* const announcements = await useInitialState<AnnouncementObject[]>(
|
||||
/* const announcements = await useInitialState<AnnouncementObject[]>(
|
||||
"announcements",
|
||||
async () => await useInternalApi<AnnouncementObject[]>("data/announcements", false)
|
||||
); */ // TODO: This breaks click events
|
||||
); */ // TODO: This breaks click events
|
||||
|
||||
const theme = useThemeStore()
|
||||
const { t } = useI18n();
|
||||
@ -28,7 +28,7 @@ const loggedIn = false; // TODO
|
||||
<template v-if="announcements">
|
||||
<Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement"/>
|
||||
</template>
|
||||
<header class="backgroundHeader">
|
||||
<header class="background-header">
|
||||
<div class="inner-header flex items-center max-w-1200px mx-auto justify-between h-65px w-[calc(100%-40px)]">
|
||||
<div class="logo-and-nav flex items-center">
|
||||
<Popover class="relative">
|
||||
@ -47,13 +47,13 @@ const loggedIn = false; // TODO
|
||||
leave-from-class="translate-y-0 opacity-100"
|
||||
leave-to-class="translate-y-1 opacity-0"
|
||||
>
|
||||
<PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max backgroundHeader top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-solid border-t-4 border-t-primary100 text-xs p-[20px]">
|
||||
<p class="text-base font-semibold colorPrimary mb-4">Hangar</p>
|
||||
<PopoverPanel class="fixed md:absolute z-10 w-9/10 md:w-max background-header top-1/14 md:top-10 left-1/20 shadow1 rounded-md md:rounded-none md:rounded-bl-md md:rounded-r-md border-solid border-t-4 border-t-primary-100 text-xs p-[20px]">
|
||||
<p class="text-base font-semibold color-primary mb-4">Hangar</p>
|
||||
<div class="grid grid-cols-2">
|
||||
<router-link
|
||||
:to="{ name: 'index' }"
|
||||
class="flex items-center rounded-md px-6 py-2"
|
||||
hover="text-primary100 bg-primary50"
|
||||
hover="text-primary-100 bg-primary-50"
|
||||
>
|
||||
<icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
|
||||
Home
|
||||
@ -61,48 +61,48 @@ const loggedIn = false; // TODO
|
||||
<router-link
|
||||
:to="{ name: 'staff' }"
|
||||
class="flex items-center rounded-md px-6 py-2"
|
||||
hover="text-primary100 bg-primary50"
|
||||
hover="text-primary-100 bg-primary-50"
|
||||
>
|
||||
<icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
|
||||
Team
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<p class="text-base font-semibold colorPrimary mb-4 mt-10">More from Paper</p>
|
||||
<p class="text-base font-semibold color-primary mb-4 mt-10">More from Paper</p>
|
||||
<div class="grid grid-cols-2">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.home") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://forums.papermc.io/" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://forums.papermc.io/" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-forum class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.forums") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://github.com/PaperMC" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://github.com/PaperMC" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-code-braces class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.code") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://paper.readthedocs.io/en/latest/" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://paper.readthedocs.io/en/latest/" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-book-open class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.docs") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/javadocs" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/javadocs" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-language-java class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.javadocs") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-puzzle class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.hangar") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/downloads" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/downloads" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-download-circle class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.downloads") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/community" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/community" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.community") }}
|
||||
</a>
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://hangar-auth.benndorf.dev/" hover="text-primary100 bg-primary50">
|
||||
<a class="flex items-center rounded-md px-6 py-2" href="https://hangar-auth.benndorf.dev/" hover="text-primary-100 bg-primary-50">
|
||||
<icon-mdi-key class="mr-3" style="font-size: 1.2em;"/>
|
||||
{{ t("nav.hangar.auth") }}
|
||||
</a>
|
||||
|
||||
@ -4,9 +4,11 @@ import { useContext } from "vite-ssr/vue";
|
||||
|
||||
export async function useInitialState<T>(
|
||||
key: string,
|
||||
handler: (type: "server" | "client") => Promise<T>, blocking = false
|
||||
handler: (type: "server" | "client") => Promise<T>,
|
||||
blocking = false
|
||||
) {
|
||||
const { initialState } = useContext();
|
||||
|
||||
const { initialState } = useContext();
|
||||
const responseValue = ref(initialState[key] || null) as Ref<T | null>;
|
||||
|
||||
// remove data from initialState when component unmounts or deactivates
|
||||
@ -15,6 +17,8 @@ export async function useInitialState<T>(
|
||||
initialState[key] = null;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
onUnmounted(removeState);
|
||||
onDeactivated(removeState);
|
||||
|
||||
|
||||
@ -35,19 +35,19 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
colors: {
|
||||
backgroundDark90: '#111111',
|
||||
backgroundDark80: '#181a1b',
|
||||
backgroundLight10: '#f8faff',
|
||||
backgroundLight0: '#ffffff',
|
||||
primary100: '#004ee9',
|
||||
primary70: '#aec9ff',
|
||||
primary50: '#ecf2fb'
|
||||
'background-dark-90': '#111111',
|
||||
'background-dark-80': '#181a1b',
|
||||
'background-light-10': '#f8faff',
|
||||
'background-light-0': '#ffffff',
|
||||
'primary-100': '#004ee9',
|
||||
'primary-70': '#aec9ff',
|
||||
'primary-50': '#ecf2fb'
|
||||
},
|
||||
},
|
||||
},
|
||||
shortcuts: {
|
||||
'backgroundHeader': 'bg-backgroundLight0 dark:bg-backgroundDark90',
|
||||
'backgroundBody': 'bg-backgroundLight10 dark:bg-backgroundDark80',
|
||||
'colorPrimary': 'text-primary100 dark:text-primary70',
|
||||
'background-header': 'bg-background-light-0 dark:bg-background-dark-90',
|
||||
'background-body': 'bg-background-light-10 dark:bg-background-dark-80',
|
||||
'color-primary': 'text-primary-100 dark:text-primary-70',
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user