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

Add Mobile View

parent d80a0345

src/app/app.component.html

+1 −1
Original line number Original line Diff line number Diff line 
<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

+14 −0
Original line number Original line Diff line number Diff line
@@ -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

+11 −3
Original line number Original line Diff line number Diff line 
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'; 
})

})

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

+0 −2
Original line number Original line Diff line number Diff line 
<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
@@ -7,6 +6,5 @@ 
<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

+8 −3
Original line number Original line Diff line number Diff line 
<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}}