Produktfilter: Leiste in Spalten, kurze Sortiertexte

Die Gruppen der Leiste stehen in gleich breiten Spalten mit bündigen Überschriften; Preis mit Währung in der Überschrift und lesbaren Platzhaltern, Sortierung mit „Neueste zuerst“, „Preis aufsteigend“ usw.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2 files changed, 19 insertions, 9 deletions

diff --git a/views/css/wpsg-theme.css b/views/css/wpsg-theme.css
index d40cf5b..76e0274 100644
--- a/views/css/wpsg-theme.css
+++ b/views/css/wpsg-theme.css
@@ -658,20 +658,25 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg-product-tiles > .wpsg-product-list__count { margin-block:0 var(--wpsg-pvf-gap); }
 .wpsg-product-tiles > .wpsg-product-list__count:empty { display:none; }
 .wpsg-product-tiles > .wpsg-block-product-filter { margin-block:var(--wp--preset--spacing--40, 1rem) var(--wp--preset--spacing--60, 2rem); }
-.wpsg-product-tiles .wpsg-pvf__fields { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--wpsg-pvf-gap); padding:var(--wp--preset--spacing--40, 1rem); border:1px solid var(--wpsg-color-line-soft); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-surface); }
+/* Raster mit gleich breiten Spalten, damit die Gruppen untereinander stehen; Überschriften oben bündig, „Filtern“ unten in der letzten Spalte */
+.wpsg-product-tiles .wpsg-pvf__fields { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); align-items:start; gap:var(--wpsg-pvf-gap); padding:var(--wp--preset--spacing--40, 1rem); border:1px solid var(--wpsg-color-line-soft); border-radius:var(--wpsg-radius); background-color:var(--wpsg-color-surface); }
 .wpsg-product-tiles .wpsg-pvf__fields > * { margin:0; padding:0; border:0; min-width:0; }
 .wpsg-product-tiles .wpsg-pvf__title { display:block; margin:0 0 var(--wpsg-pvf-gap-small) 0; padding:0; font-size:inherit; font-weight:600; line-height:1.3; }
 .wpsg-product-tiles .wpsg-pvf__options { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap-small) var(--wpsg-pvf-gap); min-height:var(--wpsg-pvf-control); }
 .wpsg-product-tiles .wpsg-pvf__price .wpsg-pvf__options { flex-wrap:nowrap; gap:var(--wpsg-pvf-gap-small); }
-.wpsg-product-tiles .wpsg-pvf__price label { display:flex; flex:1 1 0; align-items:center; gap:var(--wpsg-pvf-gap-small); min-width:0; }
+.wpsg-product-tiles .wpsg-pvf__price label { display:flex; flex:0 1 auto; align-items:center; gap:var(--wpsg-pvf-gap-small); min-width:0; }
 .wpsg-product-tiles .wpsg-pvf__price label > span { min-width:0; }
-.wpsg-product-tiles .wpsg-pvf__price input { flex:1 1 auto; width:6em; min-width:0; }
+/* Preis über zwei Spalten, damit von, bis und EUR mit lesbaren Feldern in eine Zeile passen */
+.wpsg-product-tiles .wpsg-pvf__price { grid-column:span 2; }
+.wpsg-product-tiles .wpsg-pvf__price input { flex:0 1 auto; width:9em; min-width:0; appearance:textfield; -moz-appearance:textfield; }
+/* Ohne Pfeile des Zahlenfelds, sonst schneiden sie den Platzhalter ab */
+.wpsg-product-tiles .wpsg-pvf__price input::-webkit-inner-spin-button, .wpsg-product-tiles .wpsg-pvf__price input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
 .wpsg-product-tiles .wpsg-pvf__option { margin:0; }
 .wpsg-product-tiles .wpsg-pvf input[type="checkbox"] { width:1.25em; height:1.25em; margin:0; }
 /* Felder, Auswahllisten und Knöpfe gleich hoch */
 .wpsg-product-tiles .wpsg-pvf :is(input[type="number"], select, .wpsg-pvf__actions .wpsg_button) { box-sizing:border-box; height:var(--wpsg-pvf-control); margin:0; padding-block:0; }
 .wpsg-product-tiles .wpsg-pvf .wpsg-pvf__actions .wpsg_button { display:inline-flex; align-items:center; justify-content:center; }
