From 7648e49999f922118410f5140063725385001a49 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Thu, 8 Dec 2022 19:19:25 +0100
Subject: [PATCH] Fix status card close button location and margin

---
 package-lock.json                    | Bin 226679 -> 226779 bytes
 package.json                         |   8 ++++----
 src/main/css/snippets/validation.css |  12 +++++++++---
 src/main/js/Validation.ts            |   4 ++--
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a4243ab3bb407792c584a53794feb281c49947ba..0b47c4b0a3502f438311ba603ab1781843703ca4 100644
GIT binary patch
delta 1918
zcmciCOKcle6b4}38PYT=PQoKaYLig4;t?FhW5@F_0twsWw`a!V@x(J;pp0K}#*eYb
zj%Vx&0b;=hLBd^Jv4A!eR6<Z_#lqVlkU)`8i4Y5fDz$8QZ33!<P^ExLn+;1OygX-f
z?yqyc`^PVi?|*e{Qh?l|-vZ>dy?ubN&%q4Zxdz7J4a@@ryEEvoFNVeH?_-d_mmu}g
zG`xD^9DH|d_LD1k;TgE!Vc=@Of%rLW7I~xCg51#C#kdle)+Nt6pBGmoqLg9$u0*O)
z??t`MuG^o|Jqe=dw#-~1khGk=X44jW-e9Dq5rWOetNn7)rG%1fg=I{m(1=+95{a8Y
zf_(5(hzB0KH+1fBUZxy!%b{$>YWwYU#f<ao)eznFhK!C{u2n;oK#~sSHN9L-)yh<8
znRa=^c17s9STDm_OoUXpa82w;l)B>ebUXQouODc};I=i7zP=w&!;wE8WrS1g7<`d+
z+>J>@=nmhLoV_fQDXvAWT%yKiRVD1Fgt*u+l0mVnCaPkJ5Iu^AAXAb^rFmH=IHy|(
zxO{7AQIm77LP0HSc9CdQv}~fRqg#uIG2euQIQ7awXmAh$V~YqJ15cx8O>hFZ;cwDY
zGS}4&E*Q5$nknUFwMq)kM%|G5(nd#WXRI(o_6yOJ=o8FZ*vJWLOxIcge>~QTDSETh
zW65r&Vn<q}N7-<3TD+gG#;RVpcZEkZiBF-Mv-n9!+@^41i9&lm@cglwUeU}v+OmOX
zaJdb>q+$AH23`IDoPzoEf-KZ)L2q`Y9`2GcBGuGvHScUiN)e%0C)d`aG99&8R@N=j
zSE{ExvdTq!zH(S%3+kH08&RgM6m)MT5|l!f8k_UU$r5X7aPNRe#3k(9;NuTLW&&Nh
z0DNdZjh{w8RPlw3+;<i;irTjoCEpG=IflwsmWzp?ZHg_qu)^7vOnME|s>OAoDJ*LS
zlcaUB7IhZ0<&3o!v|<~aFCu!X-4&zLSL2+L37}iI!92YA`jdlG1MuntX!Cu*p#5*a
zadfbXpS-(wX*sdt@0BgNWfGj>+Ax>-eymC9jgrYX4LTwVRNElkbvwE4ZZ}(PznfMI
zoYEt*LM+}1NDZC#GPO>{4pK@o&nGIbT+oTO9{~coq2Xy%dK;UDJKhO&^(!!em|fub
zSL>xbK6%(e&oS8e;I&=wLi*@L|96Jlk7GQ_4Iec^hZiTY)9B1Rb`A}rA4l&zip?M8
z9RbO~))~xwXJiBy(ZxGp{?OrI=<xi~2&AFmR)=@~CwTDC8yb4s82<7zgR>m|*?pse
zw><bcjeqMHCAxdDANtSoYyfxKXW{fuW9W@tFpi8kHi=fxV-G{)yD>yx2h(WvJ!}H)
UyRavaaUHn+Ddz?UMZ7otHw_J(@Bjb+

delta 1927
zcmchWTWB0*6vz2?5>gYlO_d~8(x$ga!*1Q_>}^(yc6VlWHksYI?9S{Z_>jzQc4l|8
zvpYN4E2u>ue5p3_LBBo-B0lIt3%%julls^+v{k4eAyp}bqS*Q-hz)Kcp&<AoG*5@~
zbbjZ5&Ts8k`yap9mwo806C3>S)beJ1{_?%M03EvlM$p$+zyMsg5%5Z{dF@lM8xoik
z^_{Uz!rPMl>N0lvB&w_f63&I}P&qY@ln=m^(wwh(1cl_;V#rk7wCGk_zHC9D)6=>?
zmq=%;lIajV93h+S92xZr#aTZkv;tDP<&tvLbTdkrl{6km)jU))@2@93W{xr7-s4VK
zeg7ExX%!rW8_Y0_t&MIn4Z-ul<!y@n{}Awei`LYNCn=P8U09U049+a-9e0DP3Nxn1
zC2|X#=C6_2awg_rrC^{zSMt$JyIv)W2_I8c8aiK&yYXy9rkLq=BVDyhP5AA`e-o78
z9{Qzi3VW~Vhi}t%l)BZ6>fm6X60es{Z#mLn)AMCR(A@&rj+RbX#TJ<hxp6amLRg6V
zk`#{9({W!SI^$8BO@-wsPnGeTp>RcNw{<)cu!5R9Unpg?pqY&0=w~NLpdVMk<i7(s
z32|x9yBkb*g8}_cX#VgDnj6Q4pmfop#JmI<sp`I_l}HMqLPjyzyn}Q3o4C$fy5-8%
zS&L7L3Kflb(?PSyEEPny$qRfmi7$mBBwt}wyxgF@Gj-Ka<XXMR(Q@xRJQ}q?8D1JX
z+<j&VT=%1gw*iR;FMt=(wKKLU#Z7wTOweR4KVCBeVLTZ!bYDo6^SU<gZ-@CD<<-)v
zRHbX7V!*{&vZoL)u_l++JB3O<A}lgQ(U)Q73vwpOa$G~y*;HdQ0w+3n2OK%~$aWb0
z6~*f3jsk!8tBc_CUGSX_i9Y@UjKlA4PASxMp6$pBiz>%6Mzk8uv0*LO=5&^DQ(TVI
zBvA-u9fHEwN;5>G=HL>YUP9iI=`EymMp7#!hgolFY^N4nVpCLG@h?S;t*5}(_jTXu
zg7@~KiTgGZ&3zAcA?7+5MfLl=y@NrDmMa9_W*sfV7ZFq5R#7#G(1M3kI+D1crqUK2
zi!?>C2NMtsS(wpgd4kV6G*@_*OS%O$E@v#ZQBZ@8tixLjDzzl~WDE#s>H!!-udjet
z;fgqdhHnBp`e+5%pL91?z;3kmCK!Rk5Bj^$X0bYeJ=#rg2GHX<Y@mB~72Fk{Jnqw%
z7+rGo4)xoF&5k}hV4K_?{WQ%*-|Xw1<@h1n7<xEiBeqBGq^8cTwY$_I+r2+`Mn@+S
zAAtj#PEI262sYZS?#G0ecTmc$@xNaH=h0~ndjUPZ3<kQ(G3?8}9ncbiH*7>VmcZ`V
QchJe+n{ofc$y?9;4HuW8{{R30

diff --git a/package.json b/package.json
index 17a0da2..72468ac 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@fwdekker/template",
-    "version": "3.5.0",
+    "version": "3.5.1",
     "description": "The base template for pages on fwdekker.com.",
     "author": "Florine W. Dekker",
     "license": "MIT",
@@ -34,10 +34,10 @@
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-webpack": "^5.0.0",
-        "ts-loader": "^9.4.1",
+        "ts-loader": "^9.4.2",
         "ts-node": "^10.9.1",
-        "typescript": "^4.9.3",
+        "typescript": "^4.9.4",
         "webpack": "^5.75.0",
-        "webpack-cli": "^5.0.0"
+        "webpack-cli": "^5.0.1"
     }
 }
diff --git a/src/main/css/snippets/validation.css b/src/main/css/snippets/validation.css
index f5cdaab..de520a5 100644
--- a/src/main/css/snippets/validation.css
+++ b/src/main/css/snippets/validation.css
@@ -1,14 +1,20 @@
 .status-card {
     font-weight: bold;
+    position: relative;
+}
+
+.status-card output {
+    display: block;
+    margin-right: var(--block-spacing-horizontal);
 }
 
 .status-card .close {
-    float: right;
-    display: block;
+    position: absolute;
+    right: var(--block-spacing-horizontal);
+    top: calc(var(--block-spacing-vertical) / 2);
 
     width: 1rem;
     height: 1rem;
-    margin: 0 0 calc(var(--block-spacing-vertical) / 2) calc(var(--block-spacing-vertical) / 2);
 
     background-image: var(--icon-close);
     background-position: center;
diff --git a/src/main/js/Validation.ts b/src/main/js/Validation.ts
index 431a76a..4119a3a 100644
--- a/src/main/js/Validation.ts
+++ b/src/main/js/Validation.ts
@@ -34,14 +34,14 @@ export function showMessageType(card: HTMLElement | HTMLFormElement,
     }
     const output = $("output", card)!;
 
-    card.removeAttribute("aria-busy");
+    output.removeAttribute("aria-busy");
     card.classList.remove("hidden", "error", "info", "success", "warning");
 
     if (message == null || type == null) {
         card.classList.add("hidden");
         output.innerHTML = "";
     } else {
-        if (type === "busy") card.setAttribute("aria-busy", "true");
+        if (type === "busy") output.setAttribute("aria-busy", "true");
         else card.classList.add(type);
 
         output.innerHTML = message;