Fix Layout für mobile overview Ansicht

package.json

 {
   "name": "tabooh",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/impressum/impressum.component.html

@@ -63,7 +63,7 @@
 <br>
 <div data-aos="zoom-out-right" data-aos-duration="250">
   <mat-card class="transparent">
-    <mat-card-subtitle>Tabooh-Version: 2.2.1</mat-card-subtitle>
+    <mat-card-subtitle>Tabooh-Version: 2.2.2</mat-card-subtitle>
     <mat-card-subtitle>Zuletzt geändert am: 11.04.2021</mat-card-subtitle>
     <mat-card-content>
       <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>

src/app/overview/overview.component.html

@@ -21,7 +21,7 @@
         <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 *ngIf="view === 'mobileView'" class="peopleInSessionRight" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
+        <mat-icon *ngIf="view === 'mobileView'" class="peopleInSessionRight" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
       </div>
       <br *ngIf="view === 'mobileView'">
       <br *ngIf="view === 'mobileView'">
@@ -30,17 +30,17 @@
           <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
         </button>
       </div>
-      <mat-icon *ngIf="view !== 'mobileView'" class="peopleInSessionRight" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
+      <mat-icon *ngIf="view !== 'mobileView'" class="peopleInSessionRight" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{totalPlayers}}" matBadgeSize="small" matBadgeColor="primary" aria-hidden="false" aria-label="home icon blue">people</mat-icon>
       <div class="CenterText">
         <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
         <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
       </div>
     </div>
     <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
-      <mat-icon matBadge="{{redPlayers}}" matBadgeSize="small" matBadgeColor="primary" color = "warn" aria-hidden="false" aria-label="home icon red" >home</mat-icon>
+      <mat-icon matBadge="{{redPlayers}}" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadgeSize="small" matBadgeColor="primary" 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" matBadge="{{bluePlayers}}" matBadgeSize="small" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
+      <mat-icon style="color: darkblue" matBadgeHidden="{{disablePlayersOnlineBadges}}" matBadge="{{bluePlayers}}" matBadgeSize="small" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
     </button>
   </mat-card>
   <br>

src/app/overview/overview.component.scss

@@ -24,6 +24,10 @@ th{
   background-color: rgba(200, 0, 0, 0.3);
 }
 
+.floatLeft {
+  float: left;
+}
+
 .bluefont{
   margin: 5px;
   color: rgba(0,0,139);
@@ -50,7 +54,11 @@ th{
   align-items: center;
 }
 .newStartButtonLeft{float:left;width:100px;}
-.peopleInSessionRight{float:right; margin-top: 4px}
+.peopleInSessionRight{
+  position: absolute;
+  right: 10px;
+  margin-top: 4px;
+}
 .CenterText{margin:0 auto;width:250px;}
 
 .spinner-wrapper {
@@ -74,7 +82,3 @@ th{
 .textMobileView {
   display: inline;
 }
-
-.peopleRight {
-  float: right;
-}

src/app/overview/overview.component.ts

@@ -27,6 +27,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
   isActiveRound = false;
   red = 'choose';
   blue = 'choose';
+  disablePlayersOnlineBadges = true;
   totalPlayers = 1;
   redPlayers = 0;
   bluePlayers = 0;
@@ -133,6 +134,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
     this.subSessionPlayers = this.socketDataService.getSessionPlayers(this.sessionName)
       .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
         if (data.hasOwnProperty('total')) {
+          this.disablePlayersOnlineBadges = false;
           this.totalPlayers = data.total;
           this.redPlayers = data.red;
           this.bluePlayers = data.blue;