vmiller/Siegel-Umzugsliste
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: vmiller:f1f5c760c2e5a188ad5c4f6a503bdad63a0b641f
Branches Tags
vmiller:main vmiller:feature/ui-ux-modernization
...
compare: vmiller:feature/ui-ux-modernization
Branches Tags
vmiller:main vmiller:feature/ui-ux-modernization

1 Commits
f1f5c760c2 ... feature/ui

Author SHA1 Message Date
Viktor Miller
f6c7af7cbc fix: polish form UX and step 9 summary translations 
- Add spacing below Datenschutzerklaerung text
- Fix missing Umzugstermin on step 9 (wrong field names in JS)
- Remove number-to-checkmark animation flicker on progress dots
- Add cbm unit label to furniture item values and summary
- Translate all summary field labels via l10n (Name, Strasse, etc.)
- Fix room names showing lowercase keys instead of proper titles
- Auto-check checkbox when quantity is entered on step 8
- Remove redundant Sonstiges textarea placeholder

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
 2026-02-12 23:31:25 +09:00
5 changed files with 63 additions and 30 deletions
Expand all files Collapse all files

8
assets/css/form.css
View File

@@ -249,7 +249,7 @@ body.umzugsliste-standalone:has(.palette-c) {
font-size: 0.8rem;
font-weight: 600;
color: var(--umzug-text-secondary);
transition: all var(--umzug-transition);
transition: background var(--umzug-transition), border-color var(--umzug-transition), color var(--umzug-transition);
}
.dot-label {
@@ -465,7 +465,7 @@ body.umzugsliste-standalone:has(.palette-c) {
font-size: 0.8rem;
color: var(--umzug-text-secondary);
margin-top: 12px;
margin-bottom: 0;
margin-bottom: 16px;
}
.privacy-note a {
@@ -661,7 +661,7 @@ body.umzugsliste-standalone:has(.palette-c) {
}
.item-cbm {
width: 52px;
width: 75px;
text-align: right;
font-size: 13px;
color: var(--umzug-text-secondary);
@@ -947,7 +947,7 @@ body.umzugsliste-standalone:has(.palette-c) {
}
#wizard-summary .summary-item-cbm {
width: 60px;
width: 80px;
text-align: right;
color: var(--umzug-text-secondary);
}

63
assets/js/form.js
View File

@@ -297,44 +297,44 @@
// Customer info
html += '<div class="summary-section">';
html += summaryHeading(l10n.summaryMovingDate || 'Moving Date', 1);
var day = getFieldVal('day');
var month = getFieldVal('month');
var year = getFieldVal('year');
var day = getFieldVal('umzug_day');
var month = getFieldVal('umzug_month');
var year = getFieldVal('umzug_year');
html += summaryRow(l10n.summaryMovingDate || 'Moving Date', day + '.' + month + '.' + year);
html += '</div>';
// Loading address
html += '<div class="summary-section">';
html += summaryHeading(l10n.summaryLoading || 'Loading Address', 1);
html += summaryRow('Name', getFieldVal('bName'));
html += summaryRow('Street', getFieldVal('bStrasse'));
html += summaryRow('ZIP/City', getFieldVal('bort'));
html += summaryRow(l10n.summaryName || 'Name', getFieldVal('bName'));
html += summaryRow(l10n.summaryStreet || 'Street', getFieldVal('bStrasse'));
html += summaryRow(l10n.summaryZipCity || 'ZIP/City', getFieldVal('bort'));
var bGeschoss = getFieldVal('info[bGeschoss]');
if (bGeschoss) html += summaryRow('Floor', bGeschoss);
html += summaryRow('Elevator', getRadioVal('info[bLift]'));
html += summaryRow('Phone', getFieldVal('bTelefon'));
if (bGeschoss) html += summaryRow(l10n.summaryFloor || 'Floor', bGeschoss);
html += summaryRow(l10n.summaryElevator || 'Elevator', getRadioVal('info[bLift]'));
html += summaryRow(l10n.summaryPhone || 'Phone', getFieldVal('bTelefon'));
var bFax = getFieldVal('info[bTelefax]');
if (bFax) html += summaryRow('Fax', bFax);
if (bFax) html += summaryRow(l10n.summaryFax || 'Fax', bFax);
var bMobil = getFieldVal('info[bMobil]');
if (bMobil) html += summaryRow('Mobile', bMobil);
html += summaryRow('Email', getFieldVal('info[eE-Mail]'));
if (bMobil) html += summaryRow(l10n.summaryMobile || 'Mobile', bMobil);
html += summaryRow(l10n.summaryEmail || 'Email', getFieldVal('info[eE-Mail]'));
html += '</div>';
// Unloading address
html += '<div class="summary-section">';
html += summaryHeading(l10n.summaryUnloading || 'Unloading Address', 1);
html += summaryRow('Name', getFieldVal('eName'));
html += summaryRow('Street', getFieldVal('eStrasse'));
html += summaryRow('ZIP/City', getFieldVal('eort'));
html += summaryRow(l10n.summaryName || 'Name', getFieldVal('eName'));
html += summaryRow(l10n.summaryStreet || 'Street', getFieldVal('eStrasse'));
html += summaryRow(l10n.summaryZipCity || 'ZIP/City', getFieldVal('eort'));
var eGeschoss = getFieldVal('info[eGeschoss]');
if (eGeschoss) html += summaryRow('Floor', eGeschoss);
html += summaryRow('Elevator', getRadioVal('info[eLift]'));
if (eGeschoss) html += summaryRow(l10n.summaryFloor || 'Floor', eGeschoss);
html += summaryRow(l10n.summaryElevator || 'Elevator', getRadioVal('info[eLift]'));
var eTel = getFieldVal('eTelefon');
if (eTel) html += summaryRow('Phone', eTel);
if (eTel) html += summaryRow(l10n.summaryPhone || 'Phone', eTel);
var eFax = getFieldVal('info[eTelefax]');
if (eFax) html += summaryRow('Fax', eFax);
if (eFax) html += summaryRow(l10n.summaryFax || 'Fax', eFax);
var eMobil = getFieldVal('info[eMobil]');
if (eMobil) html += summaryRow('Mobile', eMobil);
if (eMobil) html += summaryRow(l10n.summaryMobile || 'Mobile', eMobil);
html += '</div>';
// Room summaries
@@ -359,7 +359,7 @@
html += '<div class="summary-item">';
html += '<span class="summary-item-name">' + escHtml(item.name) + '</span>';
html += '<span class="summary-item-qty">' + item.qty + '</span>';
html += '<span class="summary-item-cbm">' + formatGermanDecimal(item.cbm) + '</span>';
html += '<span class="summary-item-cbm">' + formatGermanDecimal(item.cbm) + ' ' + escHtml(l10n.summaryCbm || 'cbm') + '</span>';
if (item.montage !== null) {
html += '<span class="summary-item-montage">' + escHtml(item.montage === 'ja' ? (l10n.summaryYes || 'Yes') : (l10n.summaryNo || 'No')) + '</span>';
}
@@ -419,13 +419,19 @@
}
function getRoomDisplayName(roomKey) {
// Read from the step title or the furniture list heading
var list = qs('.furniture-list[data-room="' + roomKey + '"]');
if (list) {
var card = list.closest('.step-card');
if (card) {
var h3 = qs('h3', card);
if (h3) return h3.textContent;
// For combined steps (step 5), use the h3 section heading
var section = list.closest('.step-section');
if (section) {
var h3 = qs('h3', section);
if (h3) return h3.textContent;
}
// For single-room steps, use the h2 step title
var h2 = qs('h2.step-title', card);
if (h2) return h2.textContent;
}
}
return roomKey;
@@ -556,6 +562,15 @@
}
});
// Auto-check checkbox when qty-small gets a value
document.addEventListener('input', function(e) {
if (!e.target.classList.contains('qty-small')) return;
var field = e.target.closest('.additional-field');
if (!field) return;
var cb = qs('input[type="checkbox"]', field);
if (cb) cb.checked = e.target.value.trim() !== '';
});
// Stepper button click handlers
document.addEventListener('click', function(e) {
var btn = e.target.closest('.qty-btn');

4
includes/class-form-renderer.php
View File

@@ -340,7 +340,7 @@ class Umzugsliste_Form_Renderer {
<div class="step-section">
<h3><?php echo esc_html__( 'Other', 'siegel-umzugsliste' ); ?></h3>
<label for="sonstiges"><?php echo esc_html__( 'Additional notes or requests:', 'siegel-umzugsliste' ); ?></label>
<textarea name="sonstiges" id="sonstiges" rows="5" class="sonstiges-textarea" placeholder="<?php echo esc_attr__( 'Additional notes or requests...', 'siegel-umzugsliste' ); ?>"></textarea>
<textarea name="sonstiges" id="sonstiges" rows="5" class="sonstiges-textarea"></textarea>
</div>
</div>
</div>
@@ -432,7 +432,7 @@ class Umzugsliste_Form_Renderer {
<button type="button" class="qty-btn qty-plus" aria-label="<?php echo esc_attr__( 'Increase', 'siegel-umzugsliste' ); ?>">+</button>
</div>
<span class="item-name"><?php echo esc_html( $item_name ); ?></span>
<span class="item-cbm"><?php echo esc_html( str_replace( '.', ',', (string) $cbm ) ); ?></span>
<span class="item-cbm"><?php echo esc_html( str_replace( '.', ',', (string) $cbm ) ); ?> <?php echo esc_html__( 'cbm', 'siegel-umzugsliste' ); ?></span>
<input type="hidden" name="<?php echo esc_attr( $cbm_name ); ?>" value="<?php echo esc_attr( $cbm ); ?>">
<?php if ( $has_montage ) : ?>
<div class="montage-toggle">

9
includes/class-shortcode.php
View File

@@ -124,6 +124,15 @@ class Umzugsliste_Shortcode {
'quantityLabel' => __( 'Qty', 'siegel-umzugsliste' ),
'cbmLabel' => __( 'cbm', 'siegel-umzugsliste' ),
'summaryEdit' => __( 'Edit', 'siegel-umzugsliste' ),
'summaryName' => __( 'Name', 'siegel-umzugsliste' ),
'summaryStreet' => __( 'Street', 'siegel-umzugsliste' ),
'summaryZipCity' => __( 'ZIP/City', 'siegel-umzugsliste' ),
'summaryFloor' => __( 'Floor', 'siegel-umzugsliste' ),
'summaryElevator' => __( 'Elevator', 'siegel-umzugsliste' ),
'summaryPhone' => __( 'Phone', 'siegel-umzugsliste' ),
'summaryFax' => __( 'Fax', 'siegel-umzugsliste' ),
'summaryMobile' => __( 'Mobile', 'siegel-umzugsliste' ),
'summaryEmail' => __( 'Email', 'siegel-umzugsliste' ),
'stepLabel' => __( 'Step', 'siegel-umzugsliste' ),
'stepOf' => __( 'of', 'siegel-umzugsliste' ),
) );

9
templates/form-page.php
View File

@@ -41,6 +41,15 @@ $l10n_data = array(
'quantityLabel' => __( 'Qty', 'siegel-umzugsliste' ),
'cbmLabel' => __( 'cbm', 'siegel-umzugsliste' ),
'summaryEdit' => __( 'Edit', 'siegel-umzugsliste' ),
'summaryName' => __( 'Name', 'siegel-umzugsliste' ),
'summaryStreet' => __( 'Street', 'siegel-umzugsliste' ),
'summaryZipCity' => __( 'ZIP/City', 'siegel-umzugsliste' ),
'summaryFloor' => __( 'Floor', 'siegel-umzugsliste' ),
'summaryElevator' => __( 'Elevator', 'siegel-umzugsliste' ),
'summaryPhone' => __( 'Phone', 'siegel-umzugsliste' ),
'summaryFax' => __( 'Fax', 'siegel-umzugsliste' ),
'summaryMobile' => __( 'Mobile', 'siegel-umzugsliste' ),
'summaryEmail' => __( 'Email', 'siegel-umzugsliste' ),
'stepLabel' => __( 'Step', 'siegel-umzugsliste' ),
'stepOf' => __( 'of', 'siegel-umzugsliste' ),
'nonce' => wp_create_nonce( 'umzugsliste_submit' ),