feat(app): update design to inform user of smaller screen about compa…

…tible device

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>
+}

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;
+    }
 }

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));
+    }
 }

src/app/common/components/notification/notification.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

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);
+}

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 {
+
+}

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 {