Skip to content

Commit

Permalink
Merge pull request #23 from iptch/feature/92-design
Browse files Browse the repository at this point in the history 
improve design
  • Loading branch information
@ihaveamicroservice
ihaveamicroservice authored Apr 19, 2024
2 parents 979eeb1 + 2af08a5 commit 90d3333
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 58 deletions.
2 changes: 2 additions & 0 deletions src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ import { QuizEffects } from './state/quiz/quiz.effects';
import { PictureEffects } from './state/picture/picture.effects';
import { DeletionEffects } from './state/deletion/deletion.effects';
import { MAT_DATE_LOCALE } from '@angular/material/core';
import { MatTabsModule } from '@angular/material/tabs';

registerLocaleData(localeDeCh);

Expand Down Expand Up @@ -205,6 +206,7 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
MatInputModule,
MatProgressBarModule,
NgOptimizedImage,
MatTabsModule,
],
providers: [
{
Expand Down
126 changes: 68 additions & 58 deletions src/app/components/dashboard/dashboard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,73 +4,83 @@
<app-panel *ngIf="error$ | async">
<app-alert [message]="(error$ | async)!"></app-alert>
</app-panel>
<ng-container *ngIf="!((loading$ | async) || (error$ | async))">
<div *ngIf="dashboard$ | async as dashboard" class="m-2 space-y-2">
<app-title>Chärtli</app-title>
<div class="grid grid-cols-2 gap-2">
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Meine Chärtli</div>
<div class="text-4xl">
{{ dashboard.myUniqueCardsCount }} /
{{ dashboard.allCardsCount }}
<mat-tab-group
*ngIf="!((loading$ | async) || (error$ | async))"
mat-align-tabs="center"
animationDuration="0ms"
>
<mat-tab label="Chärtli">
<div *ngIf="dashboard$ | async as dashboard" class="m-2 space-y-2">
<div class="grid grid-cols-2 gap-2">
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Meine Chärtli</div>
<div class="text-4xl">
{{ dashboard.myUniqueCardsCount }} /
{{ dashboard.allCardsCount }}
</div>
<div class="pt-2">
<mat-progress-bar
mode="determinate"
value="{{ progress$ | async }}"
color="primary"
></mat-progress-bar>
</div>
</div>
<div class="pt-2">
<mat-progress-bar
mode="determinate"
value="{{ progress$ | async }}"
color="primary"
></mat-progress-bar>
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Mein Rang</div>
<div class="text-4xl">
{{ myRank$ | async }} / {{ totalUsers$ | async }}
</div>
</div>
</div>
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Mein Rang</div>
<div class="text-4xl">
{{ myRank$ | async }} / {{ totalUsers$ | async }}
</div>
<div class="text-light-pink">Top 10</div>
<ol class="list-decimal list-inside">
<li *ngFor="let ranking of topRanking$ | async">
{{ ranking.displayName }}
<span class="text-light-blue"
>[{{ ranking.uniqueCardsCount }}]</span
>
</li>
</ol>
</div>
</div>
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Top 10</div>
<ol class="list-decimal list-inside">
<li *ngFor="let ranking of topRanking$ | async">
{{ ranking.displayName }}
<span class="text-light-blue">[{{ ranking.uniqueCardsCount }}]</span>
</li>
</ol>
</div>
<div *ngIf="dashboard.totalCardQuantity" class="bg-dark-gray p-2">
<div class="text-light-pink">Total ausgeschüttete Chärtli</div>
<div class="text-4xl">{{ dashboard.totalCardQuantity | number }}</div>
</div>
<div *ngIf="dashboard.lastDistribution" class="bg-dark-gray p-2">
<div class="text-light-pink">Jüngste Ausschüttung</div>
<div class="text-lg">
{{ dashboard.lastDistribution | date: 'dd. LLLL yyyy, HH:mm' }} Uhr
<div *ngIf="dashboard.totalCardQuantity" class="bg-dark-gray p-2">
<div class="text-light-pink">Total ausgeschüttete Chärtli</div>
<div class="text-4xl">{{ dashboard.totalCardQuantity | number }}</div>
</div>
<div *ngIf="dashboard.lastDistribution" class="bg-dark-gray p-2">
<div class="text-light-pink">Jüngste Ausschüttung</div>
<div class="text-lg">
{{ dashboard.lastDistribution | date: 'dd. LLLL yyyy, HH:mm' }} Uhr
</div>
</div>
</div>
<app-title>Quiz</app-title>
<div class="grid grid-cols-2 gap-2">
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Meine Punkte</div>
<div class="text-4xl">
{{ (userRankingQuiz$ | async)?.quizScore }}
</mat-tab>
<mat-tab label="Quiz">
<div *ngIf="dashboard$ | async as dashboard" class="m-2 space-y-2">
<div class="grid grid-cols-2 gap-2">
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Meine Punkte</div>
<div class="text-4xl">
{{ (userRankingQuiz$ | async)?.quizScore }}
</div>
</div>
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Mein Rang</div>
<div class="text-4xl">
{{ (userRankingQuiz$ | async)?.rank }} / {{ totalUsers$ | async }}
</div>
</div>
</div>
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Mein Rang</div>
<div class="text-4xl">
{{ (userRankingQuiz$ | async)?.rank }} / {{ totalUsers$ | async }}
</div>
<div class="text-light-pink">Top 10</div>
<ol class="list-decimal list-inside">
<li *ngFor="let ranking of topRankingQuiz$ | async">
{{ ranking.displayName }}
<span class="text-light-blue">[{{ ranking.quizScore }}]</span>
</li>
</ol>
</div>
</div>
<div class="bg-dark-gray p-2">
<div class="text-light-pink">Top 10</div>
<ol class="list-decimal list-inside">
<li *ngFor="let ranking of topRankingQuiz$ | async">
{{ ranking.displayName }}
<span class="text-light-blue">[{{ ranking.quizScore }}]</span>
</li>
</ol>
</div>
</div>
</ng-container>
</mat-tab>
</mat-tab-group>
9 changes: 9 additions & 0 deletions src/styles/_overrides.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,12 @@
.mat-mdc-dialog-container .mat-mdc-dialog-content {
padding: 16px !important;
}

// Button toggle
.mat-button-toggle-appearance-standard {
background-color: #1e1e1e !important;

&.mat-button-toggle-checked {
background-color: #0093d9 !important;
}
}

0 comments on commit 90d3333

Please sign in to comment.