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">
Previous page
</button>
<span class="pageNumber">{{ this.page }} / {{ getMaxPage() }}</span>
<button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
[disabled]="!buttonActive(getMaxPage())"
(click)="nextPage()" class="historyPageButton">

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

@ -89,7 +89,8 @@ main .container {
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.85);
background-color: var(--history-page-button-background);
color: var(--font-color);
cursor: pointer;
display: inline-flex;
font-family: 'opensans', sans-serif;
@ -114,7 +115,7 @@ main .container {
.historyPageButton.active:focus {
border-color: rgba(0, 0, 0, 0.15);
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 {
@ -122,18 +123,17 @@ main .container {
}
.historyPageButton.active:active {
background-color: #F0F0F1;
border-color: rgba(0, 0, 0, 0.15);
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);
}
.historyPageButton.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f0f0f0;
color: #999;
background-color: var(--color-quaternary);
color: var(--font-color);
box-shadow: none;
pointer-events: none;
}
@ -147,3 +147,8 @@ main .container {
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;
--history-link-color: #A3A3A3;
--history-table-head-color: #DADADA;
--history-page-button-background: #DEDEDE;
--hamburger: #232323;
--dropdown-color: #DFDFDF;
--footer-color: #202020;
@ -41,6 +42,7 @@
--link-color: #20729E;
--history-link-color: #4A4A4A;
--history-table-head-color: #4A4A4A;
--history-page-button-background: #4A4A4A;
--hamburger: #CDCDCD;
--dropdown-color: #303233;
--footer-color: #242526;