Improve navigation on iOS

linkie · Dec 13, 2022 · 4d77454 · 4d77454
1 parent ac3ae1c
commit 4d77454
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 21 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -15,7 +15,6 @@
     <meta name="apple-mobile-web-app-title" content="Linkie">
     <meta name="application-name" content="Linkie">
     <meta name="msapplication-TileColor" content="#2a1414">
-    <meta name="theme-color" content="#333333">
 
     <meta property="og:title" content="Linkie">
     <meta property="og:description" content="View mod dependencies; Search up mappings; All on your web browser instead!">

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -29,6 +29,9 @@ export default defineComponent({
         currentView() {
             return routes[this.current || "/"] || NotFound
         },
+        theme() {
+            return localStorage.getItem("theme")
+        },
     },
     mounted() {
         let theme = localStorage.getItem("theme")
@@ -44,14 +47,16 @@ export default defineComponent({
 </script>
 
 <template>
-    <div class="w-screen h-screen overflow-x-hidden">
-        <Navbar :class="`navbar-${current}`"/>
+    <meta name="theme-color" :key="theme" :content="theme === 'cupcake' ? '#efeae6' : '#242933'">
+    <div class="w-screen overflow-x-hidden">
+        <Navbar class="top-0 fixed z-10" :class="`navbar-${current}`"/>
 
-        <Alerts/>
-        <div class="min-h-full flex flex-col justify-between">
+        <div class="w-screen min-h-screen flex flex-col justify-between bg-base-200">
             <component :is="currentView"/>
             <Footer/>
         </div>
+
+        <Alerts/>
     </div>
 </template>
 

diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="flex justify-center px-2 py-1 min-h-16 top-0 absolute z-10 w-full backdrop-blur-md">
+    <div class="flex justify-center px-2 py-1 min-h-16 w-full backdrop-blur-md">
         <div class="max-w-[78rem] mx-auto w-full flex justify-between min-h-16">
             <div class="flex overflow-x-auto">
                 <NavbarButton href="/" :bold="true">Linkie</NavbarButton>

diff --git a/frontend/src/components/home/HomeDependencies.vue b/frontend/src/components/home/HomeDependencies.vue
@@ -1,7 +1,7 @@
 <template>
-    <div class="flex gap-x-4 gap-y-2 flex-wrap">
-        <div class="p-4 cursor-pointer bg-base-content text-base-100 rounded-lg whitespace-nowrap hover:scale-110 transition-all" 
-               v-for="version in versions.slice(0, 16)" @click="select(version[0], version[1])">{{ version[0] }} {{ version[1] }}</div>
+    <div class="flex gap-x-4 gap-y-3 flex-wrap">
+        <a class="px-4 py-2 cursor-pointer border-2 border-base-content font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all" 
+               v-for="version in versions.slice(0, 16)" :href="select(version[0], version[1])">{{ version[0] }} {{ version[1] }}</a>
     </div>
 </template>
 
@@ -15,8 +15,8 @@ export default defineComponent({
     name: "HomeDependencies",
     components: {Block},
     methods: {
-        select(loader: string, version: string) {
-            location.href = `/dependencies?loader=${loader.toLowerCase()}&version=${version}`
+        select(loader: string, version: string): string {
+            return `/dependencies?loader=${loader.toLowerCase()}&version=${version}`
         },
     },
     computed: {

diff --git a/frontend/src/components/home/HomeMappings.vue b/frontend/src/components/home/HomeMappings.vue
@@ -2,10 +2,10 @@
     <div class="flex flex-col gap-4">
         <div v-for="vers in versions">
             <div class="font-bold text-xl mb-2">{{ namespaceLocalizations[vers[0][0]] ?? vers[0][0] }}</div>
-            <div class="flex gap-x-4 gap-y-2 flex-wrap">
-                <div class="p-4 cursor-pointer bg-base-content text-base-100 rounded-lg whitespace-nowrap hover:scale-110 transition-all"
-                     v-for="version in vers.slice(0, 16)" @click="select(version[0], version[1])">{{ version[1] }}
-                </div>
+            <div class="flex gap-x-4 gap-y-3 flex-wrap">
+                <a class="px-4 py-2 cursor-pointer border-2 border-base-content font-medium rounded-xl whitespace-nowrap hover:scale-110 transition-all"
+                     v-for="version in vers.slice(0, 16)" :href="select(version[0], version[1])">{{ version[1] }}
+                </a>
             </div>
         </div>
     </div>
@@ -27,8 +27,8 @@ export default defineComponent({
         }
     },
     methods: {
-        select(namespace: string, version: string) {
-            location.href = `/mappings?namespace=${namespace.toLowerCase()}&version=${version}`
+        select(namespace: string, version: string): string {
+            return `/mappings?namespace=${namespace.toLowerCase()}&version=${version}`
         },
     },
     computed: {

diff --git a/frontend/src/routes/Home.vue b/frontend/src/routes/Home.vue
@@ -66,10 +66,6 @@ export default defineComponent({
 }
 </style>
 <style>
-.navbar-\/ {
-    background: linear-gradient(135deg, #1f005c, #5b0060, #870160, #ac255e, #ca485c, #e16b5c, #f39060, #ffb56b) fixed;
-}
-
 .navbar-\/ {
     color: white !important;
 }