Skip to content

Tabu
Tabu
Commit 897c9a99 authored by Dennis Willers's avatar Dennis Willers 🏀
Browse files
Options

Add Mobile View

parent d80a0345
Pipeline #347 passed with stages
      in 5 minutes and 26 seconds
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 196 additions and 189 deletions
      src/app/app.component.html
      View file @ 897c9a99
      <div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" > <div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
      <app-header> <app-header>
      </app-header> </app-header>
      <div fxFlex> <div class="{{view}}" fxFlex>
      <router-outlet></router-outlet> <router-outlet></router-outlet>
      </div> </div>
      <app-footer> <app-footer>
      ......
      src/app/app.component.scss
      View file @ 897c9a99
      ...@@ -3,3 +3,17 @@ html, body { ...@@ -3,3 +3,17 @@ html, body {
      box-sizing: border-box; box-sizing: border-box;
      margin: 0; 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
      View file @ 897c9a99
      import {Component, OnInit, Output} from '@angular/core'; import {Component, OnInit} from '@angular/core';
      import {io} from 'socket.io-client';
      import {environment} from '../environments/environment';
      @Component({ @Component({
      selector: 'app-root', selector: 'app-root',
      ...@@ -9,7 +7,17 @@ import {environment} from '../environments/environment'; ...@@ -9,7 +7,17 @@ import {environment} from '../environments/environment';
      }) })
      export class AppComponent implements OnInit { export class AppComponent implements OnInit {
      title = 'Tabu'; title = 'Tabu';
      view = 'desktopView';
      isMobileResolution = false;
      ngOnInit(): void { 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
      View file @ 897c9a99
      <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;"> <mat-card class="transparent">
      <mat-card class="transparent"> <h3>
      <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
      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>
      </h3> </mat-card>
      </mat-card> <br>
      <br> <mat-progress-spinner color="primary" mode="determinate" value="value">
      <mat-progress-spinner color="primary" mode="determinate" value="value"> </mat-progress-spinner>
      </mat-progress-spinner>
      </div>
      src/app/game/game.component.html
      View file @ 897c9a99
      <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 style="border-radius: 50%;" class = "white" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
      </mat-progress-spinner> </mat-progress-spinner>
      <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content> <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
      </div> </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>
      <mat-card-title> <mat-card-title>
      {{cardInfo.solution}} {{cardInfo.solution}}
      ......
      src/app/game/game.component.scss
      View file @ 897c9a99
      ...@@ -20,14 +20,13 @@ th{ ...@@ -20,14 +20,13 @@ th{
      .timer{ .timer{
      position:relative; position:relative;
      top: -60px; top: -60px;
      left: 35px;
      font-size: x-large; font-size: x-large;
      font-weight: bold; font-weight: bold;
      } }
      .TimerLeft .TimerLeft
      { {
      top: -150px; float:right;width:100px; top: -2em; float:right;width:100px;
      } }
      body { body {
      ...@@ -47,3 +46,8 @@ body { ...@@ -47,3 +46,8 @@ body {
      color: rgba(200, 0, 0); color: rgba(200, 0, 0);
      } }
      .center{
      margin-left: auto;
      margin-right: auto;
      }
      src/app/game/game.component.ts
      View file @ 897c9a99
      ...@@ -14,6 +14,7 @@ import {takeUntil} from 'rxjs/operators'; ...@@ -14,6 +14,7 @@ import {takeUntil} from 'rxjs/operators';
      styleUrls: ['./game.component.scss'] styleUrls: ['./game.component.scss']
      }) })
      export class GameComponent implements OnInit, OnDestroy { export class GameComponent implements OnInit, OnDestroy {
      isMobileResolution = false;
      private ngUnsubscribe = new Subject(); private ngUnsubscribe = new Subject();
      subNewCard: any; subNewCard: any;
      ...@@ -57,6 +58,7 @@ export class GameComponent implements OnInit, OnDestroy { ...@@ -57,6 +58,7 @@ export class GameComponent implements OnInit, OnDestroy {
      } }
      ngOnInit(): void { ngOnInit(): void {
      this.isMobileResolution = window.innerWidth < 768;
      this.activatedRoute.paramMap.subscribe(params => { this.activatedRoute.paramMap.subscribe(params => {
      this.sessionName = String(params.get('sessionName')).toLowerCase(); this.sessionName = String(params.get('sessionName')).toLowerCase();
      this.team = String(params.get('team')); this.team = String(params.get('team'));
      ......
      src/app/guesser/guesser.component.html
      View file @ 897c9a99
      <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;"> <mat-card class="transparent">
      <mat-card class="transparent"> <mat-card-title> Du musst raten!
      <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>
      <br> <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-progress-spinner>
      <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content> <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
      </mat-card> </mat-card>
      </div>
      src/app/impressum/impressum.component.html
      View file @ 897c9a99
      This diff is collapsed.
      src/app/overview/overview.component.html
      View file @ 897c9a99
      <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;"> <mat-card class="transparent">
      <mat-card class="transparent"> <div class="FloatLeftAndCenterElement">
      <div class="FloatLeftAndCenterElement"> <div class="newStartButtonLeft">
      <div class="newStartButtonLeft"> <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
      <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>
      <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
      </div>
      <div class="CenterText">
      <h2>{{membership}}</h2>
      </div>
      </div> </div>
      <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')"> <div class="CenterText">
      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon> <h2>{{membership}}</h2>
      </button> </div>
      <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')"> </div>
      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon> <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
      </button> <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
      </mat-card> </button>
      <br> <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
      <br> <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
      <br> </button>
      <mat-card class="transparent"> </mat-card>
      <mat-card-title>Spielstand</mat-card-title> <br>
      <mat-card-content> <br>
      <br> <br>
      <table> <mat-card class="transparent">
      <tr> <mat-card-title>Spielstand</mat-card-title>
      <th>Team rot</th> <mat-card-content>
      <th>Team blau</th> <br>
      </tr> <table>
      <tr> <tr>
      <th class = "redfont">{{gameStatus.red}}</th> <th>Team rot</th>
      <th class = "bluefont">{{gameStatus.blue}}</th> <th>Team blau</th>
      </tr> </tr>
      </table> <tr>
      </mat-card-content> <th class = "redfont">{{gameStatus.red}}</th>
      <mat-card-actions> <th class = "bluefont">{{gameStatus.blue}}</th>
      <br> </tr>
      <br> </table>
      <div *ngIf="isActiveRound" class="spinner-wrapper"> </mat-card-content>
      <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title> <mat-card-actions>
      <mat-spinner diameter="30"></mat-spinner> <br>
      </div> <br>
      <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title> <div *ngIf="isActiveRound" class="spinner-wrapper">
      <br> <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
      <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button> <mat-spinner diameter="30"></mat-spinner>
      </mat-card-actions> </div>
      </mat-card> <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
      </div> <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
      View file @ 897c9a99
      <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;"> <mat-card class="transparent">
      <mat-card class="transparent"> <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
      <h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1> <h2>Ideal im Lockdown!</h2>
      <h2>Ideal im Lockdown!</h2> </mat-card>
      </mat-card> <br>
      <br> <br>
      <br> <br>
      <br> <mat-card class="transparent">
      <mat-card class="transparent"> <mat-card-title>Spielsuche</mat-card-title>
      <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-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues Spiel</mat-card-subtitle> <mat-card-content>
      <mat-card-content> <form>
      <form> <mat-form-field>
      <mat-form-field> <mat-label>Spielname</mat-label>
      <mat-label>Spielname</mat-label> <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
      <input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)"> </mat-form-field>
      </mat-form-field> </form>
      </form> </mat-card-content>
      </mat-card-content> <mat-card-actions>
      <mat-card-actions> <button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
      <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>
      <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button> </mat-card-actions>
      </mat-card-actions> </mat-card>
      </mat-card>
      </div>
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment