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

Updated styles and structure for history table and navigation

Browse Source 
Refactored the history buttons to include click handlers in the outer div for better clarity and functionality. Improved the table styling in the history component by adding consistent padding, fixing column widths, and ensuring text overflow handling. Added new CSS variables for table header colors to enhance theming consistency.
This commit is contained in:
Peter 2025-04-12 19:42:06 +02:00
parent 3ed5fcfc0f
commit a4d8fc07e9
3 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,20 +11,20 @@
<div class="container">
<div class="columnSection">
<div class="historyButtonContainer">
<div [id]="getCurrentButtonId('all')" class="button-outer">
<span class="button-inner" (click)="changeHistoryPunishment('all')"
<div [id]="getCurrentButtonId('all')" class="button-outer" (click)="changeHistoryPunishment('all')">
<span class="button-inner"
[ngClass]="active">All</span>
</div>
<div [id]="getCurrentButtonId('ban')" class="button-outer">
<span class="button-inner" (click)="changeHistoryPunishment('ban')"
<div [id]="getCurrentButtonId('ban')" class="button-outer" (click)="changeHistoryPunishment('ban')">
<span class="button-inner"
[ngClass]="active">Bans</span>
</div>
<div [id]="getCurrentButtonId('mute')" class="button-outer">
<span class="button-inner" (click)="changeHistoryPunishment('mute')"
<div [id]="getCurrentButtonId('mute')" class="button-outer" (click)="changeHistoryPunishment('mute')">
<span class="button-inner"
[ngClass]="active">Mutes</span>
</div>
<div [id]="getCurrentButtonId('warn')" class="button-outer">
<span class="button-inner" (click)="changeHistoryPunishment('warn')"
<div [id]="getCurrentButtonId('warn')" class="button-outer" (click)="changeHistoryPunishment('warn')">
<span class="button-inner"
[ngClass]="active">Warnings</span>
</div>
</div>
@ -50,7 +50,7 @@
<app-history [userType]="userType" [punishmentType]="punishmentType"
[page]="page" [searchTerm]="finalSearchTerm"></app-history>
</div>
<div>
<div class="changePageButtons">
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"
(click)="setPage(0)">
First page

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

@ -1,6 +1,7 @@
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
thead {
@ -23,6 +24,35 @@ th {
th, td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 5px 0 8px 0;
box-sizing: border-box;
}
th.historyType, td.historyType {
width: 100px !important;
min-width: 100px;
max-width: 100px;
white-space: nowrap;
}
th.historyPlayer, td.historyPlayer {
width: 180px !important;
min-width: 180px;
max-width: 180px;
}
th.historyReason, td.historyReason {
width: 540px !important;
min-width: 540px;
max-width: 540px;
}
th.historyDate, td.historyDate {
width: 150px !important;
min-width: 150px;
max-width: 150px;
}
table tr td {
@ -30,10 +60,12 @@ table tr td {
}
.historyType {
width: 100px;
max-width: 100%;
width: 80px;
}
.historyPlayer {
max-width: 100%;
width: 200px;
text-overflow: clip;
}
@ -59,9 +91,12 @@ img {
}
.historyReason {
width: 920px;
width: 650px;
}
.historyDate {
width: 170px;
}
.changePageButtons {
}

2
frontend/src/styles.scss
View File

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