From f3c8da791fd4ba59805aa4eb59cf02eb52c70aa5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Schmidt?=
 <9435005+AnSch1510@users.noreply.github.com>
Date: Sat, 8 Jun 2024 01:02:23 +0200
Subject: [PATCH] feat: make available as pwa (#36)

---
 client/angular.json                             |  1 +
 .../src/app/components/app/app.component.html   |  2 +-
 .../app/components/events/events.component.html |  4 ++--
 .../src/app/components/maps/maps.component.html |  4 ++--
 .../player-events/player-events.component.html  |  4 ++--
 .../app/components/users/users.component.html   |  4 ++--
 client/src/index.html                           | 10 +++++++++-
 client/src/manifest.json                        |  5 +++++
 client/src/styles.scss                          | 17 +++++++++++++++++
 9 files changed, 41 insertions(+), 10 deletions(-)
 create mode 100644 client/src/manifest.json

diff --git a/client/angular.json b/client/angular.json
index 3c42994..5bd831c 100644
--- a/client/angular.json
+++ b/client/angular.json
@@ -32,6 +32,7 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
+              "src/manifest.json",
               "src/assets",
               {
                 "input": "node_modules/flag-icons/flags",
diff --git a/client/src/app/components/app/app.component.html b/client/src/app/components/app/app.component.html
index 8be46a4..5ba3d75 100644
--- a/client/src/app/components/app/app.component.html
+++ b/client/src/app/components/app/app.component.html
@@ -4,7 +4,7 @@
 
 <main class="relative min-h-0 grow px-4">
   <router-outlet />
-  <div class="pointer-events-none absolute bottom-2 right-2 text-xs opacity-25">{{ version }}</div>
+  <div class="pointer-events-none absolute bottom-0 right-4 text-xs opacity-25">{{ version }}</div>
 </main>
 
 <footer>
diff --git a/client/src/app/components/events/events.component.html b/client/src/app/components/events/events.component.html
index b2130e4..92b47e6 100644
--- a/client/src/app/components/events/events.component.html
+++ b/client/src/app/components/events/events.component.html
@@ -1,7 +1,7 @@
 @if (events().length === 0 && isBusy()) {
   <p-progressSpinner class="m-8" />
 } @else {
-  <div class="flex h-full w-full max-w-[40rem] flex-col gap-4">
+  <div class="flex h-full w-full max-w-[40rem] flex-col gap-1">
     @if (hasFailed()) {
       <p-messages severity="error">
         <ng-template pTemplate>
@@ -27,7 +27,7 @@
       ></p-button>
     }
     @if (events().length > 0) {
-      <div class="flex grow flex-col overflow-auto">
+      <div class="flex grow flex-col overflow-auto pb-4 pt-3">
         <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
           @for (event of events(); track event.id; let index = $index) {
             <a
diff --git a/client/src/app/components/maps/maps.component.html b/client/src/app/components/maps/maps.component.html
index 8b6c636..41bb5f5 100644
--- a/client/src/app/components/maps/maps.component.html
+++ b/client/src/app/components/maps/maps.component.html
@@ -8,7 +8,7 @@
     </ng-template>
   </p-messages>
 } @else {
-  <div class="flex h-full w-full max-w-[40rem] flex-col gap-4">
+  <div class="flex h-full w-full max-w-[40rem] flex-col gap-1">
     <div class="flex flex-row items-center gap-2">
       <div class="min-w-0 grow">
         <span class="p-input-icon-left">
@@ -29,7 +29,7 @@
         (onClick)="dialog.open()"
       />
     </div>
-    <div class="grow overflow-auto">
+    <div class="grow overflow-auto pb-4 pt-3">
       <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
         @for (map of maps(); track map.id; let index = $index) {
           <div
diff --git a/client/src/app/components/player-events/player-events.component.html b/client/src/app/components/player-events/player-events.component.html
index 1b99f1c..a02be6b 100644
--- a/client/src/app/components/player-events/player-events.component.html
+++ b/client/src/app/components/player-events/player-events.component.html
@@ -11,7 +11,7 @@
     </ng-template>
   </p-messages>
 } @else {
-  <div class="flex h-full w-full max-w-[40rem] flex-col gap-4 overflow-auto">
+  <div class="flex h-full w-full max-w-[40rem] flex-col gap-4 overflow-auto pb-4">
     <h2 class="m-0">{{ translations.playerEvents_currentEvents() }}</h2>
     <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
       @for (event of currentEvents(); track event.id; let index = $index) {
@@ -42,7 +42,7 @@ <h2 class="m-0">{{ translations.playerEvents_currentEvents() }}</h2>
       }
     </div>
 
-    <h2 class="m-0 pt-4">{{ translations.playerEvents_pastEvents() }}</h2>
+    <h2 class="m-0">{{ translations.playerEvents_pastEvents() }}</h2>
     <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
       @for (event of pastEvents(); track event.id; let index = $index) {
         <a
diff --git a/client/src/app/components/users/users.component.html b/client/src/app/components/users/users.component.html
index ad65cbc..784cdfd 100644
--- a/client/src/app/components/users/users.component.html
+++ b/client/src/app/components/users/users.component.html
@@ -8,7 +8,7 @@
     </ng-template>
   </p-messages>
 } @else {
-  <div class="flex h-full w-full max-w-[40rem] flex-col gap-4">
+  <div class="flex h-full w-full max-w-[40rem] flex-col gap-1">
     <div class="flex flex-row items-center gap-2">
       <div class="min-w-0 grow">
         <span class="p-input-icon-left">
@@ -29,7 +29,7 @@
         (onClick)="dialog.open()"
       />
     </div>
-    <div class="grow overflow-auto">
+    <div class="grow overflow-auto pb-4 pt-3">
       <div class="rounded-lg border-[1px] border-solid border-surface-d bg-surface-a">
         @for (user of users(); track user.id; let index = $index) {
           <div
diff --git a/client/src/index.html b/client/src/index.html
index 79ae8a3..2586745 100644
--- a/client/src/index.html
+++ b/client/src/index.html
@@ -6,9 +6,17 @@
     <base href="/" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
     />
+    <link rel="manifest" href="manifest.json" />
+
+    <!-- Android  -->
+    <meta name="mobile-web-app-capable" content="yes" />
+
+    <!-- iOS -->
     <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
   </head>
   <body>
diff --git a/client/src/manifest.json b/client/src/manifest.json
new file mode 100644
index 0000000..3844f95
--- /dev/null
+++ b/client/src/manifest.json
@@ -0,0 +1,5 @@
+{
+  "name": "MinigolfFreitag",
+  "start_url": "events",
+  "display": "fullscreen"
+}
diff --git a/client/src/styles.scss b/client/src/styles.scss
index 6051a12..36e5950 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -95,6 +95,19 @@
     font-size: 14px;
   }
 
+  @media screen and (orientation: portrait) {
+    body {
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+    }
+  }
+
+  @media screen and (orientation: landscape) {
+    body {
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
+        env(safe-area-inset-left);
+    }
+  }
+
   * {
     box-sizing: border-box;
   }
@@ -233,4 +246,8 @@
   .p-tooltip-text {
     white-space: break-spaces;
   }
+
+  .p-toast {
+    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
+  }
 }