Commit 897c9a99 authored by Dennis Willers's avatar Dennis Willers 🏀

Add Mobile View

parent d80a0345
Pipeline #347 passed with stages
in 5 minutes and 26 seconds
<div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
<app-header>
</app-header>
<div fxFlex>
<div class="{{view}}" fxFlex>
<router-outlet></router-outlet>
</div>
<app-footer>
......
......@@ -3,3 +3,17 @@ html, body {
box-sizing: border-box;
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;
}
import {Component, OnInit, Output} from '@angular/core';
import {io} from 'socket.io-client';
import {environment} from '../environments/environment';
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
......@@ -9,7 +7,17 @@ import {environment} from '../environments/environment';
})
export class AppComponent implements OnInit {
title = 'Tabu';
view = 'desktopView';
isMobileResolution = false;
ngOnInit(): void {
this.isMobileResolution = window.innerWidth < 768;
if (this.isMobileResolution) {
console.log('MobileView');
this.view = 'mobileView';
} else {
console.log('DesktopView');
this.view = 'desktopView';
}
}
}
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
<mat-card class="transparent">
<mat-card class="transparent">
<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
</h3>
</mat-card>
<br>
<mat-progress-spinner color="primary" mode="determinate" value="value">
</mat-progress-spinner>
</div>
</mat-card>
<br>
<mat-progress-spinner color="primary" mode="determinate" value="value">
</mat-progress-spinner>
<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>
<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
</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-title>
{{cardInfo.solution}}
......
......@@ -20,14 +20,13 @@ th{
.timer{
position:relative;
top: -60px;
left: 35px;
font-size: x-large;
font-weight: bold;
}
.TimerLeft
{
top: -150px; float:right;width:100px;
top: -2em; float:right;width:100px;
}
body {
......@@ -47,3 +46,8 @@ body {
color: rgba(200, 0, 0);
}
.center{
margin-left: auto;
margin-right: auto;
}
......@@ -14,6 +14,7 @@ import {takeUntil} from 'rxjs/operators';
styleUrls: ['./game.component.scss']
})
export class GameComponent implements OnInit, OnDestroy {
isMobileResolution = false;
private ngUnsubscribe = new Subject();
subNewCard: any;
......@@ -57,6 +58,7 @@ export class GameComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.isMobileResolution = window.innerWidth < 768;
this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName')).toLowerCase();
this.team = String(params.get('team'));
......
<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!
<br>
<br>
......@@ -23,7 +22,6 @@
</mat-progress-spinner>
<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
</mat-card>
</div>
</mat-card>
<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>
Impressum
</mat-card-title>
......@@ -24,11 +23,11 @@
E-Mail: dennis@willers.digital<br>
</p>
</mat-card-content>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>
<h2>Haftungsausschluss:</h2>
</mat-card-title>
......@@ -54,22 +53,4 @@
Impressum vom <a href="https://www.impressum-generator.de">Impressum Generator</a> der <a href="https://www.kanzlei-hasselbach.de/standorte/bonn/">Kanzlei Hasselbach, Bonn</a>
</mat-card-content>
</mat-card>
</div>
<!--div class='impressum'><h1>Impressum</h1><p>Angaben gemäß § 5 TMG</p><p>Dennis Willers <br>
Waldstraße 1<br>
53842 Troisdorf <br>
</p><p> <strong>Vertreten durch: </strong><br>
Dennis Willers<br>
Isabell Heider<br>
</p><p><strong>Kontakt:</strong> <br>
Telefon: 02241-3963477<br>
E-Mail: <a href='mailto:dennis@willers.digital'>dennis@willers.digital</a></br></p><p><strong>Haftungsausschluss: </strong><br><br><strong>Haftung für Inhalte</strong><br><br>
Die Inhalte unserer Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte können wir jedoch keine Gewähr übernehmen. Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.<br><br><strong>Urheberrecht</strong><br><br>
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.<br><br><strong>Datenschutz</strong><br><br>
Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf unseren Seiten personenbezogene Daten (beispielsweise Name, Anschrift oder eMail-Adressen) erhoben werden, erfolgt dies, soweit möglich, stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte weitergegeben. <br>
Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich. <br>
Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.<br>
</p><br>
Impressum vom <a href="https://www.impressum-generator.de">Impressum Generator</a> der <a href="https://www.kanzlei-hasselbach.de/standorte/bonn/">Kanzlei Hasselbach, Bonn</a> </div-->
</mat-card>
<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="newStartButtonLeft">
<button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
......@@ -15,11 +14,11 @@
<button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
<mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
</button>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>Spielstand</mat-card-title>
<mat-card-content>
<br>
......@@ -45,5 +44,5 @@
<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>
</div>
</mat-card>
<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>
<h2>Ideal im Lockdown!</h2>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<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-content>
......@@ -21,5 +20,4 @@
<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>
</mat-card-actions>
</mat-card>
</div>
</mat-card>
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