From 2ca1f4ff5428109e604158e74ba5007ddc25ab3d Mon Sep 17 00:00:00 2001 From: Viktor Miller Date: Thu, 12 Feb 2026 22:47:39 +0900 Subject: [PATCH] feat: redesign Step 8 with flat list layout matching room steps Replace bordered card sections with flat rows using hairline dividers, opacity dimming, and native radio controls to match the room step visual pattern. Also includes structural refactors (step-sections, address-sections) and running totals bar polish from the modernization branch. Co-Authored-By: Claude Opus 4.6 --- assets/css/form.css | 130 +++++++++++++++++- includes/class-form-renderer.php | 183 ++++++++++++++------------ languages/siegel-umzugsliste-de_DE.mo | Bin 16248 -> 16366 bytes languages/siegel-umzugsliste-de_DE.po | 19 +++ 4 files changed, 245 insertions(+), 87 deletions(-) diff --git a/assets/css/form.css b/assets/css/form.css index 97c94d8..950261f 100644 --- a/assets/css/form.css +++ b/assets/css/form.css @@ -183,19 +183,23 @@ right: 0; z-index: 100; background: var(--umzug-surface); - border-top: 3px solid var(--umzug-primary); + border: 1px solid var(--umzug-border); + border-radius: var(--umzug-radius); padding: 12px 20px; + margin-bottom: 12px; text-align: center; font-size: 0.95rem; font-weight: 500; - box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1); + box-shadow: var(--umzug-shadow-lg); transform: translateY(100%); - transition: transform 0.3s; + opacity: 0; + transition: transform 0.3s, opacity 0.3s; pointer-events: none; } .running-totals.visible { transform: translateY(0); + opacity: 1; pointer-events: auto; } @@ -251,7 +255,9 @@ .step-title { font-size: 1.5rem; font-weight: 700; - margin: 0 0 20px; + margin: 0 0 16px; + padding-bottom: 12px; + border-bottom: 1px solid var(--umzug-border); color: var(--umzug-text); } @@ -274,6 +280,32 @@ border-bottom: 1px solid var(--umzug-border); } +/* ===== Step Sections (inner dividers within a step-card) ===== */ +.step-section { + padding-top: 16px; + margin-top: 16px; + border-top: 1px solid var(--umzug-border); +} + +.step-section:first-of-type { + border-top: none; + padding-top: 0; + margin-top: 0; +} + +/* ===== Address Sections (grid items within step-card) ===== */ +.address-section { + background: var(--umzug-surface); + border: 1px solid var(--umzug-border); + border-radius: var(--umzug-radius); + padding: 16px 20px; +} + +/* Summary sections inside step-card: lighter treatment */ +.step-card #wizard-summary .summary-section { + box-shadow: none; +} + /* ===== Date Selector ===== */ .date-selector { display: flex; @@ -514,7 +546,7 @@ .item-cbm { width: 52px; text-align: right; - font-size: 0.85rem; + font-size: 13px; color: var(--umzug-text-secondary); flex-shrink: 0; } @@ -526,7 +558,14 @@ } .montage-toggle .radio-label { - font-size: 0.8rem; + font-size: 13px; +} + +.montage-label { + font-size: 13px; + font-weight: 600; + color: var(--umzug-text-secondary); + white-space: nowrap; } /* ===== Room Totals ===== */ @@ -627,6 +666,76 @@ box-shadow: 0 0 0 3px var(--umzug-primary-light); } +/* ===== Step 8 Design ===== */ +.additional-field input[type="checkbox"] { + accent-color: var(--umzug-primary); +} + +.wizard-step[data-step="8"] .additional-field { + padding: 8px 0; + background: transparent; + border: none; + border-bottom: 1px solid #f0f0f0; + border-radius: 0; + opacity: 0.55; + transition: opacity 0.2s; +} + +.wizard-step[data-step="8"] .additional-field:last-child { + border-bottom: none; +} + +.wizard-step[data-step="8"] .additional-field:hover, +.wizard-step[data-step="8"] .additional-field:focus-within, +.wizard-step[data-step="8"] .additional-field:has(input:checked), +.wizard-step[data-step="8"] .additional-field:has(.qty-small:not(:placeholder-shown)) { + opacity: 1; +} + +.wizard-step[data-step="8"] .additional-field-abbau .radio-group { + display: inline-flex; + gap: 16px; + background: transparent; + border: none; + border-radius: 0; + padding: 0; +} + +.wizard-step[data-step="8"] .additional-field-abbau .radio-label { + padding: 0; + font-size: 0.9rem; +} + +.wizard-step[data-step="8"] .additional-field-abbau .radio-label input[type="radio"] { + position: static; + opacity: 1; + width: auto; + height: auto; + margin: 0; +} + +/* ===== Dev Auto-Fill ===== */ +.dev-autofill-btn { + position: fixed; + bottom: 60px; + right: 16px; + z-index: 300; + background: #ff6b35; + color: #fff; + border: none; + border-radius: 20px; + padding: 6px 14px; + font-size: 0.75rem; + font-weight: 600; + cursor: pointer; + opacity: 0.6; + transition: opacity var(--umzug-transition); +} + +.dev-autofill-btn:hover { + opacity: 1; +} + /* ===== Sonstiges ===== */ .sonstiges-textarea { width: 100%; @@ -839,6 +948,15 @@ padding-left: 0; } + .montage-label { + flex-basis: 100%; + margin-bottom: -4px; + } + + .wizard-step[data-step="8"] .additional-field { + padding: 6px 0; + } + .additional-field-abbau { flex-direction: column; align-items: flex-start; diff --git a/includes/class-form-renderer.php b/includes/class-form-renderer.php index 34505fe..c4f43b9 100644 --- a/includes/class-form-renderer.php +++ b/includes/class-form-renderer.php @@ -144,9 +144,8 @@ class Umzugsliste_Form_Renderer { private static function render_step_1() { ?>
-

