updated to-dos

TODO.md

@@ -50,13 +50,16 @@
 
 ### open
 
+-	im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
+	-	action-menu und damage-monitor sliden jetzt nicht mehr rein, sondern bleiben an Ort und Stelle
+	-	das sollte die Sache verhindern 
+-	action-menu soll zugehen, wenn man auf eine freie Stelle klickt (so wie damage-monitor) 
 -	make color scheme friendly for people with red green bindness (Felix)
 	-	see here: https://venngage.com/tools/accessible-color-palette-generator
 	-	current main color (turquoise): #001d1d
 -	warum fkt. das Ganze nicht als Webapp?
 	-	Firefox (android) sieht die Seite nicht als installable an
 	-	Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux) 
--	im FP3T Tor Browser kann ich rauszoomen, bis ich die ganzen damage monitors und action menus sehe -> verhindern!
 -	bug in validateCombatant: OK schließt das modal, auch wenn die Eingaben invalid sind
 -	wenn ich bei add combatant mit der Maus auf OK klicke, macht er das Modal zu, auch wenn die Eingaben invalid sind
 -	nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht 

src/css/sr2ini.scss

@@ -1,10 +1,10 @@
-$fg: deeppink;
+$fg: deeppink;				// #ff1493
-$fg-bright: lightpink;
+$fg-bright: lightpink;		// #ffb6c1
 $fg-dark: #b3005f;
 
-$bg: cyan;
+$bg: cyan;					// #00ffff
-$bg-bright: lightcyan;
+$bg-bright: lightcyan;		// #e0ffff
-$bg-dark: darkcyan;
+$bg-dark: darkcyan;			// #008b8b
 
 @font-face {
 	font-family: "Electrolize";
@@ -260,7 +260,10 @@ header.navbar {
 }
 
 .damage-dropdown, 
-.actions-dropdown { display: inline-block; }
+.actions-dropdown { 
+	display: inline-block; 
+	position: relative;
+}
 
 .damage-monitor, 
 .actions-menu {
@@ -272,16 +275,28 @@ header.navbar {
 	padding-top: 10px;
 	padding-bottom: 10px;
 	position: absolute;
-	top: calc(100% - 2px);
+//	top: calc(100% - 2px);
-	transition: transform .25s ease-in-out;
+//	transition: transform .25s ease-in-out;
 	z-index: 200;
+
+	right: 50%;
+	transform: translateX(50%);
+
+	opacity: 0%;
+	transition: opacity .2s ease-in-out, visibility .2s;
+	visibility: hidden;
+
 }
 
-.damage-monitor { left: calc(100vw - 1em); }
+//.damage-monitor { left: calc(100vw - 1em); }
 
-.actions-menu { left: calc(100vw + 3.5em); }
+//.actions-menu { left: calc(100vw + 3.5em); }
 
-.seen { transform: translateX(-100vw); }
+//.seen { transform: translateX(-100vw); }
+.seen { 
+	visibility: visible;
+	opacity: 100%;
+ }
 
 .damage-monitor {
 	button {

src/js/sr2ini.js

@@ -1,5 +1,5 @@
 // Register Service Worker
-if ("serviceWorker" in navigator) {
+/*if ("serviceWorker" in navigator) {
 	navigator.serviceWorker.register(
 		new URL("./service-worker.js"), { type: "module" }
 	).then( (registration) => {
@@ -9,7 +9,7 @@ if ("serviceWorker" in navigator) {
 	});
 } else {
 	console.error("Service workers are not supported.");
-}
+}*/
 
 
 /*
@@ -60,7 +60,7 @@ const DAMAGE_MONITOR_HTML = [
 		'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
 		'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
 		'<tr><td><button type="button" class="damage-stun active" tabindex="-1"></button></td><td><button type="button" class="damage-physical active" tabindex="-1"></button></td></tr>\n',
-		'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><img src="zzz.png" height="16" /></button></td><td><button type="button" class="damage-physical active" title="dead" tabindex="-1"	><img src="cross.png" height="16"/></button></td></tr>\n',
+		'<tr><td><button type="button" class="damage-stun active" title="K.O." tabindex="-1"><img src="zzz.png" height="16" /></button></td><td><button type="button" class="damage-physical active" title="Dead" tabindex="-1"	><img src="cross.png" height="16"/></button></td></tr>\n',
 	'</table>\n',
 '</div>'].join("");