From 8c4a9ea871d15d540700291e0f9ebd1b9764df68 Mon Sep 17 00:00:00 2001
From: Annie Huang <annie.huang921002@gmail.com>
Date: Tue, 5 Mar 2024 22:29:02 +0800
Subject: [PATCH] add header to login and register page, modified header class
 but not fit for all circumstances

---
 app/src/components/header/HeaderPart.vue        | 14 +++++++-------
 .../header/LandingHeaderComponents.vue          |  2 ++
 app/src/views/GamePage.vue                      |  4 ++--
 app/src/views/LandingPage.vue                   | 10 ++++++----
 app/src/views/LoginPage.vue                     |  6 ++++--
 app/src/views/QuestMapPage.vue                  | 17 ++++++++++++++---
 app/src/views/RegisterPage.vue                  |  9 +++++----
 7 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/app/src/components/header/HeaderPart.vue b/app/src/components/header/HeaderPart.vue
index 13c54cf..a1dc82a 100644
--- a/app/src/components/header/HeaderPart.vue
+++ b/app/src/components/header/HeaderPart.vue
@@ -8,24 +8,24 @@ defineProps({
   },
   headerComponent: {
     type: Object,
-    required: true,
+    required: false,
   },
 })
 </script>
 <template>
   <div
     id="header"
-    class="w-full h-[6vh] px-5 flex flex-row items-center justify-between bg-bg-secondary"
+    class="w-full top-0 px-5 fixed flex flex-row bg-bg-secondary justify-between items-center"
   >
     <div class="flex flex-row items-center gap-3">
-      <img src="../img/icon_totem.svg" class="h-8 justify-self-start" />
-      <button
-        id="GameTitle"
+      <img src="../../img/icon_totem.svg" class="h-8 justify-self-start" />
+      <RouterLink
+        to="/"
         class="text-text-primary inline-block font-bold whitespace-nowrap pt-1"
         style="font-size: 2vh"
       >
         Linux Odyssey
-      </button>
+      </RouterLink>
       <p
         id="QuestTitle"
         class="text-text inline-block font-bold whitespace-nowrap"
