From 130fe2ad57b19f86901d7ed14947e8c2562e1591 Mon Sep 17 00:00:00 2001
From: MaxJa4 <74194322+MaxJa4@users.noreply.github.com>
Date: Wed, 24 Jan 2024 12:01:23 +0100
Subject: [PATCH] UI optimizations and polish.

---
 static/icons/average.svg                   | 12 ++++++++++
 templates/components/bottom_controls.html  |  2 +-
 templates/components/home_clan_bar.html    |  2 +-
 templates/components/home_player_list.html |  2 +-
 templates/components/opp_clan_bar.html     |  8 ++++++-
 templates/components/opp_player_list.html  |  7 +-----
 templates/index.html                       | 18 +++++++++++----
 templates/login.html                       |  4 ++--
 templates/modals/add_clan.html             |  4 ++--
 templates/modals/add_player.html           |  4 ++--
 templates/modals/edit_clan.html            |  4 ++--
 templates/modals/edit_player.html          |  2 +-
 templates/modals/full_calc.html            | 27 +++++++++++++++++-----
 templates/register.html                    |  6 ++---
 14 files changed, 69 insertions(+), 33 deletions(-)
 create mode 100644 static/icons/average.svg

diff --git a/static/icons/average.svg b/static/icons/average.svg
new file mode 100644
index 0000000..13e6682
--- /dev/null
+++ b/static/icons/average.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <title>average</title>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="drop" fill="#000000" transform="translate(60.496777, 60.491376)">
+            <path d="M362.038672,4.40536496e-13 L392.208561,30.1698893 L330.849151,91.530257 C352.999344,120.319635 366.169889,156.376056 366.169889,195.508624 C366.169889,289.765221 289.75982,366.17529 195.503223,366.17529 C156.370421,366.17529 120.313802,353.004587 91.5243389,330.854154 L30.1698893,392.208561 L-1.42108547e-14,362.038672 L61.2047929,300.834525 C38.4229489,271.826458 24.836556,235.254177 24.836556,195.508624 C24.836556,101.252026 101.246625,24.841957 195.503223,24.841957 C235.248317,24.841957 271.820213,38.4280364 300.82812,61.2094052 L362.038672,4.40536496e-13 Z M300.334816,122.043508 L122.038107,300.340217 C142.831803,314.939228 168.166768,323.508624 195.503223,323.508624 C266.195671,323.508624 323.503223,266.201072 323.503223,195.508624 C323.503223,168.172169 314.933827,142.837204 300.334816,122.043508 Z M195.503223,67.5086237 C124.810775,67.5086237 67.5032227,124.816176 67.5032227,195.508624 C67.5032227,223.460895 76.4630581,249.320485 91.66741,270.372075 L270.365674,91.6720892 C249.314266,76.4681756 223.455052,67.5086237 195.503223,67.5086237 Z" id="Combined-Shape">
+
+</path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/templates/components/bottom_controls.html b/templates/components/bottom_controls.html
index 04d6f0d..bc4bd0b 100644
--- a/templates/components/bottom_controls.html
+++ b/templates/components/bottom_controls.html
@@ -1,6 +1,6 @@
 {{ define "bottom_controls" }}
 
-<div class="row justify-content-between border-top pt-4 position-relative mb-5">
+<div class="row justify-content-between border-top border-secondary-subtle pt-4 mx-0 position-relative mb-5">
     <div class="col-auto position-absolute start-0">
         <div class="btn-toolbar" role="toolbar">
             <a class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" href="/logout" data-bs-action="tooltip" data-bs-title="Abmelden">
diff --git a/templates/components/home_clan_bar.html b/templates/components/home_clan_bar.html
index 034c7e5..a1ff9a7 100644
--- a/templates/components/home_clan_bar.html
+++ b/templates/components/home_clan_bar.html
@@ -1,7 +1,7 @@
 {{ define "home_clan_bar" }}
 
 <div class="row g-2">
-    <div class="col-auto">
+    <div class="col-auto pe-2">
         <label for="home-clan" class="col-form-label col-form-label-lg">Clans:</label>
     </div>
     <div class="col">
diff --git a/templates/components/home_player_list.html b/templates/components/home_player_list.html
index 6755518..736bf17 100644
--- a/templates/components/home_player_list.html
+++ b/templates/components/home_player_list.html
@@ -2,7 +2,7 @@
 
 <div class="row">
     <div class="col">
-        <div id="home-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;">
+        <div id="home-player-list" class="border border-secondary rounded p-1 overflow-auto" style="height: 47vh;">
 
         </div>
     </div>
diff --git a/templates/components/opp_clan_bar.html b/templates/components/opp_clan_bar.html
index f4265b4..b1324d0 100644
--- a/templates/components/opp_clan_bar.html
+++ b/templates/components/opp_clan_bar.html
@@ -1,13 +1,14 @@
 {{ define "opp_clan_bar" }}
 
 <div class="row g-2">
