Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(dashboard): style games section #11

Merged
merged 1 commit into from
Jan 27, 2024
Merged

feat(dashboard): style games section #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions apps/dashboard/src/app/games/components/games-list/games-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,41 @@
<div class="flex flex-col flex-grow">
<div class="flex flex-row h-20 px-5 gap-5 bg-blue-900">
<div class="w-52 flex flex-col justify-center">
<p class="text-white">Player One</p>
<div class="flex flex-row h-66px bg-sad-input border-sad-active border-b">
<div class="w-3/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs">Player One</p>
</div>
<div class="w-52 flex flex-col justify-center">
<p class="text-white">Player Two</p>
<div class="w-3/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs">Player Two</p>
</div>
<div class="w-24 flex flex-col justify-center">
<p class="text-white whitespace-nowrap">Game Type</p>
<div class="w-2/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">Game Type</p>
</div>
<div class="w-24 flex flex-col justify-center">
<p class="text-white whitespace-nowrap">Race To</p>
<div class="w-2/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">Race To</p>
</div>
<div class="flex flex-col flex-grow justify-center">
<p class="text-white whitespace-nowrap">Date</p>
<div class="w-2/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">Date</p>
</div>
</div>
<ng-container *ngIf="loaded; else loading">
<div class="flex flex-row h-20 px-5 gap-5" *ngFor="let game of games; even as isEven; odd as isOdd" [ngClass]="{ 'bg-gray-600': isEven, 'bg-gray-700': isOdd }">
<div class="w-52 flex flex-col justify-center">
<p class="text-white whitespace-nowrap">
<div class="flex flex-row h-66px" *ngFor="let game of games; even as isEven; odd as isOdd" [ngClass]="{ 'bg-sad-table-even': isEven, 'bg-sad-table-odd': isOdd }">
<div class="w-3/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">
{{ game?.player_one?.name }} <span>({{ game?.score_one }})</span>
</p>
</div>
<div class="w-52 flex flex-col justify-center">
<p class="text-white whitespace-nowrap">
<div class="w-3/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">
{{ game?.player_two?.name }} <span>({{ game?.score_two }})</span>
</p>
</div>
<div class="w-24 flex flex-col justify-center">
<p class="text-white whitespace-nowrap">{{ game?.type }}</p>
<div class="w-2/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">{{ game?.type }}</p>
</div>
<div class="w-24 flex flex-col justify-center">
<p class="text-white whitespace-nowrap">{{ game?.race_to }}</p>
<div class="w-2/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">{{ game?.race_to }}</p>
</div>
<div class="flex flex-col flex-grow justify-center">
<p class="text-white whitespace-nowrap">{{ game?.updated_at | date: 'medium' }}</p>
<div class="w-2/12 flex flex-col justify-center items-start px-10">
<p class="text-white uppercase text-xs whitespace-nowrap">{{ game?.updated_at | date: 'medium' }}</p>
</div>
</div>
</ng-container>
Expand Down
19 changes: 13 additions & 6 deletions apps/dashboard/src/app/games/containers/games-list/games-list-page.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
<div class="py-2.5 px-5 flex flex-col">
<div class="pb-5 flex flex-row">
<h1 class="text-gray-50 uppercase text-4xl">Games</h1>
<div class="p-50px flex flex-col bg-gradient-to-br from-grad-start to-grad-stop min-h-screen" *ngIf="vm$ | async as vm">
<div class="flex flex-row justify-between items-center h-66px bg-sad-section-title rounded-t">
<h1 class="text-white uppercase text-4xl px-10">Games</h1>
<div class="flex flex-col w-full items-end px-10">
<div class="flex flex-row flex-grow w-full justify-end gap-10">
<!-- <dashboard-search class="flex flex-col flex-grow w-full max-w-sm"></dashboard-search> -->
<!-- <dashboard-pagination class="flex flex-col" [page]="vm.page" [count]="vm.count" [perPage]="perPage" (pageChange)="onPageChange($event)"></dashboard-pagination> -->
</div>
</div>
</div>
<div *ngIf="vm$ | async as vm">
<!-- pagination -->
<div>
<pool-overlay-games-list [loaded]="vm.loaded" [games]="vm.games"></pool-overlay-games-list>
<!-- pagination -->
</div>
<div class="flex flex-row h-66px bg-sad-section-title border-sad-active border-t border-b justify-end items-center px-10">
<!-- <dashboard-pagination class="flex flex-col" [page]="vm.page" [count]="vm.count" [perPage]="perPage" (pageChange)="onPageChange($event)"></dashboard-pagination> -->
</div>
</div>
Loading