Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination logic to AppealComponent and update layout structure.

Browse Source
This commit is contained in:
stijn
2025-08-05 20:59:22 +02:00
parent fcb64db137
commit 5013b9a204
3 changed files with 134 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/forms/appeal/appeal.component.html
+46 -9
View File
@@ -7,15 +7,52 @@
</app-header>
<main>
<section class="darkmodeSection appeal-container">
<section class="formPage">
<img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
<h1>Punishment Appeal</h1>
<p>We aim to respond within 48 hours.</p>
<button mat-raised-button>
<mat-icon>send</mat-icon>
Minecraft Appeal
</button>
</section>
<div class="form-container">
<div class="pages">
@if (currentPageIndex === 0) {
<section class="formPage">
<img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
<h1>Punishment Appeal</h1>
<p>We aim to respond within 48 hours.</p>
</section>
}
<!-- Page 2 -->
@if (currentPageIndex === 1) {
<section class="formPage">
<h1>Page 2</h1>
<p>This is the second page of the form.</p>
</section>
}
<!-- Page 3 -->
@if (currentPageIndex === 2) {
<section class="formPage">
<h1>Page 3</h1>
<p>This is the third page of the form.</p>
</section>
}
</div>
<!-- Navigation dots -->
<div class="form-navigation">
<button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
<mat-icon>navigate_before</mat-icon>
</button>
@for (i of totalPages; track i) {
<div
class="nav-dot"
[class.active]="i === currentPageIndex"
(click)="goToPage(i)">
</div>
}
<button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
<mat-icon>navigate_next</mat-icon>
</button>
</div>
</div>
</section>
</main>
</div>