c8h4/beerbrawl
1
0
Fork 0
mirror of https://codeberg.org/beerbrawl/beerbrawl.git synced 2024-09-23 05:40:51 +02:00
Code Wiki Activity

refactor(#112): fixed padding/margin between header and content stacking

Browse source 
also use header component in components where applicable
This commit is contained in:
FreshGuy32 2024-06-05 16:44:35 +00:00
parent 7b862a44fb
commit b3238d2dad
12 changed files with 41 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/app.module.ts
View file

@ -40,6 +40,7 @@ import { MatTable } from '@angular/material/table';
import { TournamentEditComponent } from './components/tournament/tournament-edit/tournament-edit.component';
import { NgxMatTimepickerComponent, NgxMatTimepickerDirective } from 'ngx-mat-timepicker';
import { MatDatepicker } from '@angular/material/datepicker';
import { HeaderCardComponent } from './components/header-card/header-card.component';
@NgModule({
// Keep alphabetically sorted!
@ -89,6 +90,7 @@ import { MatDatepicker } from '@angular/material/datepicker';
NgxMatTimepickerComponent,
NgxMatTimepickerDirective,
MatDatepicker,
HeaderCardComponent,
],
providers: [
httpInterceptorProviders,

12
frontend/src/app/components/beer-pong-table-overview/beer-pong-table-overview.component.html
View file

@ -1,12 +1,6 @@
<mat-card>
<div class="top-bar">
<div class="row">
<div class="title">Tournament Tables Overview</div>
<button mat-raised-button color="primary" (click)="backToOverview()">Back to Overview</button>
</div>
<!-- <mat-divider></mat-divider> -->
</div>
</mat-card>
<app-header-card [title]="'Tournament Tables Overview'">
<button mat-raised-button color="primary" (click)="backToOverview()">Back to Overview</button>
</app-header-card>
<div class="table-container" data-cy="beer-pong-tables-list">
<table mat-table [dataSource]="tables()" class="mat-elevation-z8">

25
frontend/src/app/components/beer-pong-table-overview/beer-pong-table-overview.component.scss
View file

@ -1,28 +1,5 @@
mat-card {
margin: var(--spacing2);
}
.top-bar {
display: flex;
flex-direction: column;
padding: var(--spacing2);
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: var(--spacing2);
}
.title {
font-size: 2rem;
font-weight: normal;
}
.table-container {
padding: var(--spacing2);
padding: 0px var(--spacing2) var(--spacing2) var(--spacing2);
& > table {
margin-bottom: var(--spacing2);

2
frontend/src/app/components/beer-pong-table-overview/beer-pong-table-overview.component.ts
View file

@ -21,6 +21,7 @@ import { MatCard } from '@angular/material/card';
import { ConfirmationService } from '../../services/confirmation.service';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { HeaderCardComponent } from '../header-card/header-card.component';
@Component({
selector: 'app-beer-pong-table-overview',
@ -44,6 +45,7 @@ import { Location } from '@angular/common';
MatChipsModule,
MatChipTrailingIcon,
MatCard,
HeaderCardComponent,
],
})
export class BeerPongTableOverviewComponent implements OnInit {

11
frontend/src/app/components/tournament-teams/tournament-teams.component.html
View file

@ -1,11 +1,6 @@
<mat-card>
<div class="top-bar">
<div class="row">
<div class="title">{{ this.tournament?.name ?? 'Tournament' }} Teams Overview</div>
<button mat-raised-button color="primary" [routerLink]="'..'">Back to Overview</button>
</div>
</div>
</mat-card>
<app-header-card [title]="this.tournament?.name ?? 'Tournament'">
<button mat-raised-button color="primary" [routerLink]="'..'">Back to Overview</button>
</app-header-card>
@if (teams().length > 0) {
<div class="table-container" data-cy="beer-pong-tables-list">

26
frontend/src/app/components/tournament-teams/tournament-teams.component.scss
View file

@ -10,30 +10,6 @@ mat-chip.chip-warn {
background-color: var(--color-background-warn);
}
.top-bar {
display: flex;
flex-direction: column;
padding: var(--spacing2);
}
mat-card {
margin: var(--spacing2);
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: var(--spacing2);
width: 100%;
box-sizing: border-box;
}
.title {
font-size: 2rem;
font-weight: normal;
}
.table-container {
padding: var(--spacing2);
padding: 0px var(--spacing2) var(--spacing2) var(--spacing2);
}

2
frontend/src/app/components/tournament-teams/tournament-teams.component.ts
View file

@ -23,6 +23,7 @@ import { MatCard } from '@angular/material/card';
import { RouterLink, RouterModule } from '@angular/router';
import { HttpErrorResponse } from '@angular/common/http';
import { TournamentDialogsService } from 'src/app/services/tournament-dialogs.service';
import { HeaderCardComponent } from '../header-card/header-card.component';
@Component({
selector: 'app-tournament-teams',
@ -47,6 +48,7 @@ import { TournamentDialogsService } from 'src/app/services/tournament-dialogs.se
RouterModule,
RouterLink,
MatTooltip,
HeaderCardComponent,
],
templateUrl: './tournament-teams.component.html',
styleUrl: './tournament-teams.component.scss',

2
frontend/src/app/components/tournament/tournament-overview/tournament-overview.component.scss
View file

@ -7,7 +7,7 @@
}
.header-card {
margin: var(--spacing2);
margin: var(--spacing2) var(--spacing2) 0px var(--spacing2);
padding: var(--spacing2);
}

6
frontend/src/app/components/tournament/tournament-qualification-phase/tournament-qualification-phase.component.html
View file

@ -1,7 +1,7 @@
<app-header-card [title]="'Qualification Round'" class="header">
<button mat-raised-button color="primary">Start KO</button>
</app-header-card>
<div class="content">
<app-header-card [title]="'Qualification Round'" class="header">
<button mat-raised-button color="primary">Start KO</button>
</app-header-card>
<div class="matches mat-elevation-z8">
@for (match of qualificationMatches(); track match.id) {
<app-qualification-match-line

38
frontend/src/app/components/tournament/tournament-qualification-phase/tournament-qualification-phase.component.scss
View file

@ -1,38 +1,34 @@
.content {
display: grid;
grid-template-areas:
'header header'
'matches score';
grid-template-columns: 3fr 2fr;
column-gap: 1rem;
grid-template-rows: auto 1fr;
column-gap: var(--spacing2);
overflow-y: hidden;
height: 100vh;
}
.header {
grid-area: header;
}
.score-table {
grid-column: 2 / 2;
grid-row: 1;
margin: 1rem 1rem 1rem 0;
height: auto;
grid-area: score;
margin-right: var(--spacing2);
margin-bottom: var(--spacing2);
overflow-y: auto;
}
.matches {
grid-column: 1 / 1;
grid-row: 1;
margin: 1rem 0 1rem 1rem;
}
.matches,
.score-table {
grid-area: matches;
margin-left: var(--spacing2);
margin-bottom: var(--spacing2);
overflow-y: auto;
height: 87vh;
}
.header-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 3rem;
}
.no-matches-container {
padding: 1rem;
display: grid;
justify-items: center;
align-items: center;

17
frontend/src/app/components/tournament/tournaments/tournaments.component.html
View file

@ -1,14 +1,9 @@
<mat-card>
<div class="top-bar">
<div class="row">
<div class="title">All Tournaments</div>
<button mat-raised-button color="primary">
<a [routerLink]="'/tournaments/create'" class="no-decoration">Create Tournament</a>
</button>
</div>
<!-- <mat-divider></mat-divider> -->
</div>
</mat-card>
<app-header-card [title]="'All Tournaments'">
<button mat-raised-button color="primary">
<a [routerLink]="'/tournaments/create'" class="no-decoration">Create Tournament</a>
</button>
</app-header-card>
@for (tournament of getTournaments(); track tournament.name) {
<app-tournament-card
[tournament]="tournament"

23
frontend/src/app/components/tournament/tournaments/tournaments.component.scss
View file

@ -1,23 +0,0 @@
mat-card:has(> div.top-bar) {
margin: var(--spacing2);
}
.top-bar {
display: flex;
flex-direction: column;
width: 100%;
padding: var(--spacing2);
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: var(--spacing1);
width: 100%;
}
.title {
font-size: 2rem;
font-weight: normal;
}