- added transition for damage monitors and actions menus

- need to slide them to the correct position
- was not able to style the activating button (yet); turns out there is no CSS selector for elements preceding a specific element

TODO.md

@@ -57,34 +57,17 @@
 -	x clone button
 	-	x und im combatant-modal ein weiterer OK-Button, der das Modal offenlässt  
 -	x Design: favicon
-
--	noch mehr Design
 	-	x imput[type=range] schicker machen
 	-	x input elements styling anpassen für :focus. :focus-visible, :valid, :invalid
 	-	x contextual classes hübsch machen
+-	x neue Icons
+-	x dmg-mon/actions-menu: tabindex auf -1 setzen, wenn nicht sichtbar 
+-	noch mehr Design
 	-	actions menu und damage monitor unter den jeweiligen Button ausrichten
 	-	Seite für größere Screens anpassen
 		-	Schrift, Buttons und Icons skalieren
 		-	Tabellenbreite begrenzen
-		-	styling der contextual classes, disabled elements etc.
 	-	Animationen? Transitions?
--	x neue Icons
-	-	x act: icon -> gun (freepik)
-	-	x add: actual icon -> police (freepik)
-	-	x clone: actual icon -> mein eigenes
-	-	cross (um das Modal zu schließen): 10006
-	-	x dead: icon -> cross (freepik) (alt: 10013)
-	-	x die: icon-> dice (freepik) (alt: 9856..9861)
-	-	x edit: actual icon -> pencil (freepik) 
-	-	x more: actual icon -> mein eigenes
-							-> ✖
-	-	x newround: actual icon -> dice (Freepik)
-							-> dices (Freepik)
-	-	x takedamage:  actual icon -> mein eigenes
-									-> explosion (freepik)
-	-	x trash: trash-bin (freepik) (alt: X, ☓, ⛌)
-	-	x validation: ☒ und ☑
-	-	x zzz: icon -> zzz (freepik)
 -	deployment: dist/* soll direkt auf hermes hochgeladen werden
 	-	warum sind im dist/-Folder immer zwei Versionen der gleichen Datei?
 	-	HTML soll nicht in eine Zeile umgedingst werden, das sieht doch nicht aus

src/css/custom.scss

@@ -45,7 +45,7 @@ $sr2-fg: deeppink;
 
 .sr2-button:focus-visible {
 	outline: none;
-	border: 2px solid cyan !important;
+	border: 1px solid cyan !important;
 	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
 }
 
@@ -148,13 +148,11 @@ header.navbar {
 		--aug-border-right: 0px;
 		--aug-border-bottom: 0px;
 		background: none !important;
-//		text-shadow: 2px 2px 3px black;
 	}
 
 	th {
 		color: cyan;
 		text-transform: uppercase; 
-//		text-shadow: 0 0 3px deeppink, 0 0 6px deeppink, 0 0 12px deeppink, 0 0 24 deeppink;
 	}
 
 	td {
@@ -247,7 +245,7 @@ header.navbar {
 }
 
 .zero-ini td {
-	color: #990052 !important;
+	color: #b3005fs !important;
 }
 
 .ko-or-dead {
@@ -289,7 +287,7 @@ header.navbar {
 	z-index: 200;
 
 	top: calc(100% - 2px);
-	right: 10px;
+	left: calc(100vw + 10px);
 
 	@include aug;
 	@include border;
@@ -298,8 +296,26 @@ header.navbar {
 
 	padding-top: 10px;
 	padding-bottom: 10px;
+
+	transition: transform .25s linear;
 }
 
+.seen {
+	transform: translateX(-100vw);
+}
+
+/*.actions-button, .damage-button {
+	transition: all .25s ease-in-out;
+}
+
+.actions-button:has(+ .seen),
+.damage-button:has(+ .seen) {
+	outline: none;
+	border: 1px solid cyan !important;
+	box-shadow: 0 0 4px lightcyan, 0 0 8px cyan, 0 0 16px darkcyan !important;
+	filter: brightness(1.5);
+} */
+
 .damage-monitor {
 	button {
 		font-size: smaller;
@@ -398,6 +414,7 @@ footer {
 	@include aug;
 	color: cyan;
 	pointer-events: auto;
+	width: 95vw; // 95 percent of viewport width
 
 	button {
 		@include button;

src/js/sr2ini.js

@@ -15,28 +15,27 @@ const COMBATANT_TABLE_ROW = [
 		'</div>\n',
 		'<div class="actions-dropdown">\n',
 			'<button type="button" class="sr2-button actions-button" title="More actions"><img src="more.svg" /></button>\n',
-			'<div class="actions-menu d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
+			'<div class="actions-menu" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
-				'<button type="button" class="sr2-button edit-button" title="Edit combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="edit.png"/></button>\n',
+				'<button type="button" class="sr2-button edit-button" title="Edit combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><img src="edit.png"/></button>\n',
-				'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal"><img src="clone.svg"/></button>\n',
+				'<button type="button" class="sr2-button clone-button" title="Clone combatant" data-bs-toggle="modal" data-bs-target="#combatant-modal" tabindex="-1"><img src="clone.svg"/></button>\n',
-				'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button>\n',
+				'<button type="button" class="sr2-button remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal" tabindex="-1"><img src="trash.png" /></button>\n',
 			'</div>\n',
 		'</div>\n',
 	'</td>\n',
 '</tr>'].join("");
 const DAMAGE_MONITOR_HTML = [
-'<div class="damage-monitor d-none" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
+'<div class="damage-monitor" data-augmented-ui="tl-scoop bl-clip-y tr-clip-y br-scoop both">\n',
 	'<table class="text-center align-middle">\n',
-		'<tr><td><button class="damage-stun active" title="Light stun damage">L</button></td><td><button class="damage-physical active" title="Light physical damage">L</button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" title="Light stun damage" tabindex="-1">L</button></td><td><button class="damage-physical active" title="Light physical damage" tabindex="-1">L</button></td></tr>\n',
-		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" title="Medium stun damage">M</button></td><td><button class="damage-physical active" title="Medium physical damage">M</button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" title="Medium stun damage" tabindex="-1">M</button></td><td><button class="damage-physical active" title="Medium physical damage" tabindex="-1">M</button></td></tr>\n',
-		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" title="Severe stun damage">S</button></td><td><button class="damage-physical active" title="Severe physical damage">S</button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" title="Severe stun damage" tabindex="-1">S</button></td><td><button class="damage-physical active" title="Severe physical damage" tabindex="-1">S</button></td></tr>\n',
-		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active"></button></td><td><button class="damage-physical active"></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" tabindex="-1"></button></td><td><button class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button class="damage-stun active" title="K.O."><img src="zzz.png" height="16" /></button></td><td><button class="damage-physical active" title="dead"><img src="cross.png" height="16"/></button></td></tr>\n',
+		'<tr><td><button class="damage-stun active" title="K.O." tabindex="-1"><img src="zzz.png" height="16" /></button></td><td><button class="damage-physical active" title="dead" tabindex="-1"	><img src="cross.png" height="16"/></button></td></tr>\n',
-//		'<tr><th colspan="2"><button type)"submit" class="remove-button" title="Remove combatant" data-bs-toggle="modal" data-bs-target="#confirm-modal"><img src="trash.png" /></button></th></tr>\n',
 	'</table>\n',
 '</div>'].join("");
 const STUN_BADGE_HTML = '<sup><span class="badge bg-warning position-absolute translate-middle stun-badge" title="Stun damage niveau"></span></sup>';
@@ -146,12 +145,12 @@ function handleCloneButtonClick(e) {
 // click handler for damage buttons; basically toggles visibility of table.damage-monitor
 function handleDamageButtonClick(e) {
 	// get visibility status at click time
-	let hiddenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("d-none");
+	let seenAtClick = $(e.target).parents(".damage-dropdown").find(".damage-monitor").hasClass("seen");
 	// hide all damage monitors and actions menus
-	$(".damage-monitor:visible, .actions-menu:visible").addClass("d-none");
+	$(".damage-monitor.seen, .actions-menu.seen").removeClass("seen").find("button").attr("tabindex", "-1");
 	// if targeted dm was hidden before, show it now
-	if (hiddenAtClick) {
+	if (! seenAtClick) {
-		$(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none");
+		$(e.target).parents(".damage-dropdown").find(".damage-monitor").addClass("seen").find("button").attr("tabindex", "0");
 	}
 	return false;
 }
@@ -183,13 +182,15 @@ function handleEditButtonClick(e) {
 // click handler for the more-actions menus
 function handleMoreActionsButtonClick(e) {
 	// get visibility status at click time
-	let hiddenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("d-none");
+	let seenAtClick = $(e.target).parents(".actions-dropdown").find(".actions-menu").hasClass("seen");
+
 	// hide all damage monitors
-	$(".actions-menu:visible, .damage-monitor:visible").addClass("d-none");
+	$(".actions-menu.seen, .damage-monitor.seen").removeClass("seen").find("button").attr("tabindex", "-1");
-	// if targeted dm was hidden before, show it now
+	// if targeted dm was seen before, show it now
-	if (hiddenAtClick) {
+	if (! seenAtClick) {
-		$(e.target).parents(".actions-dropdown").find(".actions-menu").removeClass("d-none");
+		$(e.target).parents(".actions-dropdown").find(".actions-menu").addClass("seen").find("button").attr("tabindex", "0");
 	}
+
 	return false;
 }
 
@@ -466,7 +467,7 @@ $(document).ready(function () {
 	// Hide damage monitors after click somewhere else
 	$("html").on("click", function (e) {
 		if ($(e.target).parents(".damage-monitor").length == 0) {
-			$(".damage-monitor:visible").addClass("d-none");
+			$(".damage-monitor.seen").removeClass("seen");
 		}
 	});
 	addTestCombatant();