k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-23 15:36:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(dayplan): the delete question asks inside the day dialog, and its buttons stay small

Browse Source 
Deleting a day no longer stacks a second dialog over the reorder dialog. The
dialog swaps its list for the question at the same size and in the same place;
Cancel and Escape bring the list back with the focus on the row asked about.
The foot is one row of normal sized buttons with the hint line above it, the
undated day is labelled "Without date" in every language, and the dialog is a
step wider so no label breaks. The list of what goes with a day is quieter: a
cancelled stay tints its whole row, a day with nothing on it is one plain line.
On the phone the add buttons are two pills under the scrolling list, and the
confirm sheet moves a long label to its own row instead of breaking it.
This commit is contained in:
Maurice
2026-09-23 21:41:05 +02:00
parent f3ca0b1a4c
commit 83be759c49
44 changed files with 625 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/mobile/components/MDayImpactList.tsx
+11 -6
View File
@@ -1,21 +1,23 @@
import DayImpactList, { type ImpactListSkin } from '../../components/shared/DayImpactList'
import type { ImpactLine } from '../../utils/dayImpactLines'
const DANGER_TINT = 'bg-[color:color-mix(in_srgb,var(--m-st-danger)_9%,transparent)]'
/** The mobile tokens for the same rows: an inset card with hairlines between rows. */
const PHONE: ImpactListSkin = {
list: 'mt-3 overflow-hidden rounded-[13px] border border-[color:var(--m-inbr)] bg-[color:var(--m-inner)]',
row: 'flex items-start gap-[10px] px-[11px] py-[9px]',
row: 'flex items-start gap-[10px] px-[11px] py-[8px]',
divider: 'border-t border-[color:var(--m-rowbr)]',
chip: 'mt-[1px] flex h-[26px] w-[26px] flex-none items-center justify-center rounded-full',
dayChip: 'rounded-full bg-[color:var(--m-ic)] px-[9px] py-[2px] text-[0.6875rem] font-semibold text-m-ink',
chip: 'flex h-[26px] w-[26px] flex-none items-center justify-center rounded-full',
dayChip: 'rounded-full bg-[color:var(--m-ic)] px-[8px] py-[1px] text-[0.6875rem] font-semibold text-m-ink',
iconSize: 13,
text: 'text-[0.78125rem] font-semibold leading-snug',
hint: 'mt-[2px] text-[0.6875rem] leading-snug text-m-muted',
text: 'text-[0.78125rem] font-semibold leading-snug text-pretty',
hint: 'mt-[1px] text-[0.6875rem] leading-snug text-m-muted text-pretty',
chipTone: {
neutral: 'bg-[color:var(--m-ic)] text-m-muted',
muted: 'bg-[color:var(--m-ic)] text-m-faint',
warning: 'bg-[color:color-mix(in_srgb,var(--m-st-pending)_14%,transparent)] text-[color:var(--m-st-pending)]',
danger: 'bg-[color:color-mix(in_srgb,var(--m-st-danger)_12%,transparent)] text-[color:var(--m-st-danger)]',
danger: 'bg-[color:color-mix(in_srgb,var(--m-st-danger)_14%,transparent)] text-[color:var(--m-st-danger)]',
},
textTone: {
neutral: 'text-m-ink',
@@ -23,6 +25,9 @@ const PHONE: ImpactListSkin = {
warning: 'text-m-ink',
danger: 'text-[color:var(--m-st-danger)]',
},
rowTone: { neutral: '', muted: '', warning: '', danger: DANGER_TINT },
plain: 'mt-3 flex items-center gap-[8px] rounded-[13px] border border-[color:var(--m-inbr)] bg-[color:var(--m-inner)] px-[11px] py-[10px] text-[0.75rem] text-m-muted',
plainIcon: 'flex-none text-m-faint',
}
/** The phone's day impact list: DayImpactList drawn in the mobile tokens. */