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

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

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

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>

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

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>

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