Arnike/duty-teller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 14 Wiki Activity

refactor: enhance styling and structure in DayDetailContent component
All checks were successful
CI / lint-and-test (push) Successful in 1m3s
Details
Docker Build and Release / build-and-push (push) Successful in 55s
Details
Docker Build and Release / release (push) Successful in 14s
Details

Browse Source 
- Updated list styling in DayDetailContent to use a cleaner format without bullet points, improving visual consistency.
- Added decorative bullet points for duty, unavailable, vacation, and event summaries to enhance readability.
- Adjusted spacing and layout for better alignment of list items, ensuring a more polished user interface.
This commit is contained in:
Nikolay Tatarinov
2026-03-04 10:06:22 +03:00
parent 336e6d48c5
commit 119661628e
1 changed files with 43 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
webapp-next/src/components/day-detail/DayDetailContent.tsx
View File

@@ -112,13 +112,21 @@ export function DayDetailContent({
>
{t("event_type.duty")}
</h3>
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-1">
<ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
{dutyRows.map((r) => (
<li key={r.id}>
{r.timePrefix && (
<span className="text-muted-foreground">{r.timePrefix} — </span>
)}
<span className="font-semibold">{r.fullName}</span>
<span
className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
aria-hidden
>
•
</span>
<span className="inline-flex items-baseline gap-1">
{r.timePrefix && (
<span className="text-muted-foreground">{r.timePrefix} — </span>
)}
<span className="font-semibold">{r.fullName}</span>
</span>
</li>
))}
</ul>
@@ -136,9 +144,17 @@ export function DayDetailContent({
>
{t("event_type.unavailable")}
</h3>
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
<ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
{uniqueUnavailable.map((name) => (
<li key={name}>{name}</li>
<li key={name}>
<span
className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
aria-hidden
>
•
</span>
{name}
</li>
))}
</ul>
</section>
@@ -155,9 +171,17 @@ export function DayDetailContent({
>
{t("event_type.vacation")}
</h3>
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
<ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
{uniqueVacation.map((name) => (
<li key={name}>{name}</li>
<li key={name}>
<span
className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
aria-hidden
>
•
</span>
{name}
</li>
))}
</ul>
</section>
@@ -174,9 +198,17 @@ export function DayDetailContent({
>
{t("hint.events")}
</h3>
<ul className="list-[disc] pl-5 m-0 text-[0.9rem] leading-snug space-y-1">
<ul className="list-none pl-5 m-0 text-[0.9rem] leading-snug space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-2">
{summaries.map((s) => (
<li key={String(s)}>{String(s)}</li>
<li key={String(s)}>
<span
className="text-muted-foreground -ml-5 mr-0 shrink-0 select-none"
aria-hidden
>
•
</span>
{String(s)}
</li>
))}
</ul>
</section>