mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2025-01-24 14:24:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed dark mode, changed color namings & added shortcuts

Browse Source
This commit is contained in:
Alessio Gravili 2022-02-23 16:16:17 +01:00 committed by MiniDigger | Martin
parent 740280d6da
commit 4a05cd2370
7 changed files with 42 additions and 39 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="theme-color" content="#ffffff" />
</head>
<body>
<body class="backgroundBody text-[#262626] dark:text-[#E0E6f0]">
<div id="app"></div>
<script>
(function () {

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

@ -13,19 +13,19 @@
<router-link
:to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2"
hover="text-paperblue bg-paperlightblue"
hover="text-primary100 bg-primary50"
>About Hangar
</router-link>
<router-link
:to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2"
hover="text-paperblue bg-paperlightblue"
hover="text-primary100 bg-primary50"
>Imprint
</router-link>
<router-link
:to="{ name: 'staff' }"
class="flex items-center rounded-md px-6 py-2"
hover="text-paperblue bg-paperlightblue"
hover="text-primary100 bg-primary50"
>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-current 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-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>
</div>
</footer>
</template>

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

@ -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="bg-white dark:bg-headerDark">
<header class="backgroundHeader">
<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 bg-white 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-paperblue text-xs p-[20px]">
<p class="text-base font-semibold text-paperblue mb-4">Hangar</p>
<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>
<div class="grid grid-cols-2">
<router-link
:to="{ name: 'index' }"
class="flex items-center rounded-md px-6 py-2"
hover="text-paperblue bg-paperlightblue"
hover="text-primary100 bg-primary50"
>
<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-paperblue bg-paperlightblue"
hover="text-primary100 bg-primary50"
>
<icon-mdi-account-group class="mr-3" style="font-size: 1.2em;"/>
Team
</router-link>
</div>
<p class="text-base font-semibold text-paperblue mb-4 mt-10">More from Paper</p>
<p class="text-base font-semibold colorPrimary 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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://forums.papermc.io/" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://github.com/PaperMC" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://paper.readthedocs.io/en/latest/" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/javadocs" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="/" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/downloads" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://papermc.io/community" hover="text-primary100 bg-primary50">
<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-paperblue bg-paperlightblue">
<a class="flex items-center rounded-md px-6 py-2" href="https://hangar-auth.benndorf.dev/" hover="text-primary100 bg-primary50">
<icon-mdi-key class="mr-3" style="font-size: 1.2em;"/>
{{ t("nav.hangar.auth") }}
</a>

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

@ -2,7 +2,10 @@ import type { Ref } from "vue";
import { onDeactivated, onMounted, onUnmounted, ref } from "vue";
import { useContext } from "vite-ssr/vue";
export async function useInitialState<T>(key: string, handler: (type: "server" | "client") => Promise<T>, blocking = false) {
export async function useInitialState<T>(
key: string,
handler: (type: "server" | "client") => Promise<T>, blocking = false
) {
const { initialState } = useContext();
const responseValue = ref(initialState[key] || null) as Ref<T | null>;

7
frontend-new/src/store/theme.ts
View File

@ -1,12 +1,13 @@
import { defineStore } from "pinia";
import { Ref, ref, unref } from "vue";
import type { Ref} from "vue";
import { ref, unref } from "vue";
export const useThemeStore = defineStore("theme", () => {
const darkMode: Ref<boolean> = ref(false);
const mobile: Ref<boolean> = ref(true); //True cause mobile first!!
const mobile: Ref<boolean> = ref(true); // True cause mobile first!!
const mobileBreakPoint: number = 700;
const mobileBreakPoint = 700;
function toggleDarkMode() {

10
frontend-new/src/styles/main.css
View File

@ -17,16 +17,6 @@
height: 2px;
}
body {
background-color: #f8faff;
color: #262626;
}
.dark body {
background-color: #181a1b;
color: #E0E6f0;
}
html {
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Oxygen','Ubuntu','Cantarell','Fira Sans','Droid Sans','Helvetica Neue',sans-serif;
font-weight: 400;

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

@ -35,10 +35,19 @@ export default defineConfig({
},
},
colors: {
headerDark: '#111111',
paperlightblue: '#ecf2fb',
paperblue: '#004ee9'
backgroundDark90: '#111111',
backgroundDark80: '#181a1b',
backgroundLight10: '#f8faff',
backgroundLight0: '#ffffff',
primary100: '#004ee9',
primary70: '#aec9ff',
primary50: '#ecf2fb'
},
},
},
shortcuts: {
'backgroundHeader': 'bg-backgroundLight0 dark:bg-backgroundDark90',
'backgroundBody': 'bg-backgroundLight10 dark:bg-backgroundDark80',
'colorPrimary': 'text-primary100 dark:text-primary70',
},
});