-    <div class="col-auto">
+    <div class="col-auto pe-2">
         <label for="opponent-clan" class="col-form-label col-form-label-lg">Clans:</label>
     </div>
     <div class="col">
         <div class="input-group input-group-lg mb-3">
             <select class="form-select form-control border-secondary" id="opponent-clan" hx-get="/players_html" hx-target="#opponent-player-list" hx-vals='js:{"clan_id": getSelectedClanId("opponent-clan")}'>
                 <option disabled selected value>Auswählen...</option>
+                <!-- Options will be loaded dynamically -->
             </select>
             {{ if not (eq .UserRole "READER") }}
                 <button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete"
@@ -30,6 +31,11 @@
 <script lang="javascript">
     document.addEventListener('DOMContentLoaded', function() {
         setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');
+
+        const oppPlayerList = document.getElementById('opponent-player-list');
+        oppPlayerList.addEventListener('htmx:afterSwap', function() {
+            initTooltips(oppPlayerList);
+        });
     });
 </script>
 
diff --git a/templates/components/opp_player_list.html b/templates/components/opp_player_list.html
index dbeebb0..f7d99b0 100644
--- a/templates/components/opp_player_list.html
+++ b/templates/components/opp_player_list.html
@@ -2,7 +2,7 @@
 
     <div class="row">
         <div class="col">
-            <div id="opponent-player-list" class="border rounded p-1 overflow-auto" style="height: 47vh;">
+            <div id="opponent-player-list" class="border border-secondary rounded p-1 overflow-auto" style="height: 47vh;">
 
             </div>
         </div>
@@ -33,11 +33,6 @@
     <script lang="javascript">
         document.addEventListener('DOMContentLoaded', function() {
             setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add');
-
-            const oppPlayerList = document.getElementById('opponent-player-list');
-            oppPlayerList.addEventListener('htmx:afterSwap', function() {
-                initTooltips(oppPlayerList);
-            });
         });
     </script>
 
diff --git a/templates/index.html b/templates/index.html
index b1f06d4..c416c72 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,11 +4,17 @@
     {{ template "header" . }}
 </head>
 <body data-bs-theme="dark" class="h-auto">
-<div class="container-xxl bg-dark mt-5 p-4 rounded-3 text-light">
+<div class="container-xxl bg-dark mt-4 py-4 px-3 rounded-3 text-light">
+    <div class="text-secondary-emphasis border-bottom border-secondary-subtle">
+        <h1 class="text-center fw-bold">Infantry Skill Calculator</h1>
+        <p class="lead text-center fs-6 text-secondary fst-italic">By [GCG]FinalEnd4</p>
+    </div>
     <div class="row">
         <!-- Home-Clan Column -->
-        <div class="col-md-6 d-flex flex-column border-end px-3 pb-4">
-            <h4 class="text-center mt-2 pb-3 mb-3 border-bottom text-primary"><i class="bi bi-people-fill me-3"></i>Heim-Team</h4>
+        <div class="col-md-6 border-end border-secondary-subtle px-3 pb-4">
+            <h4 class="text-center my-3 text-primary fs-3">
+                <i class="bi bi-people-fill me-3"></i>Heim-Team<i class="bi bi-people-fill ms-3"></i>
+            </h4>
             <!-- Clan Selection -->
             {{ template "home_clan_bar" . }}
 
@@ -17,8 +23,10 @@
         </div>
 
         <!-- Opponent-Clan Column -->
-        <div class="col-md-6 d-flex flex-column px-3 pb-4">
-            <h4 class="text-center mt-2 pb-3 mb-3 border-bottom text-danger"><i class="bi bi-people-fill me-3"></i>Gegner-Team</h4>
+        <div class="col-md-6 px-3 pb-4">
+            <h4 class="text-center my-3 text-danger fs-3">
+                <i class="bi bi-people-fill me-3"></i>Gegner-Team<i class="bi bi-people-fill ms-3"></i>
+            </h4>
             <!-- Clan Selection -->
             {{ template "opp_clan_bar" . }}
 
diff --git a/templates/login.html b/templates/login.html
index 9fe3bb2..7ec4d1d 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -9,11 +9,11 @@
         <hr>
         <form hx-post="/login" hx-target="#login-result" class="position-relative">
             <div class="form-floating mb-3">
-                <input class="form-control form-control-lg" type="text" id="username" name="username" placeholder="Username" required>
+                <input class="form-control form-control-lg pb-1" type="text" id="username" name="username" placeholder="Username" required>
                 <label for="username">Username</label>
             </div>
             <div class="form-floating">
