diff --git a/TODO.md b/TODO.md index ba3da97..7855a83 100644 --- a/TODO.md +++ b/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 diff --git a/src/css/custom.scss b/src/css/custom.scss index 2ddeadc..d8f8a01 100644 --- a/src/css/custom.scss +++ b/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; diff --git a/src/js/sr2ini.js b/src/js/sr2ini.js index 9605e39..7198ca2 100644 --- a/src/js/sr2ini.js +++ b/src/js/sr2ini.js @@ -15,28 +15,27 @@ const COMBATANT_TABLE_ROW = [ '\n', '
\n', '\n', - '
\n', - '\n', - '\n', - '\n', + '
\n', + '\n', + '\n', + '\n', '
\n', '
\n', '\n', ''].join(""); const DAMAGE_MONITOR_HTML = [ -'
\n', +'
\n', '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', - '\n', -// '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', + '\n', '
\n', '
'].join(""); const STUN_BADGE_HTML = ''; @@ -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) { - $(e.target).parents(".damage-dropdown").find(".damage-monitor").removeClass("d-none"); + if (! seenAtClick) { + $(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"); - // if targeted dm was hidden before, show it now - if (hiddenAtClick) { - $(e.target).parents(".actions-dropdown").find(".actions-menu").removeClass("d-none"); + $(".actions-menu.seen, .damage-monitor.seen").removeClass("seen").find("button").attr("tabindex", "-1"); + // if targeted dm was seen before, show it now + if (! seenAtClick) { + $(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();