From 85e22eabd2d61c1732765e0966043ba170510532 Mon Sep 17 00:00:00 2001
From: Mathieu Hermann <mathieu.hermann@hug.ch>
Date: Thu, 14 Nov 2024 16:25:39 +0100
Subject: [PATCH] feat(app): update design to inform user of smaller screen
 about compatible device

---
 src/app/app.component.html                          |  6 ++++++
 src/app/app.component.scss                          |  5 +++++
 src/app/app.component.ts                            | 12 ++++++++++--
 .../notification/notification.component.html        |  1 +
 .../notification/notification.component.scss        | 10 ++++++++++
 .../notification/notification.component.ts          | 13 +++++++++++++
 src/app/pages/home/home.component.scss              |  3 ++-
 7 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/app/common/components/notification/notification.component.html
 create mode 100644 src/app/common/components/notification/notification.component.scss
 create mode 100644 src/app/common/components/notification/notification.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 67e7bd4..8768089 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,7 @@
 <router-outlet />
+@if(!screenCompatible()) {
+<app-notification>
+    Your screen height is incompatible with Retroski. Please switch to portrait
+    mode or use a device with a screen height of at least 500 pixels.
+</app-notification>
+}
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 6356931..8b393a3 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -7,4 +7,9 @@
     max-height: 100%;
     border-radius: var(--border-radius);
     background-color: var(--color-surface);
+
+    app-notification {
+        position: absolute;
+        top: 10dvh;
+    }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 149e5ba..00b1fa1 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,12 +1,20 @@
-import { Component, Signal, signal } from '@angular/core';
+import { Component, Signal, signal, WritableSignal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { NotificationComponent } from "./common/components/notification/notification.component";
 
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [RouterOutlet],
+    imports: [RouterOutlet, NotificationComponent],
     templateUrl: './app.component.html',
     styleUrl: './app.component.scss'
 })
 export class AppComponent {
+    protected screenCompatible: WritableSignal<boolean>;
+
+    constructor() {
+        this.screenCompatible = signal(screen.height >= 500);
+
+        addEventListener('resize', () => this.screenCompatible.set(screen.height >= 500));
+    }
 }
diff --git a/src/app/common/components/notification/notification.component.html b/src/app/common/components/notification/notification.component.html
new file mode 100644
index 0000000..6dbc743
--- /dev/null
+++ b/src/app/common/components/notification/notification.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/src/app/common/components/notification/notification.component.scss b/src/app/common/components/notification/notification.component.scss
new file mode 100644
index 0000000..3ab910b
--- /dev/null
+++ b/src/app/common/components/notification/notification.component.scss
@@ -0,0 +1,10 @@
+:host {
+    display: block;
+    max-width: 75dvw;
+    padding: 1rem;
+    border-radius: var(--border-radius-large);
+    background-color: var(--color-error-lightest);
+    color: var(--color-error-darkest);
+
+    font-size: var(--text-small);
+}
diff --git a/src/app/common/components/notification/notification.component.ts b/src/app/common/components/notification/notification.component.ts
new file mode 100644
index 0000000..d2076ca
--- /dev/null
+++ b/src/app/common/components/notification/notification.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, input, signal } from '@angular/core';
+
+@Component({
+  selector: 'app-notification',
+  standalone: true,
+  imports: [],
+  templateUrl: './notification.component.html',
+  styleUrl: './notification.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NotificationComponent {
+
+}
diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss
index 7716811..2020c20 100644
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@@ -6,7 +6,7 @@
     padding: 1rem;
 
     .logo {
-        margin: 5dvh 0;
+        margin: 3dvh 0;
         width: 170px;
         height: 170px;
     }
@@ -22,6 +22,7 @@
         color: var(--color-tertiary-light);
         text-align: center;
         max-width: var(--field-max-width);
+        padding-bottom: 1rem;
     }
 
     .actions-container {