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

Add pagination display and update button styling

Browse Source 
Introduce a page number display to the pagination controls for better navigation transparency. Update button styles to use CSS variables for improved theme consistency and maintainability.
This commit is contained in:
Peter 2025-04-18 19:33:54 +02:00
parent 905373093c
commit ee66bdda83
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,6 +62,7 @@
(click)="previousPage()" class="historyPageButton"> (click)="previousPage()" class="historyPageButton">
Previous page Previous page
</button> </button>
<span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
<button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}" <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
[disabled]="!buttonActive(getMaxPage())" [disabled]="!buttonActive(getMaxPage())"
(click)="nextPage()" class="historyPageButton"> (click)="nextPage()" class="historyPageButton">

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

@ -89,7 +89,8 @@ main .container {
border-radius: .25rem; border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0; box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box; box-sizing: border-box;
color: rgba(0, 0, 0, 0.85); background-color: var(--history-page-button-background);
color: var(--font-color);
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
font-family: 'opensans', sans-serif; font-family: 'opensans', sans-serif;
@ -114,7 +115,7 @@ main .container {
.historyPageButton.active:focus { .historyPageButton.active:focus {
border-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
color: rgba(0, 0, 0, 0.65); color: var(--font-color-hover);
} }
.historyPageButton.active:hover { .historyPageButton.active:hover {
@ -122,18 +123,17 @@ main .container {
} }
.historyPageButton.active:active { .historyPageButton.active:active {
background-color: #F0F0F1;
border-color: rgba(0, 0, 0, 0.15); border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px; box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
color: rgba(0, 0, 0, 0.65); color: var(--font-color-hover);
transform: translateY(0); transform: translateY(0);
} }
.historyPageButton.disabled { .historyPageButton.disabled {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
background-color: #f0f0f0; background-color: var(--color-quaternary);
color: #999; color: var(--font-color);
box-shadow: none; box-shadow: none;
pointer-events: none; pointer-events: none;
} }
@ -147,3 +147,8 @@ main .container {
color: #999; color: #999;
} }
.pageNumber {
font-family: 'open-sans', sans-serif;
margin: 0 25px 0 25px;
}

2
frontend/src/styles.scss
View File

@ -23,6 +23,7 @@
--link-color: #1F9BDE; --link-color: #1F9BDE;
--history-link-color: #A3A3A3; --history-link-color: #A3A3A3;
--history-table-head-color: #DADADA; --history-table-head-color: #DADADA;
--history-page-button-background: #DEDEDE;
--hamburger: #232323; --hamburger: #232323;
--dropdown-color: #DFDFDF; --dropdown-color: #DFDFDF;
--footer-color: #202020; --footer-color: #202020;
@ -41,6 +42,7 @@
--link-color: #20729E; --link-color: #20729E;
--history-link-color: #4A4A4A; --history-link-color: #4A4A4A;
--history-table-head-color: #4A4A4A; --history-table-head-color: #4A4A4A;
--history-page-button-background: #4A4A4A;
--hamburger: #CDCDCD; --hamburger: #CDCDCD;
--dropdown-color: #303233; --dropdown-color: #303233;
--footer-color: #242526; --footer-color: #242526;