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:
@@ -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 ); ?>">
|
||||
|
||||
@@ -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' ),
|
||||
) );
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user