feat: modernize wizard UX with smart rows, steppers, transitions, and edit links

- Hide montage toggles and dim furniture rows when quantity is 0
- Animate running totals bar with CSS transform instead of display toggle
- Add directional slide transitions (forward/backward) between steps
- Add +/- stepper buttons around quantity inputs for better affordance
- Increase mobile tap targets to 44px and show active step label
- Add "Edit" links to summary section headings for quick navigation
- Add "Step X of Y" counter below progress bar
- Add summaryEdit, stepLabel, stepOf l10n strings to both entry points

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 23:46:36 +09:00
parent b9ae7d707d
commit 89bd555dc1
5 changed files with 193 additions and 32 deletions

View File

@@ -134,6 +134,7 @@ class Umzugsliste_Form_Renderer {
<?php endforeach; ?>
</div>
</div>
<div class="progress-counter" id="progress-counter"></div>
<?php
}
@@ -391,7 +392,11 @@ class Umzugsliste_Form_Renderer {
$montage_name = $room_name . '[m' . $item_name . ']';
?>
<div class="furniture-item" data-room="<?php echo esc_attr( $room_key ); ?>" data-cbm="<?php echo esc_attr( $cbm ); ?>">
<input type="text" name="<?php echo esc_attr( $quantity_name ); ?>" class="quantity-input" inputmode="decimal" placeholder="0" maxlength="3">
<div class="quantity-stepper">
<button type="button" class="qty-btn qty-minus" aria-label="<?php echo esc_attr__( 'Decrease', 'siegel-umzugsliste' ); ?>">-</button>
<input type="text" name="<?php echo esc_attr( $quantity_name ); ?>" class="quantity-input" inputmode="numeric" placeholder="0" maxlength="3">
<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>
<input type="hidden" name="<?php echo esc_attr( $cbm_name ); ?>" value="<?php echo esc_attr( $cbm ); ?>">

View File

@@ -123,6 +123,9 @@ class Umzugsliste_Shortcode {
'grandTotalLabel' => __( 'Grand Total', 'siegel-umzugsliste' ),
'quantityLabel' => __( 'Qty', 'siegel-umzugsliste' ),
'cbmLabel' => __( 'cbm', 'siegel-umzugsliste' ),
'summaryEdit' => __( 'Edit', 'siegel-umzugsliste' ),
'stepLabel' => __( 'Step', 'siegel-umzugsliste' ),
'stepOf' => __( 'of', 'siegel-umzugsliste' ),
) );
}
}