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

5
.commitmessage
View File

@@ -1,3 +1,4 @@
fix: compact mobile session header
fix: clarify mobile slot card hierarchy
Reduce the mobile profile header to a compact identity row and concise actions.
Prioritize store identity over booking controls and make card boundaries and
booking states easier to scan on mobile.

74
src/components/MobileConfigList.css
View File

@@ -160,16 +160,25 @@
.mobile-config-list__cards {
display: grid;
gap: 0.75rem;
gap: 0.9rem;
}
.mobile-config-card {
border: 1px solid #d1d5db;
border: 1px solid #94a3b8;
border-left-width: 4px;
border-radius: 6px;
background: #fff;
padding: 0.9rem;
}
.mobile-config-card--active {
border-left-color: #15803d;
}
.mobile-config-card--inactive {
border-left-color: #64748b;
}
.mobile-config-card__header,
.mobile-config-card__switch-row,
.mobile-config-card__check-row {
@@ -179,6 +188,23 @@
gap: 0.75rem;
}
.mobile-config-card__header {
padding-bottom: 0.8rem;
border-bottom: 1px solid #dbe4ee;
}
.mobile-config-card__title {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.25;
}
.mobile-config-card__id,
.mobile-config-card__slots {
font-size: 0.75rem;
font-weight: 400;
}
.mobile-config-card__slots {
margin-top: 0.45rem !important;
}
@@ -200,12 +226,31 @@
}
.mobile-config-card__switch-row {
margin-top: 0.9rem;
margin-top: 0;
padding: 0.75rem 0;
border-top: 1px solid #e5e7eb;
border-bottom: 1px solid #e5e7eb;
}
.mobile-config-card__booking-label,
.mobile-config-card__notify-label {
color: #374151;
font-size: 0.875rem;
font-weight: 500;
}
.mobile-config-card__booking-status {
font-size: 0.75rem;
font-weight: 600;
}
.mobile-config-card--active .mobile-config-card__booking-status {
color: #15803d;
}
.mobile-config-card--inactive .mobile-config-card__booking-status {
color: #64748b;
}
.mobile-config-card input[type='checkbox'] {
width: 1.2rem;
height: 1.2rem;
@@ -230,6 +275,13 @@
text-align: left;
}
.mobile-config-card__field > span,
.mobile-config-card__range > span {
color: #64748b;
font-size: 0.75rem;
font-weight: 500;
}
.mobile-config-card__core-fields select,
.mobile-config-card__range {
box-sizing: border-box;
@@ -240,6 +292,12 @@
background: #fff;
}
.mobile-config-card__field-value {
color: #1f2937;
font-size: 0.875rem;
font-weight: 600;
}
.mobile-config-card__range {
align-content: center;
padding: 0.4rem 0.55rem;
@@ -248,7 +306,8 @@
.mobile-config-card__range strong {
overflow: hidden;
color: #1f2937;
font-size: 0.8rem;
font-size: 0.875rem;
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -265,6 +324,11 @@
gap: 0.1rem;
}
.mobile-config-card__check-row small {
font-size: 0.75rem;
font-weight: 400;
}
.mobile-config-card__details {
margin-top: 0.8rem;
border-top: 1px solid #e5e7eb;

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>