Add Mobile View

src/app/app.component.html

 <div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
   <app-header>
   </app-header>
-  <div fxFlex>
+  <div class="{{view}}" fxFlex>
     <router-outlet></router-outlet>
   </div>
   <app-footer>

src/app/app.component.scss

@@ -3,3 +3,17 @@ html, body {
   box-sizing: border-box;
   margin: 0;
 }
+
+.desktopView {
+  text-align: center;
+  margin-left: 15em;
+  margin-right: 15em;
+  margin-top: 5em;
+}
+
+.mobileView {
+  text-align: center;
+  margin-left: 2em;
+  margin-right: 2em;
+  margin-top: 5em;
+}

src/app/app.component.ts

-import {Component, OnInit, Output} from '@angular/core';
-import {io} from 'socket.io-client';
-import {environment} from '../environments/environment';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -9,7 +7,17 @@ import {environment} from '../environments/environment';
 })
 export class AppComponent implements OnInit {
   title = 'Tabu';
+  view = 'desktopView';
+  isMobileResolution = false;
 
   ngOnInit(): void {
+    this.isMobileResolution = window.innerWidth < 768;
+    if (this.isMobileResolution) {
+      console.log('MobileView');
+      this.view = 'mobileView';
+    } else {
+      console.log('DesktopView');
+      this.view = 'desktopView';
+    }
   }
 }

src/app/error/error.component.html

-<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <mat-card class="transparent">
-    <h3>
-      Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a>  zurück
-    </h3>
-  </mat-card>
-  <br>
-  <mat-progress-spinner color="primary" mode="determinate" value="value">
-  </mat-progress-spinner>
-</div>
+<mat-card class="transparent">
+  <h3>
+    Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a>  zurück
+  </h3>
+</mat-card>
+<br>
+<mat-progress-spinner color="primary" mode="determinate" value="value">
+</mat-progress-spinner>
 
 

src/app/game/game.component.html

-<div class="TimerLeft" style="margin-top: 10px; margin-right: 48px; margin-left: auto">
+<div *ngIf="isMobileResolution" style="margin-top: -4.25em;">
+  <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+  </mat-progress-spinner>
+  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+  <br>
+</div>
+<div *ngIf="!isMobileResolution" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
   <mat-progress-spinner style="border-radius: 50%;" class = "white" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
 
   </mat-progress-spinner>
   <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
 </div>
-<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 2em;">
-
+<div style="text-align: center; margin-top: -3em;">
   <mat-card>
     <mat-card-title>
       {{cardInfo.solution}}

src/app/game/game.component.scss

@@ -20,14 +20,13 @@ th{
 .timer{
   position:relative;
   top: -60px;
-  left: 35px;
   font-size: x-large;
   font-weight: bold;
 }
 
 .TimerLeft
 {
-  top: -150px; float:right;width:100px;
+  top: -2em; float:right;width:100px;
 }
 
 body {
@@ -47,3 +46,8 @@ body {
   color: rgba(200, 0, 0);
 }
 
+.center{
+  margin-left: auto;
+  margin-right: auto;
+}
+

src/app/game/game.component.ts

@@ -14,6 +14,7 @@ import {takeUntil} from 'rxjs/operators';
   styleUrls: ['./game.component.scss']
 })
 export class GameComponent implements OnInit, OnDestroy {
+  isMobileResolution = false;
 
   private ngUnsubscribe = new Subject();
   subNewCard: any;
@@ -57,6 +58,7 @@ export class GameComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.isMobileResolution = window.innerWidth < 768;
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));

src/app/guesser/guesser.component.html

-<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <mat-card class="transparent">
-    <mat-card-title> Du musst raten!
-      <br>
-      <br>
-      <br>
-      Spielstand</mat-card-title>
-    <mat-card-content>
-      <br>
-      <table>
-        <tr>
-          <th>Team rot</th>
-          <th>Team blau</th>
-        </tr>
-        <tr>
-          <th class = "red">{{gameStatus.red}}</th>
-          <th class = "blue">{{gameStatus.blue}}</th>
-        </tr>
-      </table>
-    </mat-card-content>
+<mat-card class="transparent">
+  <mat-card-title> Du musst raten!
     <br>
