feat: make available as pwa (#36)

MaSch0212 · Jun 7, 2024 · f3c8da7 · f3c8da7
1 parent f88a8be
commit f3c8da7
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+{
+  "name": "MinigolfFreitag",
+  "start_url": "events",
+  "display": "fullscreen"
+}
diff --git 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);
+  }
 }