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

Refactor table and pagination UI components.

Browse Source 
Replaced inline styles with reusable classes for better maintainability. Improved pagination button styling and added transitions to the history table header for a polished user experience. Updated SCSS variables for consistent naming conventions.
This commit is contained in:
Peter 2025-04-12 21:55:25 +02:00
parent a4d8fc07e9
commit 13122559db
5 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/bans/bans.component.html
View File

@ -30,12 +30,12 @@
</div> </div>
<div class="historySearchContainer"> <div class="historySearchContainer">
<input class="historySearch" <input class="historySearch"
type="text" type="search"
placeholder="Search.." placeholder="Search.."
[(ngModel)]="searchTerm" [(ngModel)]="searchTerm"
(input)=" filterNames()" (input)=" filterNames()"
> >
<button class="searchButton" (click)="search()">Search</button> <button type="submit" class="searchButton" (click)="search()">Search</button>
<div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm"> <div class="search-dropdown" *ngIf="filteredNames.length > 0 && searchTerm">
<div <div
class="dropdown-item" class="dropdown-item"
@ -52,19 +52,19 @@
</div> </div>
<div class="changePageButtons"> <div class="changePageButtons">
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)" <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
(click)="setPage(0)"> (click)="setPage(0)" class="pageButton">
First page First page
</button> </button>
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)" <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
(click)="previousPage()"> (click)="previousPage()" class="pageButton">
Previous page Previous page
</button> </button>
<button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())" <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
(click)="nextPage()"> (click)="nextPage()" class="pageButton">
Next page Next page
</button> </button>
<button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())" <button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())"
(click)="setPage(getMaxPage())"> (click)="setPage(getMaxPage())" class="pageButton">
Last page Last page
</button> </button>
</div> </div>

9
frontend/src/app/bans/bans.component.scss
View File

@ -77,3 +77,12 @@ main .container {
.dropdown-item:hover { .dropdown-item:hover {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
.changePageButtons {
margin: 0 auto;
padding: 10px 0 30px 0;
}
.pageButton {
margin: 0 5px 0 5px;
}

2
frontend/src/app/bans/history/history.component.html
View File

@ -4,7 +4,7 @@
<ng-container *ngIf="history.length > 0"> <ng-container *ngIf="history.length > 0">
<table [cellSpacing]="0"> <table [cellSpacing]="0">
<div style="width: 1300px; background-color: #dadada;"> <div class="historyTableHead">
<thead> <thead>
<tr> <tr>
<th class="historyType">Type</th> <th class="historyType">Type</th>

12
frontend/src/app/bans/history/history.component.scss
View File

@ -2,6 +2,7 @@ table {
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
border-collapse: collapse; border-collapse: collapse;
border-radius: 5px;
} }
thead { thead {
@ -59,6 +60,14 @@ table tr td {
vertical-align: middle; vertical-align: middle;
} }
.historyTableHead {
width: 1300px;
background-color: var(--history-table-head-color);
transition: all 100ms cubic-bezier(0.55, 0.085, 0.68, 0.53), 0.5s background ease;
border-radius: 5px;
box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2), 0 6px 20px -8px rgba(0, 0, 0, 0.19);
}
.historyType { .historyType {
max-width: 100%; max-width: 100%;
width: 80px; width: 80px;
@ -97,6 +106,3 @@ img {
.historyDate { .historyDate {
width: 170px; width: 170px;
} }
.changePageButtons {
}

4
frontend/src/styles.scss
View File

@ -22,7 +22,7 @@
--navlink-color: #4B4B4B; --navlink-color: #4B4B4B;
--link-color: #1F9BDE; --link-color: #1F9BDE;
--history-link-color: #A3A3A3; --history-link-color: #A3A3A3;
--history-table-head: #DADADA; --history-table-head-color: #DADADA;
--hamburger: #232323; --hamburger: #232323;
--dropdown-color: #DFDFDF; --dropdown-color: #DFDFDF;
--footer-color: #202020; --footer-color: #202020;
@ -40,7 +40,7 @@
--navlink-color: #FFFFFF; --navlink-color: #FFFFFF;
--link-color: #20729E; --link-color: #20729E;
--history-link-color: #4A4A4A; --history-link-color: #4A4A4A;
--history-table-head: #5C5C5C; --history-table-head-color: #4A4A4A;
--hamburger: #CDCDCD; --hamburger: #CDCDCD;
--dropdown-color: #303233; --dropdown-color: #303233;
--footer-color: #242526; --footer-color: #242526;