-    <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
+    <br>
+    <br>
+    Spielstand</mat-card-title>
+  <mat-card-content>
+    <br>
+    <table>
+      <tr>
+        <th>Team rot</th>
+        <th>Team blau</th>
+      </tr>
+      <tr>
+        <th class = "red">{{gameStatus.red}}</th>
+        <th class = "blue">{{gameStatus.blue}}</th>
+      </tr>
+    </table>
+  </mat-card-content>
+  <br>
+  <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
 
-    </mat-progress-spinner>
-    <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
-  </mat-card>
-</div>
+  </mat-progress-spinner>
+  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
+</mat-card>
 
 

src/app/overview/overview.component.html

-<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <mat-card class="transparent">
-    <div class="FloatLeftAndCenterElement">
-      <div class="newStartButtonLeft">
-        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
-          <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
-      </div>
-      <div class="CenterText">
-        <h2>{{membership}}</h2>
-      </div>
+<mat-card class="transparent">
+  <div class="FloatLeftAndCenterElement">
+    <div class="newStartButtonLeft">
+      <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
+        <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
     </div>
-    <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
-      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
-    </button>
-    <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
-      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
-    </button>
-  </mat-card>
-  <br>
-  <br>
-  <br>
-  <mat-card class="transparent">
-    <mat-card-title>Spielstand</mat-card-title>
-    <mat-card-content>
-      <br>
-      <table>
-        <tr>
-          <th>Team rot</th>
-          <th>Team blau</th>
-        </tr>
-        <tr>
-          <th class = "redfont">{{gameStatus.red}}</th>
-          <th class = "bluefont">{{gameStatus.blue}}</th>
-        </tr>
-      </table>
-    </mat-card-content>
-    <mat-card-actions>
-      <br>
-      <br>
-      <div *ngIf="isActiveRound" class="spinner-wrapper">
-        <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
-        <mat-spinner diameter="30"></mat-spinner>
-      </div>
-      <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
-      <br>
-      <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+    <div class="CenterText">
+      <h2>{{membership}}</h2>
+    </div>
+  </div>
+  <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
+    <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
+  </button>
+  <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
+    <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+  </button>
+</mat-card>
+<br>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Spielstand</mat-card-title>
+  <mat-card-content>
+    <br>
+    <table>
+      <tr>
+        <th>Team rot</th>
+        <th>Team blau</th>
+      </tr>
+      <tr>
+        <th class = "redfont">{{gameStatus.red}}</th>
+        <th class = "bluefont">{{gameStatus.blue}}</th>
+      </tr>
+    </table>
+  </mat-card-content>
+  <mat-card-actions>
+    <br>
+    <br>
+    <div *ngIf="isActiveRound" class="spinner-wrapper">
+      <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
+      <mat-spinner diameter="30"></mat-spinner>
+    </div>
+    <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
+    <br>
+    <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
+  </mat-card-actions>
+</mat-card>
+

src/app/select-game/select-game.component.html

-<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
-  <mat-card class="transparent">
-    <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
-    <h2>Ideal im Lockdown!</h2>
-  </mat-card>
-  <br>
-  <br>
-  <br>
-  <mat-card class="transparent">
-    <mat-card-title>Spielsuche</mat-card-title>
-    <mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues Spiel</mat-card-subtitle>
-    <mat-card-content>
-      <form>
-        <mat-form-field>
-          <mat-label>Spielname</mat-label>
-          <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
-        </mat-form-field>
-      </form>
-    </mat-card-content>
-    <mat-card-actions>
-      <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
-      <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
-    </mat-card-actions>
-  </mat-card>
-</div>
+<mat-card class="transparent">
+  <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
+  <h2>Ideal im Lockdown!</h2>
+</mat-card>
+<br>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Spielsuche</mat-card-title>
+  <mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues Spiel</mat-card-subtitle>
+  <mat-card-content>
+    <form>
+      <mat-form-field>
+        <mat-label>Spielname</mat-label>
+        <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
+      </mat-form-field>
+    </form>
+  </mat-card-content>
+  <mat-card-actions>
+    <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
+    <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
+  </mat-card-actions>
+</mat-card>