Maxi/InfantrySkillCalculator
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects 1 Releases Activity

UI optimizations and polish.
All checks were successful
Build and Push Docker Image / build-and-push (push) Successful in 46s
Details

Browse Source
This commit is contained in:
MaxJa4
2024-01-24 12:01:23 +01:00
parent 0b2d10e7b7
commit 130fe2ad57
14 changed files with 69 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/icons/average.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
templates/components/bottom_controls.html
View File

@@ -1,6 +1,6 @@
{{ define "bottom_controls" }} {{ 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="col-auto position-absolute start-0">
<div class="btn-toolbar" role="toolbar"> <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"> <a class="btn btn-lg btn-outline-secondary text-secondary-emphasis me-2" href="/logout" data-bs-action="tooltip" data-bs-title="Abmelden">

2
templates/components/home_clan_bar.html
View File

@@ -1,7 +1,7 @@
{{ define "home_clan_bar" }} {{ define "home_clan_bar" }}
<div class="row g-2"> <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> <label for="home-clan" class="col-form-label col-form-label-lg">Clans:</label>
</div> </div>
<div class="col"> <div class="col">

2
templates/components/home_player_list.html
View File

@@ -2,7 +2,7 @@
<div class="row"> <div class="row">
<div class="col"> <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>
</div> </div>

8
templates/components/opp_clan_bar.html
View File

@@ -1,13 +1,14 @@
{{ define "opp_clan_bar" }} {{ define "opp_clan_bar" }}
<div class="row g-2"> <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> <label for="opponent-clan" class="col-form-label col-form-label-lg">Clans:</label>
</div> </div>
<div class="col"> <div class="col">
<div class="input-group input-group-lg mb-3"> <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")}'> <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> <option disabled selected value>Auswählen...</option>
<!-- Options will be loaded dynamically -->
</select> </select>
{{ if not (eq .UserRole "READER") }} {{ if not (eq .UserRole "READER") }}
<button class="btn btn-lg btn-outline-secondary text-danger bg-secondary-subtle" type="button" id="opponent-delete" <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"> <script lang="javascript">
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit'); setupClanButtons('opponent-clan', 'opponent-delete', 'opponent-edit');
const oppPlayerList = document.getElementById('opponent-player-list');
oppPlayerList.addEventListener('htmx:afterSwap', function() {
initTooltips(oppPlayerList);
});
}); });
</script> </script>

7
templates/components/opp_player_list.html
View File

@@ -2,7 +2,7 @@
<div class="row"> <div class="row">
<div class="col"> <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>
</div> </div>
@@ -33,11 +33,6 @@
<script lang="javascript"> <script lang="javascript">
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add'); setupPlayerButtons('opponent-clan', 'opponent-player-list', 'opponent-player-add');
const oppPlayerList = document.getElementById('opponent-player-list');
oppPlayerList.addEventListener('htmx:afterSwap', function() {
initTooltips(oppPlayerList);
});
}); });
</script> </script>

18
templates/index.html
View File

@@ -4,11 +4,17 @@
{{ template "header" . }} {{ template "header" . }}
</head> </head>
<body data-bs-theme="dark" class="h-auto"> <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"> <div class="row">
<!-- Home-Clan Column --> <!-- Home-Clan Column -->
<div class="col-md-6 d-flex flex-column border-end px-3 pb-4"> <div class="col-md-6 border-end border-secondary-subtle 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> <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 --> <!-- Clan Selection -->
{{ template "home_clan_bar" . }} {{ template "home_clan_bar" . }}
@@ -17,8 +23,10 @@
</div> </div>
<!-- Opponent-Clan Column --> <!-- Opponent-Clan Column -->
<div class="col-md-6 d-flex flex-column px-3 pb-4"> <div class="col-md-6 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> <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 --> <!-- Clan Selection -->
{{ template "opp_clan_bar" . }} {{ template "opp_clan_bar" . }}

4
templates/login.html
View File

@@ -9,11 +9,11 @@
<hr> <hr>
<form hx-post="/login" hx-target="#login-result" class="position-relative"> <form hx-post="/login" hx-target="#login-result" class="position-relative">
<div class="form-floating mb-3"> <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> <label for="username">Username</label>
</div> </div>
<div class="form-floating"> <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> <label for="password">Passwort</label>
</div> </div>
<button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-door-open me-3"></i>Anmelden</button> <button class="btn btn-lg btn-primary mt-4" type="submit"><i class="bi bi-door-open me-3"></i>Anmelden</button>

