From 02caa0619eb0d95d5e563d3c3e0abc3647f9967c Mon Sep 17 00:00:00 2001 From: Daniel Volz Date: Sun, 28 Dec 2025 11:03:33 +0100 Subject: [PATCH] feat(ui): enhance medication display layout and improve responsiveness in App component --- frontend/src/App.tsx | 26 +++++++++++- frontend/src/i18n/de.json | 4 +- frontend/src/i18n/en.json | 4 +- frontend/src/styles.css | 87 ++++++++++++++++++++++++++++++++------- 4 files changed, 101 insertions(+), 20 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f49c55d..771446c 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1062,7 +1062,17 @@ function AppContent() { ); return (
med && setSelectedMed(med)}> - {row.name}{med?.takenBy && { e.stopPropagation(); setSelectedUser(med.takenBy!); }}>{med.takenBy}}{med?.intakeRemindersEnabled && 🔔}{med?.notes && 📝} + + + {row.name} + {med?.takenBy && { e.stopPropagation(); setSelectedUser(med.takenBy!); }}>{med.takenBy}} + {(med?.intakeRemindersEnabled || med?.notes) && ( + + {med?.intakeRemindersEnabled && 🔔} + {med?.notes && 📝} + + )} + {formatFullBlisters(stock.fullBlisters, t)} {formatOpenBlisterAndLoose(stock.openBlisterPills, stock.loosePills, med?.tabsPerStrip ?? 1, t)} {formatNumber(row.daysLeft)} @@ -1120,7 +1130,19 @@ function AppContent() { ); return (
med && setSelectedMed(med)}> - {row.name}{med?.takenBy && { e.stopPropagation(); setSelectedUser(med.takenBy!); }}>{med.takenBy}}{med?.intakeRemindersEnabled && 🔔}{med?.notes && 📝} + + + + {row.name} + {med?.takenBy && { e.stopPropagation(); setSelectedUser(med.takenBy!); }}>{med.takenBy}} + + {(med?.intakeRemindersEnabled || med?.notes) && ( + + {med?.intakeRemindersEnabled && 🔔} + {med?.notes && 📝} + + )} + {formatFullBlisters(stock.fullBlisters, t)} {formatOpenBlisterAndLoose(stock.openBlisterPills, stock.loosePills, med?.tabsPerStrip ?? 1, t)} {formatNumber(row.daysLeft)} diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json index 078020d..ad3ed1b 100644 --- a/frontend/src/i18n/de.json +++ b/frontend/src/i18n/de.json @@ -35,8 +35,8 @@ "allTaken": "Alle eingenommen", "showPastDays": "Vergangene Tage anzeigen", "hidePastDays": "Vergangene Tage ausblenden", - "pastDaysCount": "{{count}} vergangener Tag", - "pastDaysCount_other": "{{count}} vergangene Tage", + "pastDaysCount": "{{count}} Tag", + "pastDaysCount_other": "{{count}} Tage", "missedDoses": "{{count}} verpasste Dosis", "missedDoses_other": "{{count}} verpasste Dosen" }, diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index 7bf68f3..ab8cbbf 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -37,8 +37,8 @@ "allTaken": "All taken", "showPastDays": "Show past days", "hidePastDays": "Hide past days", - "pastDaysCount": "{{count}} past day", - "pastDaysCount_other": "{{count}} past days", + "pastDaysCount": "{{count}} day", + "pastDaysCount_other": "{{count}} days", "missedDoses": "{{count}} missed dose", "missedDoses_other": "{{count}} missed doses" }, diff --git a/frontend/src/styles.css b/frontend/src/styles.css index f733871..556bda7 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -619,7 +619,9 @@ textarea { .dose-btn { margin-left: auto; width: 28px; + min-width: 28px; height: 28px; + min-height: 28px; padding: 0; border-radius: 50%; display: flex; @@ -628,6 +630,7 @@ textarea { font-size: 0.9rem; cursor: pointer; transition: all 0.15s ease; + flex-shrink: 0; } .dose-btn.take { @@ -805,16 +808,20 @@ textarea { .table-row span:first-child { justify-content: center; padding-bottom: 0.5rem; - border-bottom: 1px solid var(--border-primary); margin-bottom: 0.25rem; } .table-row span:first-child::before { display: none; /* Hide "NAME" label on mobile */ } - /* Avatar + name layout - horizontal centered */ + /* Avatar + name layout - centered */ .table-row .cell-with-avatar { - display: inline-flex; - flex-wrap: wrap; + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + } + .table-row .cell-with-avatar .med-name-line { + display: flex; align-items: center; justify-content: center; gap: 0.4rem; @@ -822,6 +829,12 @@ textarea { .table-row .cell-with-avatar .med-avatar { flex-shrink: 0; } + /* Icons on separate line on mobile - aligned left under med name */ + .table-row .cell-with-avatar .med-icons { + display: flex; + align-items: center; + gap: 0.5rem; + } /* Badges and icons wrap to next line if needed but stay together */ .table-row .taken-by-badge, .table-row .reminder-icon, @@ -1864,11 +1877,40 @@ textarea { /* Table/Timeline cells with avatar */ .cell-with-avatar { + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.cell-with-avatar .med-name-line { display: flex; align-items: center; gap: 0.5rem; } +.cell-with-avatar .med-icons { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + font-size: 1rem; + width: 100%; + border: none !important; + border-top: none !important; + border-bottom: none !important; +} + +.cell-with-avatar .med-icons span { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 1.2em !important; + height: 1.2em !important; + line-height: 1 !important; + font-size: 1rem !important; + vertical-align: middle !important; +} + .time-main .med-name { display: flex; align-items: center; @@ -1941,7 +1983,7 @@ textarea { inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; - align-items: flex-start; + align-items: center; justify-content: center; z-index: 1000; padding: 2rem 1rem; @@ -1977,23 +2019,28 @@ textarea { position: absolute; top: 1rem; right: 1rem; - background: transparent; - border: none; - font-size: 1.5rem; + background: rgba(255, 255, 255, 0.1); + border: 1px solid var(--border-secondary); + font-size: 1.2rem; color: var(--text-secondary); cursor: pointer; width: 2rem; height: 2rem; + min-width: 2rem; + min-height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; - transition: background 0.2s, color 0.2s; + transition: all 0.2s ease; + flex-shrink: 0; } .modal-close:hover { - background: var(--border-primary); + background: rgba(255, 255, 255, 0.2); + border-color: var(--text-secondary); color: var(--text-primary); + transform: scale(1.1); } /* Medication Detail Modal */ @@ -2075,7 +2122,9 @@ textarea { .user-meds-header .user-avatar { width: 50px; + min-width: 50px; height: 50px; + min-height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: flex; @@ -2084,6 +2133,7 @@ textarea { font-size: 1.5rem; font-weight: 700; color: white; + flex-shrink: 0; } .user-meds-header h2 { @@ -2105,6 +2155,7 @@ textarea { padding: 0.75rem; border-radius: 8px; transition: background 0.15s; + flex-wrap: wrap; } .user-med-item.clickable { @@ -2117,13 +2168,14 @@ textarea { .user-med-info { flex: 1; - min-width: 0; + min-width: 120px; } .user-med-name { display: block; font-weight: 600; color: var(--text-primary); + word-break: break-word; } .user-med-generic { @@ -2135,8 +2187,9 @@ textarea { .user-med-stats { display: flex; flex-direction: column; - align-items: flex-end; + align-items: flex-start; gap: 0.25rem; + flex-shrink: 0; } .user-med-pills { @@ -2417,9 +2470,15 @@ textarea { .notes-icon.info-tooltip { width: auto; height: auto; - margin-left: 0.35rem; - font-size: 0.85em; + margin: 0 !important; + padding: 0 !important; + font-size: 1em; opacity: 0.75; + display: inline-flex; + align-items: center; + justify-content: center; + line-height: 1; + vertical-align: baseline; } .reminder-icon.info-tooltip:hover,