@@ -34,7 +34,7 @@ defineProps({
         {{ title }}
       </p>
     </div>
-    <div class="h-full w-full flex gap-3 items-center justify-end">
+    <div class="w-full flex gap-3 items-center justify-end">
       <component :is="headerComponent" />
     </div>
   </div>
diff --git a/app/src/components/header/LandingHeaderComponents.vue b/app/src/components/header/LandingHeaderComponents.vue
index 146b209..1d779dd 100644
--- a/app/src/components/header/LandingHeaderComponents.vue
+++ b/app/src/components/header/LandingHeaderComponents.vue
@@ -1,4 +1,6 @@
 <script setup>
+import { bugReportUrl } from '../../config'
+
 const scrollToSection = (sectionId) => {
   const section = document.getElementById(sectionId)
   if (section) {
diff --git a/app/src/views/GamePage.vue b/app/src/views/GamePage.vue
index 6fd5614..d0c9b4d 100644
--- a/app/src/views/GamePage.vue
+++ b/app/src/views/GamePage.vue
@@ -46,7 +46,7 @@ onMounted(async () => {
 
 <template>
   <!-- game header -->
-  <div class="h-[6vh] w-full">
+  <div class="w-full h-[5vh]">
     <HeaderPart
       :title="sessionStore.quest?.title"
       :headerComponent="GameHeaderComponents"
@@ -59,7 +59,7 @@ onMounted(async () => {
     :value="sessionStore.session.status"
   />
   <!-- main -->
-  <div id="main" class="h-[94vh] w-full flex p-3 space-x-3">
+  <div id="main" class="h-[95vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
     <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">
diff --git a/app/src/views/LandingPage.vue b/app/src/views/LandingPage.vue
index e148dab..3b98d6a 100644
--- a/app/src/views/LandingPage.vue
+++ b/app/src/views/LandingPage.vue
@@ -11,9 +11,9 @@ import { facebookUrl, githubUrl } from '../config'
     <DynamicBackground class="w-full h-full" />
     <div class="h-screen w-screen absolute top-0 left-0">
       <!-- game header -->
-      <HeaderPart :headerComponent="LandingHeaderComponents" />
+      <HeaderPart :headerComponent="LandingHeaderComponents" class="z-50" />
       <!-- main content -->
-      <main class="w-full h-[94vh] overflow-y-auto">
+      <main class="w-full h-full overflow-y-auto">
         <div class="w-full flex flex-col items-center">
           <div
             class="flex flex-col md:flex-row mt-10 justify-around gap-5 items-center my-10"
@@ -26,7 +26,6 @@ import { facebookUrl, githubUrl } from '../config'
               Odyssey
             </h1>
           </div>
-
           <!-- intro -->
           <div class="w-full md:w-2/3 px-5">
             <section
@@ -158,6 +157,7 @@ import { facebookUrl, githubUrl } from '../config'
                     class="text-text-primary text-3xl font-extrabold font-mono sm:col-span-3 gap-6"
                   >
                     玩家感想
+                    <!--可以做成翻頁卡牌一次一個-->
                   </h1>
                   <h1 class="text-xl text-center">"很好玩很像益智遊戲"</h1>
                   <h1 class="text-xl text-center">
@@ -195,7 +195,9 @@ import { facebookUrl, githubUrl } from '../config'
             <h1 class="text-text-primary font-extrabold font-mono text-3xl">
               聯絡我們
             </h1>
-            <div class="flex flex-row items-center justify-around mt-5 gap-5">
+            <div
+              class="flex flex-row items-center justify-around mt-5 gap-5 mb-5"
+            >
               <ContactButton
                 :url="facebookUrl"
                 :icons="['fab', 'facebook']"
diff --git a/app/src/views/LoginPage.vue b/app/src/views/LoginPage.vue
index 5a4e728..97f5a3e 100644
--- a/app/src/views/LoginPage.vue
+++ b/app/src/views/LoginPage.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 
 import {
   TooManyRequestsError,
@@ -45,10 +46,11 @@ const handleLogin = async ({
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <DynamicBackground class="w-full h-full" />
     <div
       class="w-screen h-screen absolute top-0 left-0 flex flex-wrap justify-center content-center"
     >
+      <HeaderPart />
       <div class="w-fit">
         <AuthForm @onSubmit="handleLogin" type="login" />
       </div>
diff --git a/app/src/views/QuestMapPage.vue b/app/src/views/QuestMapPage.vue
index c0497e9..da63346 100644
--- a/app/src/views/QuestMapPage.vue
+++ b/app/src/views/QuestMapPage.vue
@@ -5,10 +5,21 @@ import GameHeaderComponents from '../components/header/GameHeaderComponents.vue'
 </script>
 
 <template>
-  <div class="h-[6vh] w-full">
-    <HeaderPart :title="關卡地圖" :headerComponent="GameHeaderComponents" />
+  <div class="w-fit h-[5vh]">
+    <HeaderPart
+      :title="關卡地圖"
+      :headerComponent="GameHeaderComponents"
+      class="z-50"
+    />
   </div>
-  <div class="flex flex-col justify-center items-center w-full h-[94vh]">
+  <!-- <p
+      class="text-text-primary absolute z-1 font-bold inline-block tracking-widest"
+      style="left: 1.2%; top: 1.5%; height: 100%; font-size: 2vh"
+    >
+      Quest Map
+      Unix編年史
+    </p> -->
+  <div class="flex flex-col justify-center items-center w-full h-[95vh]">
     <QuestMap />
   </div>
 </template>
diff --git a/app/src/views/RegisterPage.vue b/app/src/views/RegisterPage.vue
index b900988..befc86b 100644
--- a/app/src/views/RegisterPage.vue
+++ b/app/src/views/RegisterPage.vue
@@ -3,8 +3,8 @@ import validator from 'validator'
 import { isValidUsername } from '@linux-odyssey/utils'
 import { passwordPolicy } from '@linux-odyssey/constants'
 import AuthForm from '../components/AuthForm.vue'
-import Background from '../components/DynamicBackground.vue'
-
+import DynamicBackground from '../components/DynamicBackground.vue'
+import HeaderPart from '../components/header/HeaderPart.vue'
 import { checkUsername, register } from '../utils/auth'
 import {
   UnauthorizedError,
@@ -89,11 +89,12 @@ async function check({
 
 <template>
   <div class="w-screen h-screen">
-    <Background class="w-full h-full" />
+    <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="w-fit">
+      <HeaderPart />
+      <div class="w-fit h-[91vh]">
         <AuthForm
           @onSubmit="handleRegister"
           @onChange="check"