diff --git a/TODO.md b/TODO.md index 7855a83..9bfe6cc 100644 --- a/TODO.md +++ b/TODO.md @@ -32,6 +32,12 @@ - x Output vom HTML Validator: - img elements müssen alt attributes haben - The form attribute must refer to a form element. (bei den Input Elementen im combatant-modal) -> muss nachsehen, was ich dann genau da eintragen muss +- x minusten.svg benutzt die falsche Schriftart +- x manchmal spinnt das actions-menu, dann taucht es einfach nicht mehr auf + - Bsp: more -> clone -> cancel +- x derzeit werden die icons im actions-menu nicht dunkler gemacht (.zero-ini o.Ä.), weil ich die img-Rules aus dem CSS rausgenommen habe + - ich könnte die Rules wieder reinnehmen + - x oder die Icons mit SVG nachbauen (edit und trash) - 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 @@ -41,7 +47,6 @@ - add modal geht bei enter key nicht zu -> liegt daran, dass ich nicht mehr .modal("hide") verwende - ich könnt's umstellen, aber will ich das? - wenn ein damage monitor offen ist und ich auf add combatant clicke, springt der Fokus nicht zuverlässig ins erste input feld -- Bug: rea editieren ändert nicht die ini -> da muss ich die Würfelergebnisse für speichern @@ -62,12 +67,19 @@ - x contextual classes hübsch machen - x neue Icons - x dmg-mon/actions-menu: tabindex auf -1 setzen, wenn nicht sichtbar +- x dmg-mon/actions-menu direkt unter dem jeweiligen Button ausrichten (X-Achse) + - ich richte die Buttons jetzt rechtsbündig aus, dann weiß ich immer die (ungefähre) Position des Buttons + +- dafür sorgen, dass die Seite erst dann aufgebaut wird, wenn die CSS-Files geladen sind, damit man nicht den ungestylten Krams sieht +- kann die classes text-center, text-end etc aus den Tabellenzellen entfernen - 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 + - Schrift, Buttons, Icons skalieren - Tabellenbreite begrenzen - Animationen? Transitions? +- CSS aufräumen + - maroon durch b3005f ersetzen + - Variablen für Farben, Filter etc. - 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 @@ -78,4 +90,5 @@ - falls ja: .htmlnanorc anlegen, s. https://parceljs.org/languages/html/#minification und https://htmlnano.netlify.app/modules#collapsewhitespace - progressive web app draus machen? -> https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction - auf bootstrap verzichten? brauch es schließlich kaum noch - - könnte beim modal schwierig werden (weil auch js) \ No newline at end of file + - könnte beim modal schwierig werden (weil auch js) +- Wenn ich rea editiere, könnte sich die ini automatisch anpassen -> da müsste ich aber die Würfelergebnisse für speichern diff --git a/src/css/custom.scss b/src/css/custom.scss index d8f8a01..ddff523 100644 --- a/src/css/custom.scss +++ b/src/css/custom.scss @@ -41,6 +41,10 @@ $sr2-fg: deeppink; img { filter: invert(34%) sepia(78%) saturate(7014%) hue-rotate(316deg) brightness(95%) contrast(105%); } + + svg * { + fill: deeppink; + } } .sr2-button:focus-visible { @@ -55,6 +59,7 @@ body { height: 100%; user-select: none; font-family: 'Electrolize', sans-serif; + overflow-x: hidden; } body { background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("../img/bg.jpg"); @@ -124,18 +129,18 @@ header.navbar { clip-path: none; } + th:not(:first-of-type) { + text-align: center; + } + .th-ini { min-width: 3rem; } + .th-dice-and-rea { min-width: 3.75rem; - -/* > img { - filter: invert(72%) sepia(100%) saturate(778%) hue-rotate(119deg) brightness(102%) contrast(102%); - width: 16px; - height: 16px; - } */ } + .th-actions { min-width: 6.5rem; } @@ -158,6 +163,7 @@ header.navbar { td { color: $sr2-fg; clip-path: none; + font-weight: bold; } th:first-of-type, @@ -171,20 +177,26 @@ header.navbar { --aug-border-right: 2px; } - td.combatant-actions { + tr:last-of-type td, + tr:last-of-type th { + --aug-border-bottom: 2px; } - tr:last-of-type td { - --aug-border-bottom: 2px; + td.combatant-actions { + display: flex; + justify-content: flex-end; } .sr2-button { @include button; width: 24px; height: 24px; + margin-left: 3px; + margin-right: 3px; - img { + img, + svg { position: relative; bottom: 3px; width: 16px; @@ -195,8 +207,8 @@ header.navbar { box-shadow: none; border-color: darkcyan; - img { - filter: invert(6%) sepia(93%) saturate(7363%) hue-rotate(2deg) brightness(80%) contrast(105%); + svg * { + fill: #b3005f; } } @@ -207,6 +219,10 @@ header.navbar { padding-right: 1rem !important; } + .combatant-dice-and-rea { + text-align: center; + } + .combatant-dice::before { content: attr(data-combatant-dice); } @@ -238,28 +254,28 @@ header.navbar { } -.max-ini { - font-weight: bold; +.max-ini td { +// font-weight: bold; // filter: brightness(1.1); text-shadow: 0 0 1px deeppink, 0 0 2 hotpink; } .zero-ini td { - color: #b3005fs !important; + color: #b3005f !important; + + svg * { + fill: #b3005f !important; + } } -.ko-or-dead { +.ko-or-dead td { background-color: rgba(0, 0, 0, .5); + color: #b3005f !important; + text-decoration: line-through .1em deeppink; - td { - color:maroon !important; - text-decoration: line-through; - - img { - filter: invert(14%) sepia(45%) saturate(4680%) hue-rotate(350deg) brightness(85%) contrast(123%) !important; - } + svg * { + fill: #b3005f !important; } - } .badge.bg-warning { @@ -278,16 +294,16 @@ header.navbar { width: 20px; } -.damage-dropdown, .actions-dropdown { +.damage-dropdown, +.actions-dropdown { display: inline-block; } -.damage-monitor, .actions-menu { +.damage-monitor, +.actions-menu { position: absolute; z-index: 200; - top: calc(100% - 2px); - left: calc(100vw + 10px); @include aug; @include border; @@ -297,11 +313,16 @@ header.navbar { padding-top: 10px; padding-bottom: 10px; - transition: transform .25s linear; +// right: calc(-100vw); +// transition: transform .25s ease-in-out; + opacity: 0; + right: 10px; + transition: opacity .25s ease-in-out; } .seen { - transform: translateX(-100vw); +// transform: translateX(-100vw); + opacity: 1; } /*.actions-button, .damage-button { @@ -359,11 +380,6 @@ header.navbar { box-shadow: 0 0 3px lightpink, 0 0 6px deeppink, 0 0 12px maroon; } - td button img { - position: relative; - top: -2px; - } - /* &.d-none { transform: translateY(100%); } @@ -393,12 +409,15 @@ footer { --aug-border-opacity: .5 !important; --aug-border-all: 2px !important; --aug-inlay-bg: rgba(0, 0, 0, .75) !important; + height: 2.5em; p { font-size: xx-small; margin: .25rem; color: cyan; user-select: auto; + padding-top: .65em; + text-align: center; a { color: hotpink; @@ -414,7 +433,7 @@ footer { @include aug; color: cyan; pointer-events: auto; - width: 95vw; // 95 percent of viewport width +// width: 95vw; // 95 percent of viewport width button { @include button; diff --git a/src/img/boom.svg b/src/img/boom.svg deleted file mode 100644 index 85149ae..0000000 --- a/src/img/boom.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - diff --git a/src/img/clone.svg b/src/img/clone.svg deleted file mode 100644 index 5865730..0000000 --- a/src/img/clone.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/src/img/edit.png b/src/img/edit.png deleted file mode 100644 index f1e02a7..0000000 Binary files a/src/img/edit.png and /dev/null differ diff --git a/src/img/minusten.svg b/src/img/minusten.svg deleted file mode 100644 index e2c3514..0000000 --- a/src/img/minusten.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - -10 - diff --git a/src/img/more.svg b/src/img/more.svg deleted file mode 100644 index 0c1d3bc..0000000 --- a/src/img/more.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/img/trash.png b/src/img/trash.png deleted file mode 100644 index 264e5be..0000000 Binary files a/src/img/trash.png and /dev/null differ diff --git a/src/index.html b/src/index.html index 84fe6b8..dce61d0 100644 --- a/src/index.html +++ b/src/index.html @@ -33,7 +33,7 @@
- SR2 Initiative Tracker + SR2 Initiative Tracker