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

2
templates/components/bottom_controls.html
View File

@@ -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">

2
templates/components/home_clan_bar.html
View File

@@ -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">

2
templates/components/home_player_list.html
View File

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

8
templates/components/opp_clan_bar.html
View File

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

7
templates/components/opp_player_list.html
View File

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

18
templates/index.html
View File

@@ -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" . }}

4
templates/login.html
View File

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

4
templates/modals/add_clan.html
View File

@@ -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">

4
templates/modals/add_player.html
View File

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

4
templates/modals/edit_clan.html
View File

@@ -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">

2
templates/modals/edit_player.html
View File

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

27
templates/modals/full_calc.html
View File

@@ -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);

6
templates/register.html
View File

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