From 0ad308368921cee85efdc69885d66b307c675d92 Mon Sep 17 00:00:00 2001 From: Tobias Date: Tue, 28 Feb 2023 21:58:41 +0100 Subject: [PATCH] - replaced more png items with svg - svg is now embedded into HTML, not loaded from file (loading from file buts off dependencies, namely the font for the -10 icon) - started cleaning up CSS file - started removing unnecessary classes and replacing single property Bootstrap classes with the property itself --- TODO.md | 21 ++++++++-- src/css/custom.scss | 91 ++++++++++++++++++++++++++----------------- src/img/boom.svg | 7 ---- src/img/clone.svg | 6 --- src/img/edit.png | Bin 2343 -> 0 bytes src/img/minusten.svg | 15 ------- src/img/more.svg | 4 -- src/img/trash.png | Bin 6370 -> 0 bytes src/index.html | 12 +++--- src/js/sr2ini.js | 23 +++++------ 10 files changed, 90 insertions(+), 89 deletions(-) delete mode 100644 src/img/boom.svg delete mode 100644 src/img/clone.svg delete mode 100644 src/img/edit.png delete mode 100644 src/img/minusten.svg delete mode 100644 src/img/more.svg delete mode 100644 src/img/trash.png 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 f1e02a7f446678170be461b455563699dbebf576..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2343 zcmeAS@N?(olHy`uVBq!ia0y~yU;;9k7&w@L)Zt|+Cx8@lv6E*A2M5RPhyD+MT+RZI z$YKTt(Mk|z6yFyG5|k`)jVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw=TsOV3C zPl)UP|Nnu^kqIIfeL4;Fd2mUPUoZnR3mZEJFTa3@xP+vk>d-@qmvdunNCcC@n_rcFsr}w{$v)*{$GAY_(v(e1D zE$ZTYR$l45_1F5@-(2h3o|$ue=l09JW;-`NuxOO6u#&yK`tZ5UPs^WtEvcD2nQzO{ z@+_mj$M4>G=N4Ug`f~m4z4|dL->h%gwV&zLKdu$OwHLe_<=_Z|ALpZIX*n=*1vD^; zEMQ>Opc>O)KWk1tLtgNK6M1TXrsvnMYnV7!=ZF7tE{WSu3J%6IKCa#x@FD!bk35w> zq6YtzHp~EWUgVhqIlG#9>sfo=Ivt5;RIU#C7=GZyx9~rr8$SA_0Lh2zN`d6XcWprO zpxo3yq90zyEd!D#!=nFjMeKiWSkJoVcJr+LOxI$SpRaG&|JLh#Jfr;khzmfnRy8I3 zVmxDg?$Vd*8|=%~UI9rtX5Em#q91*7z_uldS)=sdpo&GKSz-8Io|5c3Z`LF!F z&Fa(l!C$c5vvKelr}xUbhxznkIT+ffd#FxbQJkL$sD>Jj^2vgSOVKkxqk z2j}P8*Z=$T^Ye4MF!p~m|99;E59#{H`G0a(|DMk_^P9buV&u2@8s|-K_J5WzjO>fbVbqY>&(Tm@jSH&+zCUQ^#*^g?IW5I|dDh{}1bdc!t4D+-Cfc&wgOPEW`gY zhCets|MTU4Z2!*v|C`+B{P%MIzpVpOI{&}zdnkY3|Ih8+C-(1k{_{Bc;r)Bt|2+QP zSYI8#_GA8g>wh0>&+p%RzV6BWd((?!4m>fLFZqXe#_jM%bN82Lp3QwwQzurjts^aL zKHKvTl?Qfzwmx{~!^{VBY(?wpEA^+`e0SmK&Y$l;wEy=0-H>x=pI!CedynUvf4==F jTVL+p&Z-*zuE;mxag3~*xe>?3Kur`+S3j3^P6 - - - -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 264e5be6b4e43e8d5a4703d89a357eeebaed8b32..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6370 zcmcgw3pCVQ+kgIJ+!Dg65s4U_O71#{V^U&_+sSn*nu;+_VvJi-jH5fH{tDwdr>jzq zkfMuGojOyBibRPrE{QHvlv}<%mG?XE`>t=TbKbSSch<7z=lMO)-uv16x1YUd@A2|* zR-C3W4FD9WF3VQ}5D+AQoDBNwpq4vW|ry9TJp54~LHI{&!N-Z{F0#T-Gqb3s3cxp4Cd_*a^>4uNI1`$SsB= zzmbdF#nt3Vo@n?qVO@;uX$5ZG95?Y5YGLBfiA0DN znLLtd6k3^Bbw2!pLBg^uMz=_sYu=G7YNkfGOw>hH4brGd3x(I;yvZO!i8zP++g;9J z%_zlsEG{wYaJF;NI};fgd;6B0oZD?1GnCR0*Dx52JGhF=#>QV^0-G8gAq}77F_CgF zu4k}^Y(f)r6DMc{0e$o;S=)UgaJ%xF8Lkta_(_A2Rk8ER!bmP237as%h4 zY{x)trk$Cvr9>gcoh{GhUA7f^`jD1Z%*_w}K{$3AS<46lqte^ri!Hx5?`W)CQa+yk zHWYcszW)v?K3%u|6g_F|DsJo7WvHD2)6`JI>e3py8u1yj_8DWsBjGf#*z6mN#q=I- zmKM~|F-A;Bk*MokVDHljM%D$VYX?wJjsNd;MepBhA`jcy>FEQ{sS$3Rb+Pke!VHB+ zU&IsC56y%X!!J-*pOp+oT2WVlD5~5uxLTI4pGf^NUt~}Hktf0}upB`By z`+=Y68u`}B#Ky-|@wM3GM)}L%4>@#f-I%3Gz*tW$Rwh6CRDM4BcEb3o{>j3YGZWr~ zvPcup!MYa>Et4uI-;XwZc2ABSESkaHHrCao^?if~r+d`lMNFv+$1*m#rRD6T-Zf@| z$_%|Nj?b?q8`9($=OcuiWg&-ezxfVAUoJdlL%Td*sIU2HYefxNc(7@FQ{+=YZ|c5s zf`DaA6YoBZFWY&OoidZ)wnWgAby1>jYF?Xa^Q(v>XKU18^{Sxu_}3% z8{iWK5A`Eq6z?B%MD%8-aGdsE8|{C2a{hzvV#;c`gh)5>ul>5fx~30N;bJ^V@*2$U!JZrg4&phz6s8bD& zrP60jLuk5qss^|_bM{CRxf*LrjDbIoxgNv#J1Z5~xx4@h6hFVC^moxg68B;K4FZ9p z7)I)}v^dA@AQVUI3MI+z-DFr@S+jdK9V?E$h9y8H}rgz6>*%P(t;B_l|u0ZHD z8{_XcvFFkQRzPtVO_?z(O9lErJ&?-T5klnJUi|>fb^qitAE2TPMLYLPn=0JdJd<6J zO7&PFC)IO4TXclHq>zSiJuoq~ zuqZnKUU#y!b9l1@T%fr7j&gndbR#k}iMwT)Oqp4#@bidR%ECfQK_1R;9ZC5XIyVLT z#!_nq_4NYBBnAGnJ>*@d)8KL0AUWHQWM;7thLrqC;3a5HHpBRZ2EY`J{sW0l=75){ z8d#W*?UjciOUzWS;hY=gP>zrpD<4xBL&5 z{~Iib#45X%3SC(~$~q1PbcgSz!6p^p9^^$SszBQjn?Iv!V&e>qzbIEqotK$EHLUuJ5@eGV ze5po`YxUTJbGb&&Lk-%xZ0L;TXiD{<(m50KI2qm>h}>b8Dr31vgvK|c`IEnk#M}R+ znO-*Dj<&EL%S3pvU-zOR#t0ahjxTe1Fx)fDorkkFP2rmBWkimK3d zjLton6DC11M#4B$?-rI7h&IQnj3*N)m+Yp=rK62?6sajpgF$>9_VXcVGvL_03CFr`o)6wz{>NZ=Oo)=5yDqy%o80U8ESc~>9!p#+K~C~Pi2lo>FE{LC~F z?GCVoxzoxGSa~0&e?VV3&{(yBT2+z;*2+()`_aL?4Yk<&6NT@Lq+ke@o@$sqN4_G8 zKpC@CY1A_`*@yU(d$@CXfqxBEr&LRViNJSe`gb8kQSVbSh}@gkbXm5@ zB~~S$2aQ(?$g9y#&rd~CAfenw8S@qU_RzAmX27TpfW29Ttqy!xnk%zK7h)*Tm&zn; zSF$VplBZp;~NqvvPABW zb7pt3%_e>XIeUTUz=l&N5RlUxNBZ+5c;1)YxG>(n?T!i#xV$j+zJI-jCWzSY_G zId{$TBncVPHc@D6at96|hz7rh*Mv5{=Yz$Ksu+J6fl_3t*{Eu9N`fwP)L46gn zEJ8{k!v|^ww#Y1V3Y}ZfDxr}QzQr8d#MdWKb|EEbeNh4>iyngt&Q)TiWFGX8hY60FP9veB*qcD9Jr=>2_S0LU z4!gFS>lLF znsmj+qB4s5O%w3qPC)GHiYg_`ML5FG$ANB_`i0 zNn<1vxl#EpoZ=ce#^xtfKG@v(z!TGZF_q26{k>aF%pFr7t<7T8u}Y#o9ifC!9&`kWLw z*l<5zV9PU;Qh}T66O;lBEtnGe@)5NuXw-nc3cfjgIjE;~+e`%=yq6MdzClJ8(w(9S zf2N7tluwJe@4^kMkDp1YA%5*ZOfGWNV0m6?wm<@)hSwUN)T*DS!mT~ z)uEZZe@tMTvnci5g3fny+&Jdfw90HRQH?z$SGAHZ9kar(=gBe~4cW=(DCu$^*)urL zTnA&g<<1Pyw+NvS1UZ%q%Uqeaxkw%fL8K|;<#M$tXw-t01fQ7h0_vIFwv5B|hcJ2A zfImv{HTRYwLprsBFhw(^{e*6_4|EXJThLV%-Dzqr6o?-5>ju~_gf9GXiZ5HLlaG`j z4}t|b`l+gL^LSW_uPIGNAJS8_xj{VHyX?rv|Ng8JvB{+<7~@Y^NaTd}4> zpZKr1Z7jxBjF|1NFS)OBfFI2U1Wb4=)Rna^^{?!OfnLz$xR{ z&#@S#|7L0}t= z6N0Zkt+3Ai45SaTa1&HYVqT^pDdvLd)#S6r(1*90S!0Z?Ma2>frV{){Vt?S^OA>6U zmS=Az1y^T&d~#X=t9f^roN=3@r;}PvFumGNeuG}K`ffjY(dl4^F_a>ILs7SpA7f$- zA?Nz9MkdlV=yi^t;9PDrS#-vD`w)uSHAqhWDUjH>!yzqo^1Cxo-?b!jtMTU^!L}zf zjxTQFL%KFf$8v6wUL2%!)<4sdoeYzM=#jyG0{6s~6E(2d8FKE7ZI}rcEeJoUKf;Qg7ruWccVw%P(7}gazg+7jG5h0d`~!)3q0)>X+4AwWmJA;f;ZU`)F#5%nNpDr? z8NNu?_7orJcjWH7WFz#(x1Oq*@$*G_b_9CgttQ9&kqF^U5%}8Osgq4lr36FttjVN{ zH8U6+f_S2#W+$&Z`ha&QzU?79pe<1rmz*i;?W&plK!n$vpYYlYLn%h^8xL{jyN$`q zp|em)KfxK_nDz?%-Ylag8A;wFe^rbih+bD!TPcX5w5nrBR9B< z{hN2d!gulXd*hKM#@nklPva&=hvFCVM?Y>0~%J?`3kMtoqCKBPEsD`}OLwuAT zp-LQOug;R1-1s6Q`E_a@*l1?Bi*J%We={atT#FKZK`#0YwMNG}!=K_Jlgu^wqTGw| z#8s7<-RYC0%sIxTJCp*j&NYDrqK_3%eTbFMw^4(#L=Vy9sB$PLzodbgkl*J-jVN9u zeIkAvUUW~KmZbDqaC1$LNS`j#P2JunH*Nak` zFIfl^GcPX|E~y}5){z7#8E!OkSnvTSH|&0+KG2d(PPl$*u;lmirZcYdVn_EInW)w* z7FKvp{J>_ebrm~PNLzv$O)aN2FuI)858>r xZ4P!9jIXB8Z5exdYVbY%-f*N*$^KL0+UHd_4XOK=qJ0NIb@EtV>d5%ze*mC*A^HFS 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