-.wpsg-product-tiles .wpsg-pvf__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap); }
+.wpsg-product-tiles .wpsg-pvf__actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--wpsg-pvf-gap); grid-column-end:-1; align-self:end; }
 .wpsg-product-tiles .wpsg-pvf__reset[hidden] { display:none; }
 /* Knopf „Filter“ (nur am Handy): umrandet, Pfeil dreht sich, Zahl der aktiven Filter */
 .wpsg-product-tiles .wpsg-pvf__summary, .wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__summary { box-sizing:border-box; display:inline-flex; align-items:center; gap:var(--wpsg-pvf-gap-small); min-height:var(--wpsg-pvf-control); padding:0 1.2em; border:1px solid currentColor; border-radius:var(--wpsg-radius); background:transparent; color:inherit; font-weight:600; list-style:none; cursor:pointer; }
@@ -683,10 +688,14 @@ html body .wpsg_product_garan_wrap a.wpsg_product_garan img { display:block; max
 .wpsg-product-tiles .wpsg-pvf__none { margin:0; }
 @media (max-width:781px) {
 	.wpsg-product-tiles .wpsg-pvf__toggle[open] > .wpsg-pvf__fields { margin-top:var(--wpsg-pvf-gap-small); }
-	.wpsg-product-tiles .wpsg-pvf__fields { flex-direction:column; align-items:stretch; }
+	.wpsg-product-tiles .wpsg-pvf__fields { grid-template-columns:minmax(0, 1fr); }
+	.wpsg-product-tiles .wpsg-pvf__price { grid-column:auto; }
+	/* Am Handy füllen die Felder die Zeile; eine feste Breite zählte sonst als Mindestbreite */
+	/* Sehr schmal: „bis“ in die zweite Zeile, damit die Platzhalter lesbar bleiben */
+	.wpsg-product-tiles .wpsg-pvf__price .wpsg-pvf__options { flex-wrap:wrap; }
+	.wpsg-product-tiles .wpsg-pvf__price label { flex:1 1 7em; }
+	.wpsg-product-tiles .wpsg-pvf__price input { flex:1 1 5em; width:0; }
 	.wpsg-product-tiles .wpsg-pvf__select select { width:100%; }
-	/* Feste Breite zählte sonst als Mindestbreite und schob die Zeile über den Rand */
-	.wpsg-product-tiles .wpsg-pvf__price input { flex-basis:5em; width:0; }
 	.wpsg-product-tiles .wpsg-pvf__actions .wpsg_button { flex:1 1 auto; }
 }
 @media (min-width:782px) {
diff --git a/views/mods/mod_productview/productview_filter.phtml b/views/mods/mod_productview/productview_filter.phtml
index 9341d53..c70510f 100644
--- a/views/mods/mod_productview/productview_filter.phtml
+++ b/views/mods/mod_productview/productview_filter.phtml
@@ -67,11 +67,12 @@
 
 		<?php } else if ($filter['type'] === 'pricefilter') { ?>
 		<fieldset class="wpsg-pvf__item wpsg-pvf__price">
-			<legend class="wpsg-pvf__title"><?php echo esc_html__('Preis', 'wpsg'); ?></legend>
+			<?php /* In der Leiste steht die Währung in der Überschrift, sonst rutscht sie am Handy allein in eine Zeile */ ?>
+			<legend class="wpsg-pvf__title"><?php echo esc_html__('Preis', 'wpsg'); ?><?php if ($bBar) echo ' ('.esc_html($currency).')'; ?></legend>
 			<div class="wpsg-pvf__options">
 				<label><span><?php echo esc_html__('von', 'wpsg'); ?></span> <input type="number" step="0.01" min="0" name="pvf[price_min]" value="<?php echo esc_attr((string)($arValues['price_min']??'')); ?>" placeholder="<?php echo esc_attr(wpsg_ff($filter['min'])); ?>" /></label>
 				<label><span><?php echo esc_html__('bis', 'wpsg'); ?></span> <input type="number" step="0.01" min="0" name="pvf[price_max]" value="<?php echo esc_attr((string)($arValues['price_max']??'')); ?>" placeholder="<?php echo esc_attr(wpsg_ff($filter['max'])); ?>" /></label>
-				<span class="wpsg-pvf__unit"><?php echo esc_html($currency); ?></span>
+				<?php if (!$bBar) { ?><span class="wpsg-pvf__unit"><?php echo esc_html($currency); ?></span><?php } ?>
 			</div>
 		</fieldset>