Style Bug fixes

src/app/footer/footer.component.html

 <mat-toolbar color="primary" style="display: flex">
   <span class="impressum" (click)="toImpressum()">Impressum</span>
-  <span class="copyrightSize">Mit Liebe designed von Dennis Willers und Isabell Heider</span>
+  <span *ngIf="view !== 'mobileView'" class="copyrightSize">Mit Liebe designed von Dennis Willers und Isabell Heider</span>
+  <span *ngIf="view === 'mobileView'" class="copyrightSizeMobile">Mit Liebe designed von Dennis Willers und Isabell Heider</span>
 </mat-toolbar>

src/app/footer/footer.component.scss

@@ -2,6 +2,10 @@
   font-size: 12px;
 }
 
+.copyrightSizeMobile {
+  font-size: 9px;
+}
+
 .impressum {
   font-size: 12px;
   cursor: pointer;

src/app/footer/footer.component.ts

 import { Component, OnInit } from '@angular/core';
 import {Router} from '@angular/router';
+import {ViewModus} from '../dao/viewModus';
 
 @Component({
   selector: 'app-footer',
@@ -7,10 +8,18 @@ import {Router} from '@angular/router';
   styleUrls: ['./footer.component.scss']
 })
 export class FooterComponent implements OnInit {
+  view = 'desktopView';
 
-  constructor(private router: Router) { }
+  constructor(private router: Router,
+              private screen: ViewModus) {
+    screen.$view.subscribe(
+        view => {
+          this.view = view;
+        });
+  }
 
   ngOnInit(): void {
+    this.view = this.screen.actuallView;
   }
 
   toImpressum(): void {

src/app/overview/overview.component.html

@@ -22,6 +22,8 @@
         <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
       </button>
     </div>
+    <br *ngIf="view === 'mobileView'">
+    <br *ngIf="view === 'mobileView'">
     <div *ngIf="view !== 'mobileView'" 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>

src/app/overview/overview.component.ts

@@ -56,11 +56,13 @@ export class OverviewComponent implements OnInit, OnDestroy {
     screen.$view.subscribe(
       view => {
         this.view = view;
+        this.setScrollLimit();
       });
   }
 
   ngOnInit(): void {
     this.view = this.screen.actuallView;
+    this.setScrollLimit();
     this.activatedRoute.paramMap.subscribe(params => {
       this.sessionName = String(params.get('sessionName')).toLowerCase();
       this.team = String(params.get('team'));
@@ -199,7 +201,6 @@ export class OverviewComponent implements OnInit, OnDestroy {
   }
 
   updateChangeHistory(value: boolean): void {
-    console.log('UPDATE: ', value);
     this.canUpdateHistory = value;
   }
 
@@ -216,6 +217,14 @@ export class OverviewComponent implements OnInit, OnDestroy {
     });
   }
 
+  setScrollLimit(): void {
+    if (this.view === 'mobileView') {
+      this.scrollLimit = 325;
+    } else {
+      this.scrollLimit = 290;
+    }
+  }
+
   @HostListener('window:scroll', ['$event'])
   onWindowScroll($event: any): void {
     const numb = window.scrollY;

src/app/round-history/round-history.component.html

@@ -26,27 +26,27 @@
 
     <!-- Tabu1 Column -->
     <ng-container matColumnDef="tabu1">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu1}}</a></mat-cell>
+      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu1}}</a></mat-cell>
     </ng-container>
 
     <!-- Tabu2 Column -->
     <ng-container matColumnDef="tabu2">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu2}}</a></mat-cell>
+      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu2}}</a></mat-cell>
     </ng-container>
 
     <!-- Tabu3 Column -->
     <ng-container matColumnDef="tabu3">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu3}}</a></mat-cell>
+      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu3}}</a></mat-cell>
     </ng-container>
 
     <!-- Tabu4 Column -->
     <ng-container matColumnDef="tabu4">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu4}}</a></mat-cell>
+      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu4}}</a></mat-cell>
     </ng-container>
 
     <!-- Tabu5 Column -->
     <ng-container matColumnDef="tabu5">
-      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft">{{element.tabu5}}</a></mat-cell>
+      <mat-cell *matCellDef="let element"> <a *ngIf="element.answer !== answer.zeitLaueft" class="tabuColor">{{element.tabu5}}</a></mat-cell>
     </ng-container>
 
     <!-- Expanded Content Column - The detail row is made up of this one column -->
@@ -84,6 +84,24 @@
             >
               Richtig &#10004;
             </button>
+            <!-- Tabooh -->
+            <button
+              mat-stroked-button
+              *ngIf="detail.element.answer !== answer.tabooh"
+              color="warn" class="marginButtonLeft"
+              (click)="updateAnswer(detail.element, answer.tabooh)"
+            >
+              Tabooh &#10008;
+            </button>
+            <button
+              mat-raised-button
+              *ngIf="detail.element.answer === answer.tabooh"
+              color="warn" class="marginButtonLeft"
+            >
+              Tabooh &#10008;
+            </button>
+          </div>
+          <div class="marginButtons marginButtonTopDown">
             <!-- Zeit abgelaufen -->
             <button
               mat-stroked-button
@@ -120,22 +138,6 @@
             >
               Überspringen &#187;
             </button>
-            <!-- Tabooh -->
-            <button
-              mat-stroked-button
-              *ngIf="detail.element.answer !== answer.tabooh"
-              color="warn" class="marginButtonLeft"
-              (click)="updateAnswer(detail.element, answer.tabooh)"
-            >
-              Tabooh &#10008;
-            </button>
-            <button
-              mat-raised-button
-              *ngIf="detail.element.answer === answer.tabooh"
-              color="warn" class="marginButtonLeft"
-            >
-              Tabooh &#10008;
-            </button>
           </div>
         </div>
       </mat-cell>

src/app/round-history/round-history.component.scss

@@ -12,8 +12,14 @@
   font-size: small;
 }
 
+.mat-cell {
+  overflow: visible;
+  margin-right: 2px;
+}
+
 .mat-column-answer {
-  flex: 0 0 11em;
+  flex: 0 0 11.5em;
+  overflow: hidden;
 }
 
 .expandStyle {
@@ -53,6 +59,11 @@
 
 .marginButtonLeft {
    margin-left: clamp(7px, 4%, 25px);
+ }
+
+.marginButtonTopDown {
+  margin-top: 5px;
+  margin-bottom: 5px;
 }
 
 .marginButtons {
@@ -63,3 +74,20 @@
 .noSpaceWaste {
   width: 100%;
 }
+
+.tabuColor {
+  color: rgba(0,0,0,.54);
+  overflow: visible!important;
+}
+
+.overflowSHow {
+  white-space: normal;
+  overflow: visible;
+  max-width: 200px;
+}
+
+td , th {
+  white-space: normal;
+  word-wrap: break-word;
+  max-width: 200px;
+}

src/app/round-history/round-history.component.ts

@@ -81,7 +81,6 @@ export class RoundHistoryComponent extends DataSource<any> implements OnInit, On
   ngOnInit(): void {
     this.view = this.screen.actuallView;
     this.setDisplayColumns();
-    console.log("ACTUAL VIEW: ",this.view);
   }
 
   ngOnChanges(changes: SimpleChanges): void {

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

@@ -31,3 +31,6 @@
     <button mat-raised-button color="primary" (click)="goToRules()">Zu den Spielregeln</button>
   </mat-card-content>
 </mat-card>
+<br>
+<br>
+<br>