Commit a968f272 authored by Dennis Willers's avatar Dennis Willers 🏀

Fix Layout für mobile overview Ansicht

parent 68f49472
Pipeline #397 passed with stages
in 5 minutes and 58 seconds
"1 Elefant Rüssel Dickhäuter Tier Afrika grau"
"2 Küche Koch Essen Kühlschrank Herd Arbeitsplatte"
"3 Taschengeld Ausgeben Sparen Jacke Euro Eltern"
"4 Schwimmen Sport Verein Wasser Baden Kraul"
"5 Buch Lesen Seite Taschen Einband Autor"
"6 Jacke Mantel Überziehen Tragen Kalt Strick"
"7 Fahrrad Reifen Sattel Pedale Klingel Tour"
"8 Sparschwein Geld Sparen Füllen Kinder Taschengeld"
"9 Affe Dschungel Banane Tarzan Pavian Tier"
"10 Kaffee Schwarz Milch Zucker Heiß Koffein"
"11 Salat Tomaten Gurken Grün Soße Vorspeise"
"12 Schnee Eis Weiß Kalt Skifahren Winter"
"13 Uhr Zeit Zahlen Armband Handgelenk Stunden"
"14 Brot Backen Laib Kruste Scheiben Bäcker"
"15 Hunde Gassi Haustier Bellen Leine Katze"
"16 Datum Kalender Heute Monat Jahr Tag"
"17 Sonne Hell Scheinen Regen Wolken Himmel"
"18 Finger Hand Zeigen Daumen anfassen Abdruck"
"19 Kartoffel Ecken Püree Schale Erdapfel Pommes"
"20 Spaghetti Nudeln Bolognese Faden Pasta Lang"
"21 Maus Micky Computer Tastatur Käse Falle"
"22 Pferd Reiten Hufeisen Sattel Stall Trense"
"23 Fussball Schwarz Weiß Bundesliga Sport Spiel"
"24 Schule Bücher Prüfungen Lehrer Klasse Gymnasium"
"25 Hamburger Fleisch Brötchen Ketchup Mc Donalds Fast Food"
"26 Pony Pferd Klein Reiten Sattel Hof"
"27 Obst Frucht Baum Essen Apfel Banane"
"28 Skateboard Fahren Brett Balance Rollen Inliner"
"29 Schlange Reptil Giftzähne Kriechen Schuppen Häuten"
"30 Höhle Decken Versteck Dunkel Leben Fledermäuse"
"31 Badeanzug Wasser Schwimmbad Sommer Hose Bikini"
"32 Lolli Lutschen Farbe Stiel Süßigkeit Zuckerstange"
"33 Schwimmbad Wasser Becken Schwimmen Sportschule aus"
"34 Motorrad Zweirad Fahren Helm schnell Auto"
"35 Tischtennis Ball Schläger Platte Rundlauf Match"
"36 Toilette WC Bad Spülen Papier ausverkauft"
"37 Torte Backen Kuchen Geburtstag Muffin Kaffee"
"38 Toast Heiß Brot Butter Sandwich weiß"
"39 Schiedsrichter Unparteiisch Fußball Sport Abseits Pfeifen"
"40 Tomate Reif Rot Gemüse Ketchup Soße"
"41 Stier Hörner Kampf Kuh Sternzeichen rot"
"42 Platz Fläche Offen Spiel Fußball Sitz"
"43 Ballkleid Lang Hübsch Abi Elegant Tanzen"
"44 Kartoffelchips Tüte gesalzen Knusprig Pringles woraus"
"45 Einhorn Pferd Horn Fabel Fantasie Tier"
"46 Schleife Haar Schuhe Binden Knoten Conny"
"47 Pyjama Anzug Schlafen Bett Nachts anziehen"
"48 Basketball groß Spieler Korb Sport Halle"
"49 Jucken Haut Kratzen Reiben rot Allergie"
"50 Satellit Umkreisen Erde Weltraum fliegen Raumfahrt"
"51 Karotte Orange Hase Gemüse knabbern hart"
"52 Frikadellen Rindfleisch Rund Senf Buletten Brötchen"
"53 Schultasche Tragen Hefte Sachen Mäppchen Ranzen"
"54 Lederhose Bayern Beine kurz Oktoberfest Deutsch"
"55 Milchstrasse Sterne Weltall Sonnensystem Galaxie Himmel"
"56 Kehlkopf Schlucken Hals Sprechen Rachen Luftröhre"
"57 Sweatshirt Ärmel Lang Jacke Warm Pullover"
"58 Informatiker Computer Programmieren Beruf Hardware Software"
"59 Tischdecke Essen Stoff Mahlzeit Möbel Zimmer"
"60 Geist Gespenst Schloss Spuken Halloween weiß"
"61 Gynäkologe Frauenarzt Stuhl Untersuchung Schwanger Pille"
"62 Hausfrau Arbeit Beruf Familie Haushalt Erziehung"
"63 Internet WLAN online Netzwerk Computer Daten"
"64 Januar Monat Dezember Februar Winter Jahresbeginn"
"65 Eis gefroren kalt Wasser See Schlittschuh"
"66 Frost Eis Wetter Raureif Boden kalt"
"67 Grippe Krankheit Fieber Husten Virus Arzt"
"68 Supermarkt Geschäft Laden einkaufen Essen Discounter"
"69 Sofa Sitzen Wohnzimmer Couch Möbelstück Fernsehen"
"70 Weihnachten Feiern Jesus Geburt Geschenke Dezember"
"71 Kirche Gottesdienst Religion Pfarrer Christ Gebäude"
"72 Google Suchmaschine Internet nachgucken suchen Bing"
"73 Klavier Musik Instrument Spielen Tasten Noten"
"74 Medizin Mittel Tablette Saft Arzt studieren"
"75 vier Zahl drei zwei fünf Nummer"
"76 Tabu Spiel jetzt grade erklären Karten"
"77 Musik singen spielen hören Noten Instrument"
"78 Kugelschreiber Stift schreiben Unterschrift blau Füller"
"79 Tastatur Computer tippen Maus eingeben Buchstaben"
"80 Smartphone Handy Telefon anrufen Internet mobil"
"81 Hausarbeit Universität schreiben Seiten Aufgabe Klausur"
"82 Flasche Wasser Getränk trinken Glas Pfand"
"83 Abend Morgen Mittag dunkel Nacht spät"
"84 Arbeit Beruf tagsüber verdienen Geld Tätigkeit"
"85 Auge sehen Pupille Gesicht gucken zwei"
"86 Auto fahren Verkehrsmittel Fahrrad Reifen Benzin"
"87 Blume Pflanze Strauß Beet wachsen schön"
"88 Beruf Arbeiten Was Woche Ausbildung Geld"
"89 Bett schlafen Nacht Decke Kissen Laken"
"90 Boden stehen Parkett Teppich Fliesen unten"
"91 Bruder Schwester Geschwister Junge Mann Sohn"
"92 Brief schicken Mail Umschlag Papier schreiben"
"93 Dorf Stadt klein wohnen ländlich Siedlung"
"94 Ding vergessen Sache Gegenstand unspezifisch Wort"
"95 Palme Baum warm Blätter Banane Kokosnuss"
"96 Ende Anfang Fertig Gegenteil Zeitpunkt aufhören"
"97 Erde Planet leben Welt Blumen Pflanzen"
"98 Familie Eltern Kinder verwandt Nachname Haus"
"99 Ferien Urlaub Frei Sommer Weihnachten Herbst"
"100 Klausur schreiben Prüfung Klassenarbeit lernen Kontrolle"
"101 Fisch Wasser schwimmen Tier Meer See"
"102 Frage Satz Antwort Erkundigen Thema Problem"
"103 Freund mögen lieben Sympathie jemanden Person"
"104 Frau weiblich erwachsen Mensch Mädchen Mann"
"105 Fuß Zehen Bein stehen gehen Schuhe"
"106 Garten Grundstück draußen Rasen Terasse Pflanzen"
"107 Geburtstag Feiern Geschenke Kuchen Jahr alt"
"108 Haar Kopf wachsen rasieren Tier Körper"
"109 Herz Symbol Organ schlagen rot Liebe"
"110 Hunger satt Essen Appetit Nahrung Empfindung"
"111 Raum Zimmer Platz Wände Zahlen Welt"
"112 Kopf Haupt Körper Schultern Schädel Gehirn"
"113 Kind jung klein Mensch erwachsen Eltern"
"114 Lehrer Beruf Arbeiten Schule Studieren Referendar"
"115 Leben Tod Menschen Tiere Herz Welt"
"116 Licht dunkel Lampe Glühbirne Kerze hell"
"117 Loch fallen tief Boden Erde Monster"
"118 Luft atmen Gas durchsichtig Wasser leben"
"119 Minute Sekunden 60 Stunde Uhr Zeit"
"120 Mensch Person Tier Lebewesen zwei Beine"
"121 Onkel Tante Cousin Bruder Vater Schwager"
"122 Plural Mehrzahl Einzahl Singular deutsch viele"
"123 Rad Reifen Rund fahren Auto drehen"
"124 Sache Ding Gegenstand etwas Bezeichnung besitzen"
"125 Fotoalbum Erinnerungen Kamera Buch drucken Bilder"
"126 Schiff Boot Wasser fahren schwimmen Gefährt"
"127 Sommer Jahreszeit Frühling warm Winter Herbst"
"128 Stadt Land Dorf Vorort wohnen viele"
"129 Spaß Vergnügen glücklich Spiel Freude Scherz"
"130 Straße Weg Bürgersteig Adresse Asphalt Autobahn"
"131 Tag Nacht Woche Stunden Mittwoch Monat"
"132 Teller Essen flach Suppe Kuchen Tisch"
"133 Jogginghose Beine anziehen bequem Jeans laufen"
"134 Vogel fliegen Tier Flügel Federn Piepmatz"
"135 Waage Gewicht Sternzeichen Person Küche Gramm"
"136 Wald Bäume Holz Forst Feld wachsen"
"137 Wissen verstehen Kenntnis Bildung Weisheit viel"
"138 Wort Begriff reden erklären Synonym Satz"
"139 Wohnung umziehen Haus Wände Mieten Raum"
"140 Zeitung lesen Bild General Allgemeine Artikel"
"141 Zug fahren Gleis Bahnhof Fahrzeug Schienen"
"142 Zahl Nummer Mathe eins rechnen Ziffer"
"143 Blödsinn Mist Quatsch Unsinn erzählen wahr"
"144 Anhängsel Freund Begleitung Umgangssprachlich Bezeichnung Person"
"145 Hüftgold Speck Rippen Dick Bauch Fett"
"146 Quadratlatschen Schuhe groß viereck Füße gehen"
"147 Ratzefummel Radierer Synonym Bleistift wegmachen Gummi"
"148 Waschbrettbauch Sixpack Muskeln Körper trainiert Wampe"
"149 Quietscheente Badewanne Tier gelb Gummi Spielzeug"
"150 Tollpatsch ungeschickt jemand Person Mensch Pechvogel"
"151 Trantüte langsam träge Mensch Lahmarsch Schnarchnase"
"152 Schwitzkasten Würgegriff Unterarm Hals festhalten Kämpfen"
"153 Kaulquappe Frosch Babys Nachwuchs Wasser Larven"
"154 Schnappsidee Einfall Blöd Alkohol seltsam unsinnig"
"155 Glückspilz Symbol Kleeblatt Gemüse Sonntagskind Boden"
"156 Feuerzeug anzünden Flamme Streichholz Zigarette Kerze"
"157 Grenze Land Markierung trennen Rand geographisch"
"158 Staubsauger Schmutz Dreck Putzen Boden sauber"
"159 Shisha rauchen Bar Wasserdampf Pfeife Tabak"
"160 Fernseher gucken Film Gerät TV Bildschirm"
"161 Fernbedienung TV Anschalten Lautstärke Tasten Hand"
"162 Ordner Akten Papier Blätter Lochen Dokumente"
"163 Schublade Aufbewahren Öffnen Kommode Nachttisch Griff"
"164 Klingel Besuch Haustür Ding Dong Klopfen reinlassen"
"165 Schneemann Kugel Möhre drei Winter kalt"
"166 Fingernagel Hand lackieren schneiden Fuß feilen"
"167 Nagellack Finger Füße bunt Hand malen"
"168 Arzt Krank untersuchen Blutabnahme impfen Beruf"
"169 Krankenhaus Arzt Schwester Notaufnahme Verletzung Operation"
"170 Bauchnabel Loch Körper Mitte Schnur Geburt"
"171 Stock Ast Baum Holz Wald wandern"
"172 Alkohol trinken Bier Wein Promille Schnaps"
"173 Bilderrahmen Foto aufhängen Wand Erinnerung aufstellen"
"174 SMS schreiben Handy früher Whatsapp Nachricht"
"175 Serie Film gucken Netflix Folge Staffel"
"176 Türklinke öffnen drücken abschließen Hand rein"
"177 Flugzeug Urlaub fliegen Luft Terminal Turbine"
"178 Lautsprecher hören Box Musik Bass Durchsage"
"179 Waffel backen Herzchen Teig Kirschen Essen"
"180 Brille Gläser sehen Gestell Gesicht Augen"
"181 Dekoration schön einrichten Frauen Weihnachten Kerzen"
"182 Staubfänger Dekoration unnötig herumstehen nutzlos dreckig"
"183 Adventskalender Dezember Weihnachten 24 Türchen Tag"
"184 Wurst Fleisch Brotbelag Käse Abendessen Salami"
"185 Vegetarier essen Fleisch Tofu Gemüse Vegan"
"186 Zahn putzen Zahnpasta Zahnbürste Kieferorthopäde Karies"
"187 Deodorant Tag Schweiß Achsel stinken Parfüm"
"188 Zopf Mädchen flechten binden hoch Haargummi"
"189 Süßigkeiten Gummibärchen Schokolade Zucker Bonbon essen"
"190 Pflaster Blut Wunde verletzen kleben Trost"
"191 Wimper Augenbraue Mascara schminken Gesicht Haar"
"192 Frühstück Morgens Essen Brunch Müsli Brötchen"
"193 Mäppchen Stifte Schule Ranzen Füller Kugelschreiber"
"194 Blitz Gewitter Donner hell Licht Himmel"
"195 BaumstammWald Ast Floß Holz Zweig"
"196 Handgelenk umgeknickt bewegen Arm Armband Uhr"
"197 Kapuze Jacke Pullover Sweatshirt Kopf Regen"
"198 Steckdose Strom Kabel Wand Adapter aufladen"
"199 Gewalt Krieg Lösung Prügelei Schlagen Brutal"
"200 Zufall würfeln Wahrscheinlichkeit ungewiss Los voraussehen"
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
{ {
"name": "tabooh", "name": "tabooh",
"version": "2.2.1", "version": "2.2.2",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"start": "ng serve", "start": "ng serve",
......
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
<br> <br>
<div data-aos="zoom-out-right" data-aos-duration="250"> <div data-aos="zoom-out-right" data-aos-duration="250">
<mat-card class="transparent"> <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-subtitle>Zuletzt geändert am: 11.04.2021</mat-card-subtitle>
<mat-card-content> <mat-card-content>
<button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button> <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<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> <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
</button> </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> </div>
<br *ngIf="view === 'mobileView'"> <br *ngIf="view === 'mobileView'">
<br *ngIf="view === 'mobileView'"> <br *ngIf="view === 'mobileView'">
...@@ -30,17 +30,17 @@ ...@@ -30,17 +30,17 @@
<mat-icon color = "white" aria-hidden="false">autorenew</mat-icon> <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon>
</button> </button>
</div> </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"> <div class="CenterText">
<h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2> <h2 *ngIf="view === 'mobileView'" class="textMobileView">{{membership}}</h2>
<h2 *ngIf="view !== 'mobileView'">{{membership}}</h2> <h2 *ngIf="view !== 'mobileView'">{{membership}}</h2>
</div> </div>
</div> </div>
<button mat-raised-button class = "{{red}}" (click)="joinTeam('red')"> <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>
<button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')"> <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> </button>
</mat-card> </mat-card>
<br> <br>
......
...@@ -24,6 +24,10 @@ th{ ...@@ -24,6 +24,10 @@ th{
background-color: rgba(200, 0, 0, 0.3); background-color: rgba(200, 0, 0, 0.3);
} }
.floatLeft {
float: left;
}
.bluefont{ .bluefont{
margin: 5px; margin: 5px;
color: rgba(0,0,139); color: rgba(0,0,139);
...@@ -50,7 +54,11 @@ th{ ...@@ -50,7 +54,11 @@ th{
align-items: center; align-items: center;
} }
.newStartButtonLeft{float:left;width:100px;} .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;} .CenterText{margin:0 auto;width:250px;}
.spinner-wrapper { .spinner-wrapper {
...@@ -74,7 +82,3 @@ th{ ...@@ -74,7 +82,3 @@ th{
.textMobileView { .textMobileView {
display: inline; display: inline;
} }
.peopleRight {
float: right;
}
...@@ -27,6 +27,7 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -27,6 +27,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
isActiveRound = false; isActiveRound = false;
red = 'choose'; red = 'choose';
blue = 'choose'; blue = 'choose';
disablePlayersOnlineBadges = true;
totalPlayers = 1; totalPlayers = 1;
redPlayers = 0; redPlayers = 0;
bluePlayers = 0; bluePlayers = 0;
...@@ -133,6 +134,7 @@ export class OverviewComponent implements OnInit, OnDestroy { ...@@ -133,6 +134,7 @@ export class OverviewComponent implements OnInit, OnDestroy {
this.subSessionPlayers = this.socketDataService.getSessionPlayers(this.sessionName) this.subSessionPlayers = this.socketDataService.getSessionPlayers(this.sessionName)
.pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => { .pipe(takeUntil(this.ngUnsubscribe)).subscribe(data => {
if (data.hasOwnProperty('total')) { if (data.hasOwnProperty('total')) {
this.disablePlayersOnlineBadges = false;
this.totalPlayers = data.total; this.totalPlayers = data.total;
this.redPlayers = data.red; this.redPlayers = data.red;
this.bluePlayers = data.blue; this.bluePlayers = data.blue;
......
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