-                <input class="form-control form-control-lg" type="password" id="password" name="password" placeholder="Passwort" required>
+                <input class="form-control form-control-lg pb-1" type="password" id="password" name="password" placeholder="Passwort" required>
                 <label for="password">Passwort</label>
             </div>
             <button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-door-open me-3"></i>Anmelden</button>
diff --git a/templates/modals/add_clan.html b/templates/modals/add_clan.html
index 486fa2a..0c24056 100644
--- a/templates/modals/add_clan.html
+++ b/templates/modals/add_clan.html
@@ -10,11 +10,11 @@
             </div>
             <div class="modal-body">
                 <div class="form-floating mb-3">
-                    <input type="text" class="form-control form-control-lg" id="clanName" placeholder="Clan-Name" minlength="2" maxlength="30" required>
+                    <input type="text" class="form-control form-control-lg pb-1" id="clanName" placeholder="Clan-Name" minlength="2" maxlength="30" required>
                     <label for="clanName">Clan-Name</label>
                 </div>
                 <div class="form-floating">
-                    <input type="text" class="form-control form-control-lg" id="clanTag" placeholder="Clan-Tag" minlength="2" maxlength="30" required>
+                    <input type="text" class="form-control form-control-lg pb-1" id="clanTag" placeholder="Clan-Tag" minlength="2" maxlength="30" required>
                     <label for="clanTag">Clan-Tag</label>
                 </div>
                 <div class="form-check form-check-inline mt-3 fs-5">
diff --git a/templates/modals/add_player.html b/templates/modals/add_player.html
index 6ab8b25..8cb202c 100644
--- a/templates/modals/add_player.html
+++ b/templates/modals/add_player.html
@@ -9,11 +9,11 @@
             </div>
             <div class="modal-body">
                 <div class="form-floating mb-3">
-                    <input type="text" class="form-control form-control-lg" id="playerClanName" placeholder="Clan-Name" disabled>
+                    <input type="text" class="form-control form-control-lg pb-1" id="playerClanName" placeholder="Clan-Name" disabled>
                     <label for="playerClanName">Clan-Name</label>
                 </div>
                 <div class="form-floating">
-                    <input type="text" class="form-control form-control-lg" id="playerName" placeholder="Spieler-Name" required>
+                    <input type="text" class="form-control form-control-lg pb-1" id="playerName" placeholder="Spieler-Name" required>
                     <label for="playerName">Spieler-Name</label>
                 </div>
                 <div class="error-message text-danger fs-5 badge" style="display: none;"></div>
diff --git a/templates/modals/edit_clan.html b/templates/modals/edit_clan.html
index ea01d5c..41f30e9 100644
--- a/templates/modals/edit_clan.html
+++ b/templates/modals/edit_clan.html
@@ -9,11 +9,11 @@
             </div>
             <div class="modal-body">
                 <div class="form-floating mb-3">
-                    <input type="text" class="form-control form-control-lg" id="editClanName" placeholder="Clan-Name" minlength="2" maxlength="30" required>
+                    <input type="text" class="form-control form-control-lg pb-1" id="editClanName" placeholder="Clan-Name" minlength="2" maxlength="30" required>
                     <label for="editClanName">Clan-Name</label>
                 </div>
                 <div class="form-floating">
-                    <input type="text" class="form-control form-control-lg" id="editClanTag" placeholder="Clan-Tag" minlength="2" maxlength="30" required>
+                    <input type="text" class="form-control form-control-lg pb-1" id="editClanTag" placeholder="Clan-Tag" minlength="2" maxlength="30" required>
                     <label for="editClanTag">Clan-Tag</label>
                 </div>
                 <div class="form-check form-check-inline mt-3 fs-5">
diff --git a/templates/modals/edit_player.html b/templates/modals/edit_player.html
index e3a0aa5..530ef2c 100644
--- a/templates/modals/edit_player.html
+++ b/templates/modals/edit_player.html
@@ -9,7 +9,7 @@
             </div>
             <div class="modal-body">
                 <div class="form-floating mb-3">
-                    <input type="text" class="form-control form-control-lg" id="editPlayerName" placeholder="Spieler-Name">
+                    <input type="text" class="form-control form-control-lg pb-1" id="editPlayerName" placeholder="Spieler-Name">
                     <label for="editPlayerName">Spieler-Name</label>
                 </div>
                 <div class="error-message text-danger fs-5 badge" style="display: none;"></div>
diff --git a/templates/modals/full_calc.html b/templates/modals/full_calc.html
index 30397f8..186a42d 100644
--- a/templates/modals/full_calc.html
+++ b/templates/modals/full_calc.html
@@ -9,11 +9,11 @@
             </div>
             <div class="modal-body px-0">
                 <div class="row px-2">
