items-center the header

This commit is contained in:
wancat committed 2024-03-01 21:24:21 +08:00
1 parent ba7409b7a8
commit 1e2a43db50
2 files changed
+69 -83

No files matched your search

+3 -10
View File
@@ -11,9 +11,8 @@ import { isLoggedIn } from './utils/auth'
const routes = [
{
path: '/',
redirect: {
name: 'landing-page',
},
name: 'landing-page',
component: LandingPage,
},
{
path: '/login',
@@ -51,11 +50,6 @@ const routes = [
name: 'leaderboard',
component: LeaderboardPage,
},
{
path: '/landing',
name: 'landing-page',
component: LandingPage,
},
]
const router = createRouter({
@@ -70,8 +64,7 @@ router.beforeEach(async (to, from, next) => {
// Check if the user isn't authenticated
// Redirect to the login page
next({
// name: 'register',
name: 'landing',
name: 'register',
query: { redirect: to.fullPath }, // Optionally pass a redirect parameter
})
} else if (to.meta.requiresGuest && loggedIn) {
+66 -73
View File
@@ -18,81 +18,74 @@ const scrollToSection = (sectionId) => {
<template>
<div class="w-screen h-screen bg-scroll bg-bg">
<DynamicBackground class="w-full h-full" />
<div
class="h-screen w-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
>
<div class="h-screen w-screen absolute top-0 left-0">
<!-- game header -->
<div class="h-[6vh] w-full">
<div
id="header"
class="bg-bg-secondary content-center h-full w-full p-1 items-center"
>
<div class="h-full flex items-center justify-center mx-3">
<div class="flex items-center gap-3">
<img src="../img/icon_totem.svg" class="h-5" />
<button
id="GameTitle"
class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
style="font-size: 2vh"
>
Welcome to Linux Odyssey !
</button>
</div>
<div class="h-full w-full flex gap-3 items-center justify-end">
<button
id="Intro"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('intro')"
style="font-size: 2vh"
>
Intro
</button>
<button
id="Feature"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('feature')"
style="font-size: 2vh"
>
Feature</button
><button
id="Info"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('info')"
style="font-size: 2vh"
>
Info
</button>
<div
class="w-full h-20 px-5 flex flex-row items-center justify-between bg-bg-secondary"
>
<div class="flex flex-row items-center gap-3">
<img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
<button
id="GameTitle"
class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
style="font-size: 2vh"
>
Linux Odyssey
</button>
</div>
<div class="flex flex-row items-center gap-3">
<button
id="Intro"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('intro')"
style="font-size: 2vh"
>
Intro
</button>
<button
id="Feature"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('feature')"
style="font-size: 2vh"
>
Feature</button
><button
id="Info"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('info')"
style="font-size: 2vh"
>
Info
</button>
<button
id="Contact"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('contact')"
style="font-size: 2vh"
>
Contact Us
</button>
<RouterLink
title="Sign In"
id="SignIn"
to="/register"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
style="font-size: 2vh"
>
Sign In
</RouterLink>
<a
title="Bug Report"
:href="bugReportUrl"
target="_blank"
class="h-5 w-5"
>
<font-awesome-icon
:icon="['fas', 'bug']"
class="text-text-primary h-full w-full"
/>
</a>
</div>
</div>
<button
id="Contact"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
@click="scrollToSection('contact')"
style="font-size: 2vh"
>
Contact Us
</button>
<RouterLink
title="Sign In"
id="SignIn"
to="/register"
class="text-text inline-block font-bold whitespace-nowrap pt-1"
style="font-size: 2vh"
>
Sign In
</RouterLink>
<a
title="Bug Report"
:href="bugReportUrl"
target="_blank"
class="h-5 w-5"
>
<font-awesome-icon
:icon="['fas', 'bug']"
class="text-text-primary h-full w-full"
/>
</a>
</div>
</div>