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

fix: polish form UX and step 9 summary translations

Browse Source 
- 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>
This commit is contained in:
Viktor Miller
2026-02-12 23:31:25 +09:00
parent f1f5c760c2
commit f6c7af7cbc
5 changed files with 63 additions and 30 deletions
Download Patch File Download Diff File 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');