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

feat: enhance UI components and error handling

Browse Source 
- Updated HTML structure for navigation buttons in the calendar, adding SVG icons for improved visual clarity.
- Introduced a new muted text style in CSS for better presentation of empty duty list messages.
- Enhanced calendar CSS for navigation buttons and day indicators, improving layout and responsiveness.
- Improved error handling in the UI by adding retry functionality to the error display, allowing users to retry actions directly from the error message.
- Updated internationalization messages to include a retry option for error handling.
- Added unit tests to verify the new error handling behavior and UI updates.
This commit is contained in:
Nikolay Tatarinov
2026-03-02 20:21:33 +03:00
parent 37d4226beb
commit 54446d7b0f
12 changed files with 154 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
webapp/css/base.css
View File

@@ -89,6 +89,15 @@ body {
padding-bottom: env(safe-area-inset-bottom, 12px);
}
/* Muted text (e.g. empty duty list message). */
.muted {
color: var(--muted);
}
[data-theme="light"] .container {
border-radius: 12px;
}
[data-theme="dark"] .container {
border-radius: 12px;
}

35
webapp/css/calendar.css
View File

@@ -21,7 +21,21 @@
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: opacity var(--transition-fast), transform var(--transition-fast);
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-fast), transform var(--transition-fast),
background-color var(--transition-fast);
}
.nav svg {
display: block;
}
@media (hover: hover) {
.nav:hover {
background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}
}
.nav:focus {
@@ -48,6 +62,12 @@
font-weight: 600;
}
@media (max-width: 480px) {
.title {
font-size: 1.25rem;
}
}
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
@@ -92,13 +112,23 @@
font-size: 0.85rem;
background: var(--surface);
min-width: 0;
min-height: 0;
min-height: 32px;
overflow: hidden;
transition: background-color var(--transition-fast), transform var(--transition-fast);
}
@media (hover: hover) {
.day:hover {
background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.day.today:hover {
background: color-mix(in srgb, var(--bg) 15%, var(--today));
}
}
.day.other-month {
opacity: 0.4;
background: color-mix(in srgb, var(--muted) 8%, var(--surface));
}
.day.today {
@@ -142,6 +172,7 @@
.day-indicator {
display: flex;
justify-content: center;
gap: 2px;
width: 65%;
margin-top: 6px;
}

12
webapp/css/day-detail.css
View File

@@ -62,10 +62,10 @@ body.day-detail-sheet-open {
.day-detail-panel--sheet::before {
content: "";
display: block;
width: 36px;
width: 40px;
height: 4px;
margin: 0 auto 8px;
background: var(--muted);
background: color-mix(in srgb, var(--muted) 80%, var(--text));
border-radius: 2px;
}
@@ -79,13 +79,19 @@ body.day-detail-sheet-open {
border: none;
background: transparent;
color: var(--muted);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: opacity var(--transition-fast), background-color var(--transition-fast);
}
.day-detail-close svg {
display: block;
}
.day-detail-close:focus {
outline: none;
}

10
webapp/css/duty-list.css
View File

@@ -41,7 +41,12 @@
top: 0;
bottom: 0;
width: 2px;
background: var(--muted);
background: linear-gradient(
to bottom,
var(--muted) 0%,
var(--muted) 85%,
color-mix(in srgb, var(--muted) 40%, transparent) 100%
);
pointer-events: none;
}
@@ -185,7 +190,7 @@
}
.duty-flip-inner {
transition: transform 0.4s;
transition: transform 0.3s;
transform-style: preserve-3d;
position: relative;
min-height: 0;
@@ -253,6 +258,7 @@
border-radius: 8px;
background: var(--surface);
border-left: 3px solid var(--duty);
box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 8%, transparent);
}
.duty-item--unavailable {

2
webapp/css/hints.css
View File

@@ -3,7 +3,7 @@
position: fixed;
z-index: 1000;
width: max-content;
max-width: min(98vw, 900px);
max-width: min(98vw, 380px);
min-width: 0;
padding: 8px 12px;
background: var(--surface);

57
webapp/css/states.css
View File

@@ -33,7 +33,7 @@
}
}
.loading, .error {
.loading {
text-align: center;
padding: 12px;
color: var(--muted);
@@ -45,7 +45,16 @@
}
.error {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 16px;
margin: 12px 0;
background: var(--surface);
border-radius: 12px;
color: var(--error);
text-align: center;
}
.error[hidden], .loading.hidden,
@@ -53,6 +62,36 @@
display: none !important;
}
.error-icon {
flex-shrink: 0;
color: var(--error);
}
.error-text {
margin: 0;
}
.error-retry {
margin-top: 4px;
padding: 8px 16px;
font-size: 0.9rem;
font-weight: 500;
color: var(--bg);
background: var(--accent);
border: none;
border-radius: 8px;
cursor: pointer;
}
.error-retry:hover {
opacity: 0.9;
}
.error-retry:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Current duty view (Mini App deep link startapp=duty) */
[data-view="currentDuty"] .calendar-sticky,
[data-view="currentDuty"] .duty-list {
@@ -167,11 +206,19 @@
color: var(--muted);
margin-bottom: 16px;
line-height: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: color-mix(in srgb, var(--muted) 25%, transparent);
padding: 12px;
box-sizing: border-box;
}
.current-duty-no-duty-icon svg {
display: block;
opacity: 0.7;
width: 100%;
height: 100%;
opacity: 0.85;
}
.current-duty-no-duty {
@@ -282,8 +329,12 @@
.access-denied {
text-align: center;
padding: 24px 12px;
padding: 24px 16px;
margin: 12px 0;
background: var(--surface);
border-radius: 12px;
color: var(--muted);
box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 8%, transparent);
}
.access-denied p {