4
templates/modals/add_clan.html
View File

@@ -10,11 +10,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-floating mb-3"> <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> <label for="clanName">Clan-Name</label>
</div> </div>
<div class="form-floating"> <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> <label for="clanTag">Clan-Tag</label>
</div> </div>
<div class="form-check form-check-inline mt-3 fs-5"> <div class="form-check form-check-inline mt-3 fs-5">

4
templates/modals/add_player.html
View File

@@ -9,11 +9,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-floating mb-3"> <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> <label for="playerClanName">Clan-Name</label>
</div> </div>
<div class="form-floating"> <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> <label for="playerName">Spieler-Name</label>
</div> </div>
<div class="error-message text-danger fs-5 badge" style="display: none;"></div> <div class="error-message text-danger fs-5 badge" style="display: none;"></div>

4
templates/modals/edit_clan.html
View File

@@ -9,11 +9,11 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-floating mb-3"> <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> <label for="editClanName">Clan-Name</label>
</div> </div>
<div class="form-floating"> <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> <label for="editClanTag">Clan-Tag</label>
</div> </div>
<div class="form-check form-check-inline mt-3 fs-5"> <div class="form-check form-check-inline mt-3 fs-5">

2
templates/modals/edit_player.html
View File

@@ -9,7 +9,7 @@
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="form-floating mb-3"> <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> <label for="editPlayerName">Spieler-Name</label>
</div> </div>
<div class="error-message text-danger fs-5 badge" style="display: none;"></div> <div class="error-message text-danger fs-5 badge" style="display: none;"></div>

27
templates/modals/full_calc.html
View File

@@ -9,11 +9,11 @@
</div> </div>
<div class="modal-body px-0"> <div class="modal-body px-0">
<div class="row px-2"> <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> <h3 class="pb-3 text-center text-primary border-bottom border-primary-subtle fw-bold" id="home-clan-name">a</h3>
<!-- Dynamically added --> <!-- Dynamically added -->
</div> </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> <h3 class="pb-3 text-center text-danger border-bottom border-danger-subtle fw-bold" id="opp-clan-name">b</h3>
<!-- Dynamically added --> <!-- Dynamically added -->
</div> </div>
@@ -23,13 +23,22 @@
</div> </div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<div class="col-3 text-center fs-5 me-4 ps-0"> <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>
<div class="col-2 text-center fs-5"> <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>
<div class="col-3 text-center fs-5 ms-4 pe-0"> <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> </div>
</div> </div>
@@ -41,7 +50,6 @@
<button type="submit" name="submit" class="btn btn-lg btn-outline-primary" onclick="downloadScreenshot()" hidden> <button type="submit" name="submit" class="btn btn-lg btn-outline-primary" onclick="downloadScreenshot()" hidden>
<i class="bi bi-download"></i> <i class="bi bi-download"></i>
</button> </button>
<!--<button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Schließen</button>-->
</div> </div>
</div> </div>
</div> </div>
@@ -290,6 +298,13 @@
}); });
Promise.all(promises).then(_ => { 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(); setSquadNumbers();
cleanupStatistic(homeAvgScore); cleanupStatistic(homeAvgScore);

6
templates/register.html
View File

@@ -9,21 +9,21 @@
<hr> <hr>
<form hx-post="/register" hx-target="#register-result" class="position-relative needs-validation" novalidate> <form hx-post="/register" hx-target="#register-result" class="position-relative needs-validation" novalidate>
<div class="form-floating mb-3"> <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> <label for="username">Username</label>
<div class="invalid-feedback"> <div class="invalid-feedback">
Mindestlänge: 4 Zeichen Mindestlänge: 4 Zeichen
</div> </div>
</div> </div>
<div class="form-floating mb-3"> <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> <label for="password">Passwort</label>
<div class="invalid-feedback"> <div class="invalid-feedback">
Mindestlänge: 8 Zeichen Mindestlänge: 8 Zeichen
</div> </div>
</div> </div>
<div class="form-floating"> <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> <label for="code">Aktivierungscode</label>
<div class="invalid-feedback"> <div class="invalid-feedback">
Ungültiges Format Ungültiges Format