From a2f215a37e671b9affb2d16aaacd7f2544f3e973 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Pierre=20H=C3=B6hmann?= <jp@hhmn.de>
Date: Sat, 21 Oct 2017 13:36:22 +0200
Subject: [PATCH 1/6] Get ready for mobile support.

---
 src/app/_styles.scss                 | 5 +++--
 src/app/aside/_post.component.html   | 1 +
 src/app/main/_page.component.html    | 6 +++---
 src/app/main/_profile.component.html | 8 ++++----
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/_styles.scss b/src/app/_styles.scss
index 7c7ab8f..fc53db1 100644
--- a/src/app/_styles.scss
+++ b/src/app/_styles.scss
@@ -207,6 +207,7 @@ video {
 .app-toolbar-title,
 h1 > small > span,
 h1 > span,
+h2 > span,
 mat-card-footer > *,
 .separator {
     @extend .pad;
@@ -431,14 +432,14 @@ mat-card-footer > *,
 }
 
 /*
- * Everything excapt smaller portrait mode devices.
+ * Everything except smaller portrait mode devices.
  */
 @media (min-width: 480px) {
     h1 > small {
         float: right;
     }
 
-    .mobile-only, h1 br {
+    .mobile-only {
         display: none;
     }
 }
diff --git a/src/app/aside/_post.component.html b/src/app/aside/_post.component.html
index 3a6bb20..f6575a8 100644
--- a/src/app/aside/_post.component.html
+++ b/src/app/aside/_post.component.html
@@ -32,6 +32,7 @@ <h2>
                     {{post.likes.summary.total_count}}
                 </span>
             </span>
+            <br class='mobile-only'>
             <span
                     [matTooltip]='post.shareTooltip'
                     matTooltipShowDelay='1500'
diff --git a/src/app/main/_page.component.html b/src/app/main/_page.component.html
index 402efeb..8d03837 100644
--- a/src/app/main/_page.component.html
+++ b/src/app/main/_page.component.html
@@ -7,7 +7,7 @@ <h1>
             {{page.name}}
             <small>
                 <span>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             [matTooltip]='page.likeTooltip'
                             matTooltipShowDelay='1500'
@@ -21,7 +21,7 @@ <h1>
                     </span>
                 </span>
                 <span *ngIf='page.talking_about_count'>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             [matTooltip]='page.talkingAboutTooltip'
                             matTooltipShowDelay='1500'
@@ -35,7 +35,7 @@ <h1>
                     </span>
                 </span>
                 <span *ngIf='page.overall_star_rating'>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             [matTooltip]='page.ratingTooltip'
                             matTooltipShowDelay='1500'
diff --git a/src/app/main/_profile.component.html b/src/app/main/_profile.component.html
index 3b60490..624a328 100644
--- a/src/app/main/_profile.component.html
+++ b/src/app/main/_profile.component.html
@@ -9,7 +9,7 @@ <h1>
             {{profile.name}}
             <small *ngIf='isPage'>
                 <span *ngIf='profile.fan_count'>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             [matTooltip]='profile.likeTooltip'
                             matTooltipShowDelay='1500'
@@ -23,7 +23,7 @@ <h1>
                     </span>
                 </span>
                 <span *ngIf='profile.talking_about_count'>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             [matTooltip]='profile.talkingAboutTooltip'
                             matTooltipShowDelay='1500'
@@ -37,7 +37,7 @@ <h1>
                     </span>
                 </span>
                 <span *ngIf='profile.overall_star_rating'>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             [matTooltip]='profile.ratingTooltip'
                             matTooltipShowDelay='1500'
@@ -56,7 +56,7 @@ <h1>
             </small>
             <small *ngIf='isUser'>
                 <span>
-                    <br>
+                    <br class='mobile-only'>
                     <span
                             class='text-accent'
                             [matTooltip]='profile.ageTooltip'

From a5acb2f10d1a2b4727d49671b56c0ff5cbe352df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Pierre=20H=C3=B6hmann?= <jp@hhmn.de>
Date: Sat, 21 Oct 2017 13:45:14 +0200
Subject: [PATCH 2/6] Fix some overlooked breakage from the @angular/material
 upgrade.

---
 src/app/_styles.scss                  | 4 ++++
 src/app/aside/_comment.component.html | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/_styles.scss b/src/app/_styles.scss
index fc53db1..750f171 100644
--- a/src/app/_styles.scss
+++ b/src/app/_styles.scss
@@ -72,6 +72,10 @@ mat-card {
     .mat-card-image {
         margin: 0 -24px 16px -24px!important;
         width: calc(100% + 48px)!important;
+
+        img {
+            width: 100%;
+        }
     }
 
     .mat-card-image:first-child {
diff --git a/src/app/aside/_comment.component.html b/src/app/aside/_comment.component.html
index 3ab6680..56afe59 100644
--- a/src/app/aside/_comment.component.html
+++ b/src/app/aside/_comment.component.html
@@ -2,11 +2,10 @@
 <profile-card [profile]='_comment.from'>
     <div *ngIf='_comment.attachment' mat-card-image>
         <a *ngIf='!video' [href]='_comment.attachment.url' target='_blank'>
-            <img mat-card-image [src]='_comment.attachment.media.image.src'>
+            <img [src]='_comment.attachment.media.image.src'>
         </a>
         <video
                 *ngIf='video'
-                mat-card-image
                 controls
                 preload='metadata'
                 [poster]='_comment.attachment.media.image.src'>

From ade138381e57ae4ba1c00ae0cf517e204667d430 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Pierre=20H=C3=B6hmann?= <jp@hhmn.de>
Date: Sat, 21 Oct 2017 13:46:30 +0200
Subject: [PATCH 3/6] Fix a styling issue introduced in a recent commit.

---
 src/app/_styles.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/_styles.scss b/src/app/_styles.scss
index 750f171..76e6824 100644
--- a/src/app/_styles.scss
+++ b/src/app/_styles.scss
@@ -211,7 +211,6 @@ video {
 .app-toolbar-title,
 h1 > small > span,
 h1 > span,
-h2 > span,
 mat-card-footer > *,
 .separator {
     @extend .pad;

From c2a25180e7c3054ae5cc5bfc172ee54784f0d6cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Pierre=20H=C3=B6hmann?= <jp@hhmn.de>
Date: Sat, 21 Oct 2017 13:56:14 +0200
Subject: [PATCH 4/6] Override some more of the new @angular/material styling.

---
 src/app/_styles.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/app/_styles.scss b/src/app/_styles.scss
index 76e6824..2097fb7 100644
--- a/src/app/_styles.scss
+++ b/src/app/_styles.scss
@@ -166,6 +166,10 @@ mat-grid-tile:hover {
     a { color: $primary-light-fg; }
 }
 
+mat-tab-body, .mat-tab-body-content {
+    overflow: hidden!important;
+}
+
 mat-tab-header {
     .mat-tab-label-container {
         justify-content: center;

From 15bdba9bfa036346582cc0dd75d0bfd33fcf2ee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Pierre=20H=C3=B6hmann?= <jp@hhmn.de>
Date: Sat, 21 Oct 2017 15:19:18 +0200
Subject: [PATCH 5/6] Make everything display correctly on mobile.

---
 src/app/_insight-dialog.component.html   |   2 +-
 src/app/_layout.component.html           | 154 ++++++++++++++---------
 src/app/_styles.scss                     |  52 ++++----
 src/app/aside/_comment.component.html    |   2 +-
 src/app/aside/_post.component.html       |   3 +-
 src/app/aside/comment.component.ts       |  20 ++-
 src/app/aside/post.component.ts          |   8 ++
 src/app/layout.component.ts              |   9 +-
 src/app/main/_post-dialog.component.html |   8 +-
 9 files changed, 168 insertions(+), 90 deletions(-)

diff --git a/src/app/_insight-dialog.component.html b/src/app/_insight-dialog.component.html
index 4c76bde..66691a9 100644
--- a/src/app/_insight-dialog.component.html
+++ b/src/app/_insight-dialog.component.html
@@ -1,6 +1,6 @@
 <!-- HTML template for the InsightDialogComponent -->
 <h2 mat-dialog-title>
-    <span *ngIf='page'>{{page.name}}:</span>
+    <span *ngIf='page' class='desktop-only'>{{page.name}}:</span>
     Statistiken
 </h2>
 <mat-dialog-content *ngIf='!loaded'>
diff --git a/src/app/_layout.component.html b/src/app/_layout.component.html
index e7a2bf6..40e117b 100644
--- a/src/app/_layout.component.html
+++ b/src/app/_layout.component.html
@@ -70,66 +70,102 @@
             </button>
             <span class='app-toolbar-title'>{{title.getTitle()}}</span>
             <span class='app-toolbar-filler'></span>
-            <button
-                    *ngIf='params.profile'
-                    mat-button
-                    class='app-icon-button'
-                    matTooltip="Neu laden"
-                    matTooltipShowDelay='1500'
-                    matTooltipHideDelay='1500'
-                    (click)='appRoutingService.refresh([appService.PROFILE])'>
-                <mat-icon>refresh</mat-icon>
-            </button>
-            <button
-                    *ngIf='page && page.insights'
-                    mat-button
-                    class='app-icon-button'
-                    matTooltip="Statistiken"
-                    matTooltipShowDelay='1500'
-                    matTooltipHideDelay='1500'
-                    (click)='openInsightDialog()'>
-                <mat-icon>poll</mat-icon>
-            </button>
-            <button
-                    *ngIf='params.profile'
-                    mat-button
-                    class='app-icon-button'
-                    matTooltip="Dashboard"
-                    matTooltipShowDelay='1500'
-                    matTooltipHideDelay='1500'
-                    [appLink]='{master: null}'>
-                <mat-icon>dashboard</mat-icon>
-            </button>
-            <a
-                    mat-button
-                    class='button app-icon-button'
-                    matTooltip="Facebook"
-                    matTooltipShowDelay='1500'
-                    matTooltipHideDelay='1500'
-                    href='//facebook.com/{{params.profile}}'
-                    target='_blank'>
-                <mat-icon>open_in_browser</mat-icon>
-            </a>
-            <button
-                    mat-button
-                    class='app-icon-button'
-                    matTooltip="Einstellungen"
-                    matTooltipShowDelay='1500'
-                    matTooltipHideDelay='1500'
-                    (click)='openSettingsDialog()'>
-                <mat-icon>settings</mat-icon>
-            </button>
-            <!--
-            <mat-menu #settings='matMenu'>
-                <div mat-menu-item>
-                    <mat-slide-toggle
-                            [(ngModel)]='settingsService.settings.ui.dark'>
-                        Dark mode
-                        <mat-icon>invert_colors</mat-icon>
-                    </mat-slide-toggle>
-                </div>
+            <span class='desktop-only'>
+                <button
+                        *ngIf='params.profile'
+                        mat-button
+                        class='app-icon-button'
+                        matTooltip="Neu laden"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        (click)='refresh()'>
+                    <mat-icon>refresh</mat-icon>
+                </button>
+                <button
+                        *ngIf='page && page.insights'
+                        mat-button
+                        class='app-icon-button'
+                        matTooltip="Statistiken"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        (click)='openInsightDialog()'>
+                    <mat-icon>poll</mat-icon>
+                </button>
+                <button
+                        *ngIf='params.profile'
+                        mat-button
+                        class='app-icon-button'
+                        matTooltip="Dashboard"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        [appLink]='{master: null}'>
+                    <mat-icon>dashboard</mat-icon>
+                </button>
+                <a
+                        mat-button
+                        class='button app-icon-button'
+                        matTooltip="Facebook"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        href='//facebook.com/{{params.profile}}'
+                        target='_blank'>
+                    <mat-icon>open_in_browser</mat-icon>
+                </a>
+                <button
+                        mat-button
+                        class='app-icon-button'
+                        matTooltip="Einstellungen"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        (click)='openSettingsDialog()'>
+                    <mat-icon>settings</mat-icon>
+                </button>
+            </span>
+            <span class='mobile-only'>
+                <button
+                        mat-button
+                        class='app-icon-button'
+                        matTooltip="Menü"
+                        matTooltipShowDelay='1500'
+                        matTooltipHideDelay='1500'
+                        [matMenuTriggerFor]='menu'>
+                    <mat-icon>more_vert</mat-icon>
+                </button>
+            </span>
+            <mat-menu #menu='matMenu'>
+                <button
+                        *ngIf='params.profile'
+                        mat-menu-item
+                        (click)='refresh()'>
+                    <mat-icon>refresh</mat-icon>
+                    Neu laden
+                </button>
+                <button
+                        *ngIf='page && page.insights'
+                        mat-menu-item
+                        (click)='openInsightDialog()'>
+                    <mat-icon>poll</mat-icon>
+                    Statistiken
+                </button>
+                <button
+                        *ngIf='params.profile'
+                        mat-menu-item
+                        [appLink]='{master: null}'>
+                    <mat-icon>dashboard</mat-icon>
+                    Dashboard
+                </button>
+                <a
+                        mat-menu-item
+                        href='//facebook.com/{{params.profile}}'
+                        target='_blank'>
+                    <mat-icon>open_in_browser</mat-icon>
+                    Facebook
+                </a>
+                <button mat-menu-item (click)='openSettingsDialog()'>
+                    <mat-icon>settings</mat-icon>
+                    Einstellungen
+                </button>
             </mat-menu>
-            -->
         </mat-toolbar>
         <div id='displacer-target'></div>
         <ng-content select='main'></ng-content>
diff --git a/src/app/_styles.scss b/src/app/_styles.scss
index 2097fb7..9641846 100644
--- a/src/app/_styles.scss
+++ b/src/app/_styles.scss
@@ -40,8 +40,6 @@ body {
 }
 
 button, .button {
-    @extend .truncate;
-
     margin: 6px 8px!important;
     padding: 0 8px!important;
 }
@@ -66,7 +64,7 @@ insight {
     }
 }
 
-mat-card {
+mat-card.mat-card {
     padding: 24px!important;
 
     .mat-card-image {
@@ -83,74 +81,71 @@ mat-card {
     }
 }
 
-mat-card-content p {
+mat-card-content.mat-card-content p {
     text-overflow: clip;
 }
 
-mat-card-footer {
+mat-card-footer.mat-card-footer {
     display: flex!important;
     justify-content: flex-end;
 }
 
-mat-card-footer > * {
+mat-card-footer.mat-card-footer > * {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
 }
 
-mat-dialog-actions, .app-snackbar-actions {
+mat-dialog-actions.mat-dialog-actions, .app-snackbar-actions {
     padding: 12px 0;
     display: flex;
     flex-direction: row-reverse;
-    flex-wrap: wrap;
+    flex-wrap: wrap-reverse;
 }
 
-mat-dialog-container {
+mat-dialog-container.mat-dialog-container {
     margin: auto;
+    max-width: calc(100vw - 32px);
 }
 
-mat-dialog-container > * {
+mat-dialog-container.mat-dialog-container > * {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
 }
 
-mat-dialog-container > * > * {
+mat-dialog-container.mat-dialog-container > * > * {
     flex-shrink: 0;
 }
 
-mat-dialog-container > * > mat-dialog-content {
+mat-dialog-container.mat-dialog-container > * > mat-dialog-content {
     flex-grow: 1;
     flex-shrink: 1;
+    max-height: none;
     margin-top: -16px!important;
     margin-bottom: -16px!important;
     padding-top: 16px!important;
     padding-bottom: 16px!important;
 }
 
-mat-icon {
+mat-icon.mat-icon {
     vertical-align: middle;
 }
 
-mat-input-container {
+mat-input-container.mat-input-container {
     width: 100%!important;
 }
 
-mat-sidenav-container > * {
+mat-sidenav-container.mat-sidenav-container > * {
     display: flex!important;
     flex-direction: column;
     height: 100vh!important;
 }
 
-mat-sidenav-container .mat-sidenav-content {
+mat-sidenav-container.mat-sidenav-container .mat-sidenav-content {
     overflow: hidden;
 }
 
-nav, aside, main {
-    overflow-x: hidden;
-    overflow-y: scroll;
-}
-
 mat-spinner {
     margin: auto;
 }
@@ -185,6 +180,11 @@ mat-toolbar {
     button, .button { color: white!important; }
 }
 
+nav, aside, main {
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
 profile .mat-card-header-text > mat-card-title {
     @extend .truncate;
 }
@@ -259,6 +259,7 @@ mat-card-footer > *,
   padding: 0;
   text-align: left;
   text-decoration: none;
+  display: inline!important;
 }
 
 .app-toolbar-filler {
@@ -269,6 +270,10 @@ mat-card-footer > *,
     clear: both;
 }
 
+.cdk-overlay-pane {
+    max-height: calc(100vh - 48px);
+}
+
 .flex {
     display: flex;
 }
@@ -317,6 +322,11 @@ mat-card-footer > *,
     opacity: 0;
 }
 
+.mat-menu-content > button {
+    margin: 0!important;
+    padding: 0 16px!important;
+}
+
 .pad {
     margin: 24px;
 }
diff --git a/src/app/aside/_comment.component.html b/src/app/aside/_comment.component.html
index 56afe59..44a6e1f 100644
--- a/src/app/aside/_comment.component.html
+++ b/src/app/aside/_comment.component.html
@@ -53,7 +53,7 @@
         <button
                 mat-button
                 color='primary'
-                [disabled]='(params | async).profile === _comment.from.id'
+                [disabled]='showProfileButtonDisabledStatus'
                 [appLink]='utilService.profileLink(_comment.from.id)'>
             Profil zeigen
             <mat-icon>account_box</mat-icon>
diff --git a/src/app/aside/_post.component.html b/src/app/aside/_post.component.html
index f6575a8..eb1740b 100644
--- a/src/app/aside/_post.component.html
+++ b/src/app/aside/_post.component.html
@@ -49,6 +49,7 @@ <h2>
     <p>
         <a
                 mat-raised-button
+                class='button'
                 target='_blank'
                 [disabled]='!post.link'
                 [href]='post.link'>
@@ -58,7 +59,7 @@ <h2>
         <button
                 mat-raised-button
                 color='primary'
-                [disabled]='profileId === post.from.id'
+                [disabled]='showProfileButtonDisabledStatus'
                 [appLink]='utilService.profileLink(post.from.id)'>
             Profil zeigen
             <mat-icon>account_box</mat-icon>
diff --git a/src/app/aside/comment.component.ts b/src/app/aside/comment.component.ts
index c42d58d..464f841 100644
--- a/src/app/aside/comment.component.ts
+++ b/src/app/aside/comment.component.ts
@@ -1,4 +1,5 @@
 import {Component, Input, Inject, ViewChild, ElementRef} from '@angular/core';
+import {Params} from '@angular/router';
 import {MatSnackBar} from '@angular/material';
 
 import {Observable} from 'rxjs/Observable';
@@ -10,6 +11,8 @@ import {Comment} from '../comment';
 import {Video} from '../video';
 import {UtilService} from '../util.service';
 import {AppRoutingService} from '../app-routing.service';
+import {AppService} from '../app.service';
+import {AppUxService} from '../app-ux.service';
 
 /*
  * The Component showing the list of pages.
@@ -24,9 +27,14 @@ export class CommentComponent {
     constructor(
         protected matSnackBar: MatSnackBar,
         protected utilService: UtilService,
-        protected appRoutingService: AppRoutingService) {}
+        protected appRoutingService: AppRoutingService,
+        protected appService: AppService,
+        protected appUxService: AppUxService
+    ) {
+        this.appRoutingService.events.subscribe(params => this.params = params);
+    }
 
-    protected params = this.appRoutingService.events;
+    protected params?: Params;
     protected _loaded = false;
 
     /*
@@ -76,5 +84,13 @@ export class CommentComponent {
     get comment() {
         return this._comment;
     }
+
+    /*
+     * Whether to disable the button to show the profile.
+     */
+    get showProfileButtonDisabledStatus() {
+        return this.params[this.appService.PROFILE] === this.comment.from.id
+            && this.appUxService.asideMode === 'side';
+    }
 }
 
diff --git a/src/app/aside/post.component.ts b/src/app/aside/post.component.ts
index 247e9f7..ce102fc 100644
--- a/src/app/aside/post.component.ts
+++ b/src/app/aside/post.component.ts
@@ -76,5 +76,13 @@ export class PostComponent {
     get post() {
         return this._post;
     }
+
+    /*
+     * Whether to disable the button to show the profile.
+     */
+    get showProfileButtonDisabledStatus() {
+        return this.profileId === this.post.from.id
+            && this.appUxService.asideMode === 'side';
+    }
 }
 
diff --git a/src/app/layout.component.ts b/src/app/layout.component.ts
index 5d20a47..3b6a058 100644
--- a/src/app/layout.component.ts
+++ b/src/app/layout.component.ts
@@ -95,7 +95,7 @@ export class LayoutComponent implements OnInit {
     openInsightDialog() {
         const matDialogRef = this.matDialog.open(InsightDialogComponent, {
             width: '600px',
-            height: '400px'
+            height: '800px'
         });
         matDialogRef.componentInstance.page = this.page;
         matDialogRef.afterClosed().filter(Boolean).subscribe(
@@ -117,5 +117,12 @@ export class LayoutComponent implements OnInit {
                 ? this.settingsService.save()
                 : this.settingsService.load());
     }
+
+    /*
+     * Refresh the contents.
+     */
+    refresh() {
+        this.appRoutingService.refresh([this.appService.PROFILE]);
+    }
 }
 
diff --git a/src/app/main/_post-dialog.component.html b/src/app/main/_post-dialog.component.html
index 48e64af..e65ee8f 100644
--- a/src/app/main/_post-dialog.component.html
+++ b/src/app/main/_post-dialog.component.html
@@ -1,6 +1,6 @@
 <!-- HTML template for the PostDialogComponent -->
 <h2 mat-dialog-title>
-    <span *ngIf='page'>{{page.name}}:</span>
+    <span *ngIf='page' class='desktop-only'>{{page.name}}:</span>
     Post erstellen
 </h2>
 <mat-dialog-content>
@@ -16,7 +16,7 @@ <h2 mat-dialog-title>
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon>insert_link</mat-icon>
-                Link hinzufügen
+                <span class='desktop-only'>Link hinzufügen</span>
             </ng-template>
             <mat-input-container>
                 <input
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon>insert_photo</mat-icon>
-                Bild hinzufügen
+                <span class='desktop-only'>Bild hinzufügen</span>
             </ng-template>
             <file
                     [(ressource)]='photo'
@@ -39,7 +39,7 @@ <h2 mat-dialog-title>
         <mat-tab>
             <ng-template mat-tab-label>
                 <mat-icon>movie</mat-icon>
-                Video hinzufügen
+                <span class='desktop-only'>Video hinzufügen</span>
             </ng-template>
             <file
                     [(ressource)]='video'

From 92ae7297e4e1d88051285ef098c079a92daf2b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jean-Pierre=20H=C3=B6hmann?= <jp@hhmn.de>
Date: Sat, 21 Oct 2017 20:38:48 +0200
Subject: [PATCH 6/6] Adjust the resolutions to allow for medium-sized phones.

---
 src/index.html | 10 +++++++---
 src/script.js  |  7 ++++++-
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/index.html b/src/index.html
index 1caa60a..f657253 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,11 @@
         <meta charset='UTF-8'>
         <meta
                 name='viewport'
-                content='width=360, initial-scale=1, minimum-scale=1, maximum-scale=1'>
+                content='
+                    width=320,
+                    initial-scale=1,
+                    minimum-scale=1,
+                    maximum-scale=1'>
 
         <!-- Essential for the user to see at least a loading screen -->
         <style>
@@ -17,7 +21,7 @@
                 position: fixed;
                 top: 0;
                 left: 0;
-                z-index: 65530;	
+                z-index: 65530;
                 margin-left: 0;
                 background-color: #3f51b5;
             }
@@ -217,7 +221,7 @@ <h1>Das klappt nicht :(</h1>
                             Der Bildschirm von deinem Gerät ist leider zu klein, 
                             um die Webapp zu benutzen.  Wir arbeiten an einer App 
                             für Android und iOS, bis dahin funktioniert Aldo 
-                            leider nur auf Tablets und sehr großen Smartphones.
+                            leider nur auf Tablets und großen Smartphones.
                         </p>
                     </div>
                     <hr>
diff --git a/src/script.js b/src/script.js
index 40c2245..6611c9e 100644
--- a/src/script.js
+++ b/src/script.js
@@ -32,7 +32,12 @@ window.onload = function() {
     };
 
     // Check if the device is supported.
-    if (window.screen.width < 400 || window.screen.height < 400) {
+    if (
+        window.screen.width < 360
+            || window.screen.height < 360
+            || window.screen.width < 480
+            && window.screen.height < 480
+    ) {
         document.getElementById('login_issue').classList.add('hidden');
         document.getElementById('fatal_error').classList.remove('hidden');
         document.getElementById('screen_too_small').classList.remove('hidden');