feat: enhance UI components and error handling

- 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:
2026-03-02 20:21:33 +03:00
parent 37d4226beb
commit 54446d7b0f
12 changed files with 154 additions and 19 deletions

View File

@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="favicon.png" type="image/png">
<title></title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/calendar.css">
@@ -17,9 +16,13 @@
<div class="container">
<div class="calendar-sticky" id="calendarSticky">
<header class="header">
<button type="button" class="nav" id="prevMonth" aria-label=""></button>
<button type="button" class="nav nav--prev" id="prevMonth" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
</button>
<h1 class="title" id="monthTitle"></h1>
<button type="button" class="nav" id="nextMonth" aria-label=""></button>
<button type="button" class="nav nav--next" id="nextMonth" aria-label="">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</header>
<div class="weekdays">
<span></span><span></span><span></span><span></span><span></span><span></span><span></span>