From cfd59fb6ca25a6ee176bf818cb3ac2685484f08f Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitea@xeovalyte.dev>
Date: Sun, 4 Dec 2022 11:57:53 +0100
Subject: [PATCH] ios bar padding

---
 frontend/app.vue                      |  6 +++---
 frontend/components/layout/Navbar.vue | 20 ++++++++++++++++++--
 frontend/components/layout/Topbar.vue | 11 +++++++++--
 frontend/nuxt.config.ts               |  1 +
 frontend/pages/wedstrijd/index.vue    |  2 +-
 5 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index ec69d7d..4defabc 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -5,7 +5,7 @@
           <h2 class="mt-2 font-bold">Loading...</h2>
         </div>
     </div>
-    <div v-else>
+    <div v-else class="">
         <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
             <LayoutTopbar />
             <div class="overflow-y-auto pt-3">
@@ -227,9 +227,9 @@ const ledenlijst = ref([])
 provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents, news, registrationToken, contestTimes, competitors })
 </script>
 
-<style>
+<style scoped>
 .body {
-  margin-top: env(safe-area-inset-top);
+  padding-top: 10px;
   margin-bottom: env(safe-area-inset-bottom);
 }
 
diff --git a/frontend/components/layout/Navbar.vue b/frontend/components/layout/Navbar.vue
index 42aa755..15c252a 100644
--- a/frontend/components/layout/Navbar.vue
+++ b/frontend/components/layout/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="route.meta.key !== 'disable'" class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
+    <div v-if="route.meta.key !== 'disable'" class="w-full bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow" :class="platform === 'ios' ? 'navbar' : 'py-3'">
         <div class="flex text-sm justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900 overflow-x-hidden">
             <NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
                 <Icon size="1.8em" name="ion:home-outline" />
@@ -26,7 +26,23 @@
 </template>
 
 <script setup>
-const route = useRoute()
+import { Device } from '@capacitor/device';
 
+const route = useRoute()
 const { userData } = inject('firebase')
+
+const platform = ref(null)
+
+onMounted(() => {
+   Device.getInfo().then(info => {
+    platform.value = info.platform
+  });
+})
 </script>
+
+<style>
+.navbar {
+  padding-bottom: calc(env(safe-area-inset-bottom) - 10px);
+  padding-top: 12px;
+}
+</style>
diff --git a/frontend/components/layout/Topbar.vue b/frontend/components/layout/Topbar.vue
index b9230fe..57a9525 100644
--- a/frontend/components/layout/Topbar.vue
+++ b/frontend/components/layout/Topbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="route.meta.key !== 'disable'" class="w-full py-3 h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
+    <div v-if="route.meta.key !== 'disable'" class="w-full topbar h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
         <div class="flex justify-evenly items-center gap-3 w-full max-w-xl dark:text-gray-300 text-gray-900">
             <Icon v-if="route.meta.key === 'back'" size="1.75em" @click="router.back()" class="hover:cursor-pointer" name="ion:arrow-back"/>
             <h1 class="capitalize font-bold text-xl mr-auto">{{ route.meta.title }}</h1>
@@ -10,4 +10,11 @@
 <script setup>
 const route = useRoute()
 const router = useRouter()
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.topbar {
+  padding-top: calc(env(safe-area-inset-bottom) + 20px);
+  padding-bottom: 20px;
+}
+</style>
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 1d4fb86..aec2d87 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -14,6 +14,7 @@ export default defineNuxtConfig({
       head: {
         title: 'WRB App',
         charset: 'utf-8',
+        viewport: 'width=device-width initial-scale=1 viewport-fit=cover',
         meta: [
           { name: 'theme-color', content: '#eb6330' },
           {  name: 'description', content: 'De officiele app voor de Waddinxveense Reddingsbrigade'}
diff --git a/frontend/pages/wedstrijd/index.vue b/frontend/pages/wedstrijd/index.vue
index 5dde01e..84ed1dc 100644
--- a/frontend/pages/wedstrijd/index.vue
+++ b/frontend/pages/wedstrijd/index.vue
@@ -11,7 +11,7 @@
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>
             <div class="divider" />
-            <NuxtLink to="/settings" class="rounded-b item-hover py-2 flex items-center">
+            <NuxtLink to="/wedstrijd/addcontest" class="rounded-b item-hover py-2 flex items-center">
                 <span>Wedstrijd Toevoegen</span>
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>