From f1c16da7e4c848eb4e8bd4015b838e1787071ee7 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@unterdemradar.de>
Date: Tue, 12 Sep 2023 15:55:38 +0200
Subject: [PATCH] several changes that were necessary in conjunction with the
 design revamp

---
 src/index.html | 49 ++++++++++++++++++++++++-------------------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/index.html b/src/index.html
index 2846596..d0aa1a5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,7 +12,7 @@
 
 	<link rel="manifest" href="/icons/sr2ini.webmanifest">
 
-	<link type="text/css" rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" >
+<!--	<link type="text/css" rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" > -->
 	<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.css">
 	<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
 	
@@ -47,11 +47,11 @@
 		<main class="table-responsive overflow-visible">
 			<table class="table table-sm table-borderless" id="combatants-table">
 				<thead>
-					<tr data-augmented-ui="tl-2-clip-y r-clip-y">
-						<th class="col th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
-						<th class="col-2 th-ini" data-augmented-ui="both" title="Initiative">Ini</th>
-						<th class="col-2 th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction">D+R</th>
-						<th class="col-3 th-actions" data-augmented-ui="r-clip-y both" title="Actions">Actions</th>
+					<tr data-augmented-ui="tl-clip-y tr-clip-y">
+						<th class="th-name" data-augmented-ui="tl-clip-y both" title="Name" scope="col">Name</th>
+						<th class="th-ini" data-augmented-ui="both" title="Initiative" scope="col">Ini</th>
+						<th class="th-dice-and-rea" data-augmented-ui="both" title="Initiative Dice and Reaction" scope="col">D+R</th>
+						<th class="th-actions" data-augmented-ui="tr-clip-y both" title="Actions" scope="col">Actions</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -62,10 +62,10 @@
 
 	<!-- confirm modal -->
 	<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
-		<div class="modal-dialog modal-sm" role="document">
+		<div class="modal-dialog modal-lg" role="document">
 			<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
 				<div class="modal-header" data-augmented-ui="inlay">
-					<h5 class="modal-title">Start New Round</h5>
+					<h2 class="modal-title">Start New Round</h2>
 					<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">&#10006;</button>
 				</div>
 				<div class="modal-body"  data-augmented-ui="inlay">
@@ -74,7 +74,7 @@
 				<div class="modal-footer" data-augmented-ui="inlay">
 					<button type="button" class="sr2-button" data-bs-dismiss="modal">Cancel</button>
 					<button type="submit" class="sr2-button" id="confirm-modal-new-round-ok-button" data-bs-dismiss="modal">OK</button>
-					<button type="submit" class="sr2-button d-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="submit" class="sr2-button display-none" id="confirm-modal-remove-combatant-ok-button" data-bs-dismiss="modal">OK</button>
 				</div>
 			</div>
 		</div>
@@ -82,34 +82,33 @@
 
 	<!-- combatant modal (add & edit) -->
 	<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
-		<div class="modal-dialog modal-sm" role="document">
+		<div class="modal-dialog modal-lg" role="document">
 			<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
 				<div class="modal-header" data-augmented-ui="inlay">
-					<h5 class="modal-title">Add New Combatant</h5>
+					<h2 class="modal-title">Add New Combatant</h2>
 					<button type="button" class="sr2-button" data-bs-dismiss="modal" aria-label="Close">&#10006;</button>
 				</div>
 				<div class="modal-body" data-augmented-ui="inlay">
 					<form id="combatant-form" name="combatant-modal-form" class="was-validated" onsubmit="return false;">
-						<div class="my-2">
+						<div>
 							<input type="text" maxlength="40" class="form-control form-control-sm" id="combatant-modal-name" form="combatant-form" placeholder="Name" required>
 						</div>
-						<div class="input-group input-group-sm my-2">
+						<div class="input-group input-group-sm">
 							<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-form" placeholder="Dice">
 							<span class="input-group-text">D+</span>
 							<input type="number" min="0" max="30" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
 							<span class="input-group-text">&nbsp;&nbsp;&nbsp;</span>
 							<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="combatant-form" placeholder="Ini">
-
 						</div>
-						<div class="my-2">
-							<label for="combatant-modal-stun" class="form-label">Stun Damage <span id="combatant-modal-penalty-stun"></span></label>
-							<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-stun" list="damage">
-							<datalist id="damage">
-								<option>-</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
+						<div class="range-group">
+							<label for="combatant-modal-stun" class="form-label">Stun damage <span id="combatant-modal-penalty-stun"></span></label>
+							<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-stun" list="damage-level">
+							<datalist id="damage-level">
+								<option>0</option><option>L</option><option>.</option><option>M</option><option>.</option><option>.</option><option>S</option><option>.</option><option>.</option><option>.</option><option>D</option>
 							</datalist>
 							<div class="label-swap"> 
-								<label for="combatant-modal-physical" class="form-label">Physical Damage <span id="combatant-modal-penalty-physical"></span></label>
-								<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-physical" list="damage">
+								<label for="combatant-modal-physical" class="form-label">Physical damage <span id="combatant-modal-penalty-physical"></span></label>
+								<input type="range" class="form-range" min="0" max="10" value="0" id="combatant-modal-physical" list="damage-level">
 							</div>
 						</div>
 					</form>
@@ -118,14 +117,14 @@
 					<button type="button" class="sr2-button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
 					<button type="submit" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
 					<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" >OK</button>
-					<button type="submit" class="sr2-button d-none" id="combatant-modal-edit-ok-button" >OK</button>
+					<button type="submit" class="sr2-button display-none" id="combatant-modal-edit-ok-button" >OK</button>
 				</div>
 			</div>
 		</div>
 	</div>
 
 	<!-- SVG icon <symbol> definitions (for later <use>)-->
-	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="d-none">
+	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="display-none">
 		<defs>
 			<!-- add combatant -->
 			<symbol id="add" >
@@ -192,8 +191,8 @@
 	</svg>
 
 	<!-- footer -->
-	<div class="footer-container">
-		<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
+	<div class="footer-container container">
+		<footer data-augmented-ui="tl-clip br-clip both">
 			<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
 		</footer>
 	</div>