-
+

' . esc_html__( 'Privacy Policy', 'siegel-umzugsliste' ) . '' ); ?>

-
- -
-
-

- -
-
-

- +
+
+

+ +
+
+

+ +
+

-

+ + + +
-

+

-

&

-
-

+

&

+
+

· 0,00
+
-
- -
-

-
- -
- : - 0 - · - 0,00 +
+

+
+ +
+ : + 0 + · + 0,00 +
@@ -289,27 +305,29 @@ class Umzugsliste_Form_Renderer { $sections = Umzugsliste_Furniture_Data::get_additional_work(); ?>
-

- - $section_data ) : ?> -
-

-
- -
-
- -
-

- - +

+ + $section_data ) : ?> +
+

+
+ +
+
+ + +
+

+ + +
-

-
- is_enabled() ) { - echo '
'; - echo $captcha->render_widget(); - echo '
'; - } - ?> +
+

+
+ is_enabled() ) { + echo '
'; + echo $captcha->render_widget(); + echo '
'; + } + ?> +
@@ -402,6 +422,7 @@ class Umzugsliste_Form_Renderer {
+
diff --git a/languages/siegel-umzugsliste-de_DE.mo b/languages/siegel-umzugsliste-de_DE.mo index 4482dd3bc0c3c71d38773a2eaf3dc33a940ea4a5..256d197732db9045862d12e687e6c9562e502662 100644 GIT binary patch delta 5622 zcmXxo34Bdg0>|-_!m#J`vToWNUxq$Bf{Y?wf%jn2YMji>QvR z#UR{>k+=grv~RwoqMnwcZaiI- z*CQh~J5lX@jFGf&j!@}>mDm9zmA+cQ@8?k{W{dhx1(lm4~F7l z)W|QOI#!9g?=~{2rq-U1h+_V`bE0LG+wfS_jhUziO-GGn5voIrQ6pN7{FqJr()D}o z`2(oUdJ5IyN>oR0p*Ec#)2QbJqRvM}GynP^i4$70G*piVScjt?I04nrEYyQ@F&6W2 z1ipp52<9HDfgrZJW-c0aUklXp6HpCzwdV&qRP?|MRKsJeS*QzVqn2bTYUC?Xdtw7> zDvzS}#8uQ3->}Cus5SR}$X%KysHJL+>QEA@Jtu{V9@N*K7=xPnEL6wxP@8QjszYy} zMz+hIFGcpPDM!uZRr~oZ)cw`yi?#OHmkq~$G=WG59g|>Bq*{lgdYFy6aSm$g=AjF^!`W0^6kZm9;nwZ6LrCA)QzR6 zsojU#jOC~qIDtBU2GxN|)J*(>Y;Y6S!o98&s^clB>-(Ute_Y43Z>Cbwn&x6Vdrf2p#R(GW)@C)b2fv zn!3xVDXv0ovTD=_YfvK$ZD}_X>ithabzmT>U$55&PRO0s z{irGX+Fp18Q#t+#yJ9=mXBa+(nz3Tk5}rqGR{wan1JS6x6OS557u0i8Q8U&rp7~d0 z2q!eMQP>@4VH&=R-kCu4xC(W>59^=~H^9yqgWfeo&A?PtL%FCK%}3q03i*mK>rn0O zaj0mjjw7>b&Y~VrgS;`Oega<_*p^>yaTw}*U;%3B3NRKoqwYU|y!z%UYDWC{)d@Qw zeK+G#19}0~VP_Q;P0?2L;BNH8GVF!>urAi1*4#rcG=k=+>(bE|``}g|rWDn|>#U15 zVGY*7M(vI1h7qV4&Ookn%rYwaLUnp*HJpvw6FK(t0(-n3{q+97Po*Ij>_Ihf&>o*ct=&b`RNX{11IxqyxEi%L&R`wA|Cgw!$Jfvwt5KWnJ~qU_MAv4hh7wRy zn2x~U9AgXyRdKVgq&pk`#LJ^ylN=3kp{D<|~8{n!|f zpgK~4>fm)$kA1qhBML`-9)nuC_Nb0@M>WtJHFE<|&&@!+o}+ORE(lJ#kD~4yj_UY$RL5po7b0(@DZmgcMRoKLYRQ}vRMgXp zsF7Ypt$ht@Bq3eh&!bQsYJr;CL{vuxphhy>ex8kLXg;b#FQL}_O$@~?sCGU?I_j8X zR5Y^lsF7Sj-B5*U@Gdq-{VPLj8H=qk4fRbo5jDk&P+vsLQTG*~I{2DBE<%mG7&U-0 z?=kCtl8QR;9X7#BsE$-)0@k7$OyKK_eP=R|4Q?FkPJ8|$s)1m3Xc$JK29jt^M$Jen zY9NC#oc2v772S}Bx?we{=Y{tCX6py2ksigz@LTMN%~Rcfhzvok{d1@pSb-YATGZcs zK1B`m9O^lj(a|QjK}934u@^K-bH5M5Q5QDDP;6yQLya^8)zC<5CTak)?C0|^g5!l4 ziG`>R?!ZR4H;whz?k?wqdRAdSs6TES>e1IY@Zn%Db|B&82l6k{hN!R$%^%1K9Z)_YpORBLu%+7i8`OH7 zCLfdM$v?(cMXjVGTHA|H`kq?V{?TYm4Y@iz+`Pdbu4L_6a_ z(e4Ve2mA3Ga+oY7TgX`Q9GOr0lC`7{QPHu(jRphs%CsCb71S<~$>bc-8?UmA{7R0J zUx>;9a$I*gzxN)yzcS%E=|&zQzC7V+97Lv*mE>j8o~$Feq&0bn6qAcY|Fx-dpOldz za)h)XDx1h^GJ~XO_VcI=B?pO06bba!+<$(Kr2ZoL5BV#ZLY^dlAzzaVL?wZIPVSPI zh{`N7ge)O;o~gOzs+S1&;892=apZOKZOPKGGEYfbvu%E!NmH|Wmt2Y|^7zauc|LAN wfbYyHB{$ma3-Em;t7KDBsK-CYd&REg6#szCX>+FMiU0rr delta 5527 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 nrbn$0^d)&$czmTzUJCN1wb&QrtJXHy@nzqXZ}r diff --git a/languages/siegel-umzugsliste-de_DE.po b/languages/siegel-umzugsliste-de_DE.po index 0109a46..4374dcb 100644 --- a/languages/siegel-umzugsliste-de_DE.po +++ b/languages/siegel-umzugsliste-de_DE.po @@ -1137,3 +1137,22 @@ msgstr "Mobil (Beladeadresse)" #: includes/class-cpt.php msgid "Mobile (Unloading)" msgstr "Mobil (Entladeadresse)" + +#: includes/class-shortcode.php +#: templates/form-page.php +msgid "Step" +msgstr "Schritt" + +#: includes/class-shortcode.php +#: templates/form-page.php +msgid "of" +msgstr "von" + +#: includes/class-shortcode.php +#: templates/form-page.php +msgid "Edit" +msgstr "Bearbeiten" + +#: includes/class-form-renderer.php +msgid "Montage?" +msgstr "Montage?"