-                    <div class="col-6 d-flex flex-column border-end border-secondary px-1 pb-2" id="home-clan-results">
+                    <div class="col-6 border-end border-secondary px-1 pb-1" id="home-clan-results">
                         <h3 class="pb-3 text-center text-primary border-bottom border-primary-subtle fw-bold" id="home-clan-name">a</h3>
                         <!-- Dynamically added -->
                     </div>
-                    <div class="col-6 d-flex flex-column px-1 mb-2" id="opponent-clan-results">
+                    <div class="col-6 px-1 mb-1" id="opponent-clan-results">
                         <h3 class="pb-3 text-center text-danger border-bottom border-danger-subtle fw-bold" id="opp-clan-name">b</h3>
                         <!-- Dynamically added -->
                     </div>
@@ -23,13 +23,22 @@
                 </div>
                 <div class="row justify-content-center">
                     <div class="col-3 text-center fs-5 me-4 ps-0">
-                        Avg. Score: <span id="home-avg-score"><i class="spinner-grow spinner-grow-sm text-secondary align-baseline mx-2" role="status"></i></span>
+                        <img src="../static/icons/average.svg" alt="Avg" class="img-fluid me-1 align-top" style="height: 1.8rem; filter: invert(0.85);"/>
+                        <span id="home-avg-score" class="text-warning">
+                            <i class="spinner-grow spinner-grow-sm text-secondary align-baseline mx-2" role="status"></i>
+                        </span>
                     </div>
                     <div class="col-2 text-center fs-5">
-                        Diff: <span id="diff-score"><i class="spinner-grow spinner-grow-sm text-secondary align-baseline mx-2" role="status"></i></span>
+                        <i class="bi bi-plus-slash-minus me-2"></i>
+                        <span id="diff-score" class="text-warning">
+                            <i class="spinner-grow spinner-grow-sm text-secondary align-baseline mx-2" role="status"></i>
+                        </span>
                     </div>
                     <div class="col-3 text-center fs-5 ms-4 pe-0">
-                        Avg. Score: <span id="opp-avg-score"><i class="spinner-grow spinner-grow-sm text-secondary align-baseline mx-2" role="status"></i></span>
+                        <img src="../static/icons/average.svg" alt="Avg" class="img-fluid me-1 align-top" style="height: 1.8rem; filter: invert(0.85);"/>
+                        <span id="opp-avg-score" class="text-warning">
+                            <i class="spinner-grow spinner-grow-sm text-secondary align-baseline mx-2" role="status"></i>
+                        </span>
                     </div>
                 </div>
             </div>
@@ -41,7 +50,6 @@
                 <button type="submit" name="submit" class="btn btn-lg btn-outline-primary" onclick="downloadScreenshot()" hidden>
                     <i class="bi bi-download"></i>
                 </button>
-                <!--<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Schließen</button>-->
             </div>
         </div>
     </div>
@@ -290,6 +298,13 @@
                 });
 
                 Promise.all(promises).then(_ => {
+                    let liItems = homeClanResults.querySelectorAll('li');
+                    liItems[liItems.length - 1].classList.remove('border-bottom');
+                    liItems[liItems.length - 2].classList.remove('border-bottom');
+                    liItems = oppClanResults.querySelectorAll('li');
+                    liItems[liItems.length - 1].classList.remove('border-bottom');
+                    liItems[liItems.length - 2].classList.remove('border-bottom');
+
                     setSquadNumbers();
 
                     cleanupStatistic(homeAvgScore);
diff --git a/templates/register.html b/templates/register.html
index 33efc0c..bfb7d05 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -9,21 +9,21 @@
     <hr>
     <form hx-post="/register" hx-target="#register-result" class="position-relative needs-validation" novalidate>
         <div class="form-floating mb-3">
-            <input class="form-control form-control-lg" type="text" minlength="4" id="username" name="username" placeholder="Username" required>
+            <input class="form-control form-control-lg pb-1" type="text" minlength="4" id="username" name="username" placeholder="Username" required>
             <label for="username">Username</label>
             <div class="invalid-feedback">
                 Mindestlänge: 4 Zeichen
             </div>
         </div>
         <div class="form-floating mb-3">
-            <input class="form-control form-control-lg" type="password" minlength="8" id="password" name="password" placeholder="Passwort" required>
+            <input class="form-control form-control-lg pb-1" type="password" minlength="8" id="password" name="password" placeholder="Passwort" required>
             <label for="password">Passwort</label>
             <div class="invalid-feedback">
                 Mindestlänge: 8 Zeichen
             </div>
         </div>
         <div class="form-floating">
-            <input class="form-control form-control-lg" type="password" minlength="32" maxlength="32" id="code" name="code" placeholder="Aktivierungscode" required>
+            <input class="form-control form-control-lg pb-1" type="password" minlength="32" maxlength="32" id="code" name="code" placeholder="Aktivierungscode" required>
             <label for="code">Aktivierungscode</label>
             <div class="invalid-feedback">
                 Ungültiges Format