Meik/Pickup-Config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: clarify mobile slot card hierarchy

Browse Source 
Prioritize store identity over booking controls and make card boundaries and
booking states easier to scan on mobile.
This commit is contained in:
Meik
2026-08-05 19:19:56 +02:00
parent 08571fc845
commit 45bb566530
3 changed files with 84 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/MobileConfigList.js
View File

@@ -85,11 +85,15 @@ const MobileConfigList = ({
const range = entry.desiredDateRange || (entry.desiredDate ? { start: entry.desiredDate, end: entry.desiredDate } : null);
const slots = formatRegularPickup(regularPickupMap?.[entry.id]);
return (
<article key={entry.id} className="mobile-config-card" data-store-row={entry.id}>
<article
key={entry.id}
className={`mobile-config-card ${entry.active ? 'mobile-config-card--active' : 'mobile-config-card--inactive'}`}
data-store-row={entry.id}
>
<header className="mobile-config-card__header">
<div>
<h3>{entry.label || `Store ${entry.id}`}</h3>
<p>#{entry.id}</p>
<h3 className="mobile-config-card__title">{entry.label || `Store ${entry.id}`}</h3>
<p className="mobile-config-card__id">#{entry.id}</p>
{slots && <p className="mobile-config-card__slots">Slots: {slots}</p>}
</div>
<a
@@ -109,8 +113,8 @@ const MobileConfigList = ({
<label className="mobile-config-card__switch-row">
<span>
<strong>Automatisch buchen</strong>
<small>{entry.active ? 'Aktiv' : 'Inaktiv'}</small>
<strong className="mobile-config-card__booking-label">Automatisch buchen</strong>
<small className="mobile-config-card__booking-status">{entry.active ? 'Aktiv' : 'Inaktiv'}</small>
</span>
<input
type="checkbox"
@@ -121,9 +125,9 @@ const MobileConfigList = ({
</label>
<div className="mobile-config-card__core-fields">
<label>
<label className="mobile-config-card__field">
<span>Wochentag</span>
<select value={entry.desiredWeekday || ''} onChange={(event) => onWeekdayChange(entry.id, event.target.value)}>
<select className="mobile-config-card__field-value" value={entry.desiredWeekday || ''} onChange={(event) => onWeekdayChange(entry.id, event.target.value)}>
<option value="">Kein Wochentag</option>
{weekdays.map((day) => <option key={day} value={day}>{day}</option>)}
</select>
@@ -137,7 +141,7 @@ const MobileConfigList = ({
<label className="mobile-config-card__check-row">
<input type="checkbox" checked={!!entry.onlyNotify} onChange={() => onToggleOnlyNotify(entry.id)} />
<span>
<strong>Nur benachrichtigen</strong>
<strong className="mobile-config-card__notify-label">Nur benachrichtigen</strong>
<small>Keinen Slot automatisch buchen</small>
</span>
</label>