From a4d8fc07e906212f8da7651437483eecee5b93c9 Mon Sep 17 00:00:00 2001
From: Peter <42907716+MrShack@users.noreply.github.com>
Date: Sat, 12 Apr 2025 19:42:06 +0200
Subject: [PATCH] Updated styles and structure for history table and navigation

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.
---
 frontend/src/app/bans/bans.component.html     | 18 ++++-----
 .../app/bans/history/history.component.scss   | 39 ++++++++++++++++++-
 frontend/src/styles.scss                      |  2 +
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/bans/bans.component.html b/frontend/src/app/bans/bans.component.html
index 9aaed9d..df81981 100644
--- a/frontend/src/app/bans/bans.component.html
+++ b/frontend/src/app/bans/bans.component.html
@@ -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
diff --git a/frontend/src/app/bans/history/history.component.scss b/frontend/src/app/bans/history/history.component.scss
index 2d8ff44..bf6539e 100644
--- a/frontend/src/app/bans/history/history.component.scss
+++ b/frontend/src/app/bans/history/history.component.scss
@@ -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 {
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 4da34fa..9be7e77 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -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;