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

Refactor pagination buttons and adjust rate limit interval.

Browse Source 
Updated pagination buttons with new styles and class name (`historyPageButton`) for consistency and improved UX. Modified backend rate limit interval from 1 minute to 1 second for faster request handling.
This commit is contained in:
Peter 2025-04-18 18:45:40 +02:00
parent a01038e86c
commit 87a0b9ad1b
3 changed files with 75 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/main/java/com/alttd/altitudeweb/controllers/history/HistoryApiController.java
View File

@ -18,7 +18,7 @@ import java.util.concurrent.CompletableFuture;
@Slf4j @Slf4j
@RestController @RestController
@RateLimit(limit = 30, timeValue = 1, timeUnit = java.util.concurrent.TimeUnit.MINUTES) @RateLimit(limit = 30, timeValue = 1, timeUnit = java.util.concurrent.TimeUnit.SECONDS)
public class HistoryApiController implements HistoryApi { public class HistoryApiController implements HistoryApi {
@Override @Override

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

@ -52,20 +52,24 @@
</app-history> </app-history>
</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)" class="pageButton"> [disabled]="!buttonActive(0)"
(click)="setPage(0)" class="historyPageButton">
First page First page
</button> </button>
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)" <button [ngClass]="{'active': buttonActive(0), 'disabled': !buttonActive(0)}"
(click)="previousPage()" class="pageButton"> [disabled]="!buttonActive(0)"
(click)="previousPage()" class="historyPageButton">
Previous page Previous page
</button> </button>
<button [ngClass]="{'active': buttonActive(getMaxPage())}" [disabled]="!buttonActive(getMaxPage())" <button [ngClass]="{'active': buttonActive(getMaxPage()), 'disabled': !buttonActive(getMaxPage())}"
(click)="nextPage()" class="pageButton"> [disabled]="!buttonActive(getMaxPage())"
(click)="nextPage()" class="historyPageButton">
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())" class="pageButton"> [disabled]="!buttonActive(getMaxPage())"
(click)="setPage(getMaxPage())" class="historyPageButton">
Last page Last page
</button> </button>
</div> </div>

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

@ -83,6 +83,67 @@ main .container {
padding: 10px 0 30px 0; padding: 10px 0 30px 0;
} }
.pageButton { .historyPageButton {
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.1);
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);
cursor: pointer;
display: inline-flex;
font-family: 'opensans', sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0 5px 0 5px; margin: 0 5px 0 5px;
min-height: 3rem;
padding: calc(.875rem - 1px) calc(1.5rem - 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
} }
.historyPageButton.active:hover,
.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);
}
.historyPageButton.active:hover {
transform: translateY(-1px);
}
.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);
transform: translateY(0);
}
.historyPageButton.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: #f0f0f0;
color: #999;
box-shadow: none;
pointer-events: none;
}
/* Prevent hover effects on disabled buttons */
.historyPageButton.disabled:hover,
.historyPageButton.disabled:focus {
border-color: rgba(0, 0, 0, 0.1);
box-shadow: none;
transform: none;
color: #999;
}