mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2024-11-27 06:01:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

- for colors & shortcuts

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-26 16:06:40 +01:00 committed by MiniDigger | Martin
parent 4a05cd2370
commit 80284d451a
5 changed files with 38 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-new/index.html
View File

@ -13,7 +13,7 @@
<meta name="application-name" content="Hangar | PaperMC" /> <meta name="application-name" content="Hangar | PaperMC" />
<meta name="theme-color" content="#ffffff" /> <meta name="theme-color" content="#ffffff" />
</head> </head>
<body class="backgroundBody text-[#262626] dark:text-[#E0E6f0]"> <body class="background-body text-[#262626] dark:text-[#E0E6f0]">
<div id="app"></div> <div id="app"></div>
<script> <script>
(function () { (function () {

8
frontend-new/src/components/Footer.vue
View File

@ -13,19 +13,19 @@
<router-link <router-link
:to="{ name: 'staff' }" :to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2" class="flex items-center rounded-md px-6 py-2"
hover="text-primary100 bg-primary50" hover="text-primary-100 bg-primary-50"
>About Hangar >About Hangar
</router-link> </router-link>
<router-link <router-link
:to="{ name: 'staff' }" :to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2" class="flex items-center rounded-md px-6 py-2"
hover="text-primary100 bg-primary50" hover="text-primary-100 bg-primary-50"
>Imprint >Imprint
</router-link> </router-link>
<router-link <router-link
:to="{ name: 'staff' }" :to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2" class="flex items-center rounded-md px-6 py-2"
hover="text-primary100 bg-primary50" hover="text-primary-100 bg-primary-50"
>Privacy Policy >Privacy Policy
</router-link> </router-link>
</div> </div>
@ -33,7 +33,7 @@
</div> </div>
<div class="footerShape absolute z-1 left-0 right-0 top-0 overflow-hidden" style="transform: scaleY(-1) scaleX(-1);"> <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-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> </div>
</footer> </footer>
</template> </template>

30
frontend-new/src/components/Header.vue
View File

@ -28,7 +28,7 @@ const loggedIn = false; // TODO
<template v-if="announcements"> <template v-if="announcements">
<Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement"/> <Announcement v-for="(announcement, idx) in announcements" :key="idx" :announcement="announcement"/>
</template> </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="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"> <div class="logo-and-nav flex items-center">
<Popover class="relative"> <Popover class="relative">
@ -47,13 +47,13 @@ const loggedIn = false; // TODO
leave-from-class="translate-y-0 opacity-100" leave-from-class="translate-y-0 opacity-100"
leave-to-class="translate-y-1 opacity-0" 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]"> <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 colorPrimary mb-4">Hangar</p> <p class="text-base font-semibold color-primary mb-4">Hangar</p>
<div class="grid grid-cols-2"> <div class="grid grid-cols-2">
<router-link <router-link
:to="{ name: 'index' }" :to="{ name: 'index' }"
class="flex items-center rounded-md px-6 py-2" 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;"/> <icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
Home Home
@ -61,48 +61,48 @@ const loggedIn = false; // TODO
<router-link <router-link
:to="{ name: 'staff' }" :to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2" 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;"/> <icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
Team Team
</router-link> </router-link>
</div> </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"> <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;"/> <icon-mdi-home class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.home") }} {{ t("nav.hangar.home") }}
</a> </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;"/> <icon-mdi-forum class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.forums") }} {{ t("nav.hangar.forums") }}
</a> </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;"/> <icon-mdi-code-braces class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.code") }} {{ t("nav.hangar.code") }}
</a> </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;"/> <icon-mdi-book-open class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.docs") }} {{ t("nav.hangar.docs") }}
</a> </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;"/> <icon-mdi-language-java class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.javadocs") }} {{ t("nav.hangar.javadocs") }}
</a> </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;"/> <icon-mdi-puzzle class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.hangar") }} {{ t("nav.hangar.hangar") }}
</a> </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;"/> <icon-mdi-download-circle class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.downloads") }} {{ t("nav.hangar.downloads") }}
</a> </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;"/> <icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.community") }} {{ t("nav.hangar.community") }}
</a> </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;"/> <icon-mdi-key class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.auth") }} {{ t("nav.hangar.auth") }}
</a> </a>

6
frontend-new/src/composables/useInitialState.ts
View File

@ -4,8 +4,10 @@ import { useContext } from "vite-ssr/vue";
export async function useInitialState<T>( export async function useInitialState<T>(
key: string, 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>; const responseValue = ref(initialState[key] || null) as Ref<T | null>;
@ -15,6 +17,8 @@ export async function useInitialState<T>(
initialState[key] = null; initialState[key] = null;
} }
}; };
onUnmounted(removeState); onUnmounted(removeState);
onDeactivated(removeState); onDeactivated(removeState);

20
frontend-new/windi.config.ts
View File

@ -35,19 +35,19 @@ export default defineConfig({
}, },
}, },
colors: { colors: {
backgroundDark90: '#111111', 'background-dark-90': '#111111',
backgroundDark80: '#181a1b', 'background-dark-80': '#181a1b',
backgroundLight10: '#f8faff', 'background-light-10': '#f8faff',
backgroundLight0: '#ffffff', 'background-light-0': '#ffffff',
primary100: '#004ee9', 'primary-100': '#004ee9',
primary70: '#aec9ff', 'primary-70': '#aec9ff',
primary50: '#ecf2fb' 'primary-50': '#ecf2fb'
}, },
}, },
}, },
shortcuts: { shortcuts: {
'backgroundHeader': 'bg-backgroundLight0 dark:bg-backgroundDark90', 'background-header': 'bg-background-light-0 dark:bg-background-dark-90',
'backgroundBody': 'bg-backgroundLight10 dark:bg-backgroundDark80', 'background-body': 'bg-background-light-10 dark:bg-background-dark-80',
'colorPrimary': 'text-primary100 dark:text-primary70', 'color-primary': 'text-primary-100 dark:text-primary-70',
}, },
}); });