PlutoDev/Doppelkopf-Stats-Frontend
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Some button styling

Browse Source
This commit is contained in:
Patrick Müller 2022-09-10 19:33:55 +02:00
parent bed8992ddd
commit a9aca1351c
Signed by: Paddy
GPG Key ID: 37ABC11275CAABCE
4 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/add-game/add-game.component.html
View File

@ -4,14 +4,14 @@
<!-- The following divs get displayed one after another, kinda wizard-like --> <!-- The following divs get displayed one after another, kinda wizard-like -->
<div id="which-players" class="visible-{{this.currentPage === 0}}"> <div id="which-players" class="visible-{{this.currentPage === 0}}">
<p>Select the active players for the game:</p> <p>Select the active players for the game:</p>
<div class="active-{{isPlayerActive(player)}}" *ngFor="let player of potentialPlayers" (click)="togglePlayer(player)">{{player.firstName}}</div> <div class="togglebtn active-{{isPlayerActive(player)}}" *ngFor="let player of potentialPlayers" (click)="togglePlayer(player)">{{player.firstName}}</div>
<p id="player-amount-warn" *ngIf="not4Players()">Illegal amount of players!</p> <p id="player-amount-warn" *ngIf="not4Players()">Illegal amount of players!</p>
<button (click)="switchToNextPage()" [disabled]="not4Players()">Next</button> <button (click)="switchToNextPage()" [disabled]="not4Players()">Next</button>
</div> </div>
<div id="announcements" class="visible-{{this.currentPage === 1}}"> <div id="announcements" class="visible-{{this.currentPage === 1}}">
<p>Players: {{getPlayerNamesAsString()}}</p> <p>Players: {{getPlayerNamesAsString()}}</p>
<p>Select the announcements for this game:</p> <p>Select the announcements for this game:</p>
<div class="active-{{isAnnouncementActive(announcement)}}" *ngFor="let announcement of getAllPossibleAnnouncements()" (click)="toggleAnnouncement(announcement)">{{announcement.toString()}}</div> <div class="togglebtn active-{{isAnnouncementActive(announcement)}}" *ngFor="let announcement of getAllPossibleAnnouncements()" (click)="toggleAnnouncement(announcement)">{{announcement.toString()}}</div>
<p id="announcement-warn" *ngIf="!checkAnnouncementsValid()">Illegal set of announcements!</p> <p id="announcement-warn" *ngIf="!checkAnnouncementsValid()">Illegal set of announcements!</p>
<button (click)="switchToNextPage()" [disabled]="!checkAnnouncementsValid()">Next</button> <button (click)="switchToNextPage()" [disabled]="!checkAnnouncementsValid()">Next</button>
</div> </div>
@ -19,7 +19,7 @@
<p>Players: {{getPlayerNamesAsString()}}</p> <p>Players: {{getPlayerNamesAsString()}}</p>
<p>Highest Announcements: {{getHighestAnnouncements()}}</p> <p>Highest Announcements: {{getHighestAnnouncements()}}</p>
<p>Please select the elder(s):</p> <p>Please select the elder(s):</p>
<div class="elder-player-{{isPlayerElder(player)}}" *ngFor="let player of actualPlayers" (click)="toggleElderPlayer(player)">{{player.firstName}}</div> <div class="togglebtn elder-player-{{isPlayerElder(player)}}" *ngFor="let player of actualPlayers" (click)="toggleElderPlayer(player)">{{player.firstName}}</div>
<p id="team-warn" *ngIf="!checkValidTeamAssignment()">Illegal game teams!</p> <p id="team-warn" *ngIf="!checkValidTeamAssignment()">Illegal game teams!</p>
<button (click)="switchToNextPage()" [disabled]="!checkValidTeamAssignment()">Next</button> <button (click)="switchToNextPage()" [disabled]="!checkValidTeamAssignment()">Next</button>
</div> </div>

15
src/app/components/add-game/add-game.component.scss
View File

@ -12,11 +12,11 @@
color: $text; color: $text;
} }
.active-true { .active-true, .elder-player-true {
color: $active; color: $active;
} }
.active-false { .active-false, .elder-player-false {
color: $inactive; color: $inactive;
} }
@ -32,10 +32,9 @@
display: inherit; display: inherit;
} }
.elder-player-false { .togglebtn {
color: $inactive; text-align: center;
} max-width: 10em;
background-color: $button;
.elder-player-true { margin: .5em;
color: $active;
} }

2
src/app/components/header/header.component.html
View File

@ -1,5 +1,5 @@
<div id="header"> <div id="header">
<p id="header-title">Doppelkopf-Stats</p> <p id="header-title" (click)="navigate('/')">Doppelkopf-Stats</p>
<span id="menu"> <span id="menu">
<div id="menu-desktop"> <div id="menu-desktop">
<div (click)="navigate('/')">Home</div> <div (click)="navigate('/')">Home</div>

1
src/styles.scss
View File

@ -6,6 +6,7 @@ $accent: #E34234;
$active: green; $active: green;
$inactive: red; $inactive: red;
$warn: orange; $warn: orange;
$button: #2b2b2b;
/* Global vars */ /* Global vars */
$header_height: 3em; $header_height: 3em;