Patrick/medassist-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(medications): enhance medication stock calculation and improve UI layout for better readability

Browse Source
This commit is contained in:
Daniel Volz
2025-12-26 23:06:02 +01:00
parent be1e8cda18
commit 68660202cf
3 changed files with 60 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.tsx
+1 -1
View File
@@ -1293,7 +1293,7 @@ function AppContent() {
return (
<div key={row.medicationId} className="table-row clickable" onClick={() => med && setSelectedMed(med)}>
<span data-label={t('planner.table.medication')} className="cell-with-avatar"><MedicationAvatar name={row.medicationName} imageUrl={med?.imageUrl} />{row.medicationName}</span>
<span data-label={t('planner.table.usage')}><strong>{row.plannerUsage}</strong> {t('common.pills')}</span>
<span data-label={t('planner.table.usage')}><strong>{row.plannerUsage}</strong>&nbsp;{t('common.pills')}</span>
<span data-label={t('planner.table.blisters')}>{row.stripsNeeded} × {row.stripSize}</span>
<span data-label={t('planner.table.available')}>
{row.fullBlisters} {t('common.blisters')}{row.loosePills > 0 && ` + ${row.loosePills} ${t('common.pills')}`}
frontend/src/styles.css
+29 -2
View File
@@ -179,7 +179,7 @@ body {
border-radius: 14px;
padding: 1.25rem;
box-shadow: 0 14px 36px var(--shadow);
overflow-x: auto;
overflow: hidden;
transition: background 200ms ease, border-color 200ms ease;
}
@@ -575,7 +575,7 @@ textarea {
.card p { margin: 0; }
.table { width: 100%; display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; overflow-x: auto; }
.table { width: 100%; display: flex; flex-direction: column; gap: 0; margin-top: 0.5rem; }
.table-head, .table-row {
display: grid;
grid-template-columns: minmax(180px, 2fr) 100px 140px 140px 120px;
@@ -696,6 +696,33 @@ textarea {
margin-right: 1rem;
flex-shrink: 0;
}
/* First span (name cell) - centered horizontal layout */
.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 */
.table-row .cell-with-avatar {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.table-row .cell-with-avatar .med-avatar {
flex-shrink: 0;
}
/* Badges and icons wrap to next line if needed but stay together */
.table-row .taken-by-badge,
.table-row .reminder-icon,
.table-row .notes-icon {
flex-shrink: 0;
}
.table-4 .table-head, .table-4 .table-row,
.table-5 .table-head, .table-5 .table-row,
.table-6 .table-head, .table-6 .table-row,