27 add more adaptive design for smaller display sizes

src/ExpensesCalculator.UI/public/i18n/en.json

@@ -1,4 +1,8 @@
 {
+  "GENERAL": {
+    "CURRENCY_SYMBOL": "$",
+    "CURRENCY_CODE": "USD"
+  },
   "NAV": {
     "LOGIN": "Login",
     "REGISTER": "Register",
@@ -13,7 +17,7 @@
     "GITHUB": "Github"
   },
   "HOME": {
-    "COPYRIGHT": "© 2024-2026 ExpensesCalculator"
+    "COPYRIGHT": "© 2024-2026 ExpensesTracker"
   },
   "LOGIN": {
     "TITLE": "Log in",
@@ -154,9 +158,9 @@
       "PAYER_LABEL": "Payer",
       "SELECT_PAYER": "Select Payer",
       "SUM_LABEL": "Total Sum",
-      "ADD_BUTTON": "Add Check",
-      "EDIT_BUTTON": "Edit Check",
-      "DELETE_BUTTON": "Delete Check"
+      "ADD_BUTTON": "Add",
+      "EDIT_BUTTON": "Edit",
+      "DELETE_BUTTON": "Delete"
     },
     "TOAST": {
       "SUCCESS": "Success!",
@@ -189,6 +193,7 @@
     "PERSON": "person",
     "PEOPLE": "people",
     "NO_TAGS": "No tags",
+    "VIEW_IN_EXPENSES": "View in Expenses",
     "SHOWING": "Showing items from",
     "TO": "to",
     "OF": "of",
@@ -203,7 +208,8 @@
       "TOTAL_SUM": "Total Sum",
       "USER_COUNT": "User Count",
       "RATING": "Rating",
-      "TAGS": "Tags"
+      "TAGS": "Tags",
+      "APPLY": "Apply"
     },
     "SORT": {
       "CAPTION": "Sort",
@@ -254,8 +260,8 @@
     },
     "VALIDATION": {
       "NAME_REQUIRED": "Item name is required.",
-      "PRICE_INVALID": "Price > 0",
-      "AMOUNT_INVALID": "Amount > 0",
+      "PRICE_INVALID": "Price > 0 & <= 10000",
+      "AMOUNT_INVALID": "Amount > 0 & <= 1000",
       "RATING_REQUIRED": "Rating is required.",
       "USERS_REQUIRED": "At least one user is required."
     },
@@ -287,8 +293,15 @@
     "EXPENSES_TABLE_CONTENT": "This table shows the expenses. Click on any column header to sort your expenses by that field. The table below displays all expense rows, which you can double-click to view details.",
     "ACTIONS_MENU_TITLE": "Actions Menu",
     "ACTIONS_MENU_CONTENT": "Click the three dots button to access actions for each expense. You can open details, calculate expenses, edit, share with other users, or delete the expense entry.",
+    "SORT_CONTROLS_TITLE": "Sort Controls",
+    "SORT_CONTROLS_CONTENT": "Use these buttons to sort your expenses. Click any button to sort by that field (Date, Location, Participants, or Total Sum). Click again to toggle between ascending and descending order.",
+    "EXPENSES_ACCORDION_TITLE": "Expenses List",
+    "EXPENSES_ACCORDION_CONTENT": "This accordion shows all your expenses. Each row displays the date and location. Click the arrow to expand and view participants, total sum, and action buttons to manage the expense.",
     "PAGINATION_TITLE": "Pagination Controls",
-    "PAGINATION_CONTENT": "Navigate through your expenses with these controls. Change the number of items displayed per page using the dropdown on the right."
+    "PAGINATION_CONTENT": "Navigate through your expenses with these controls. Change the number of items displayed per page using the dropdown on the right.",
+    "PREV_BTN": "Previous",
+    "NEXT_BTN": "Next",
+    "END_BTN": "End tour"
   },
   "TOUR_DETAILS": {
     "BACK_BTN_TITLE": "Back to List",
@@ -300,7 +313,15 @@
     "ADD_ITEM_TITLE": "Add Item",
     "ADD_ITEM_CONTENT": "Click this button to add items to the check. Specify the item name, price, quantity, and select which participants consumed it. The check total will update automatically.",
     "CALCULATOR_TITLE": "Calculate Expenses",
-    "CALCULATOR_CONTENT": "Once you've added all checks and items, click this button to view the calculations showing how expenses are split among participants."
+    "CALCULATOR_CONTENT": "Once you've added all checks and items, click this button to view the calculations showing how expenses are split among participants.",
+    "FILTER_SORT_CONTROLS_TITLE": "Filter & Sort",
+    "FILTER_SORT_CONTROLS_CONTENT": "Use these controls to filter and sort your checks. The filter button lets you search by location, payer, or sum, while the sort dropdown helps organize checks by different criteria.",
+    "CHECKS_ACCORDION_TITLE": "Checks List",
+    "CHECKS_ACCORDION_CONTENT": "This shows all your checks in an accordion format optimized for mobile. Each check displays the location and total sum. Tap any check to expand it and view its items.",
+    "ACCORDION_CHECK_ITEM_TITLE": "Check Details",
+    "ACCORDION_CHECK_ITEM_CONTENT": "Tap the check header to expand or collapse it. When expanded, you can view the payer information, edit or delete the check, and see all items belonging to this check.",
+    "ACTIONS_MENU_TITLE": "Actions Menu",
+    "ACTIONS_MENU_CONTENT": "Click the three-dot menu to access additional actions for this expense entry, including edit, share, and delete options."
   },
   "TOUR_CALCULATIONS": {
     "BACK_BTN_TITLE": "Back to Details",
@@ -317,6 +338,8 @@
     "SEARCH_FILTER_CONTENT": "Search your items by different criteria. Use the dropdown to switch between filtering by name, description, price, amount, total sum, user count, or rating. Type in the search box to find specific items.",
     "SORT_BAR_TITLE": "Sort Options",
     "SORT_BAR_CONTENT": "Sort your items by different attributes. Click the dropdown to choose a column (name, price, amount, total price, user count, or rating) and toggle between ascending and descending order.",
+    "FILTER_SORT_CONTROLS_TITLE": "Filter & Sort",
+    "FILTER_SORT_CONTROLS_CONTENT": "Use the Filter button to search items, apply tag filters, and toggle showing only your items. Use the Sort dropdown to sort by name, price, amount, total price, user count, or rating.",
     "ADD_ITEM_TITLE": "Add New Item",
     "ADD_ITEM_CONTENT": "Click this button to add a new item to your recommendations. You can add items with name, description, price, amount, rating, and tags. These are your personal items that you can only access from this recommendations view.",
     "ONLY_MY_ITEMS_TITLE": "Filter Your Items",

src/ExpensesCalculator.UI/public/i18n/ua.json

@@ -1,4 +1,8 @@
 {
+  "GENERAL": {
+    "CURRENCY_SYMBOL": "₴",
+    "CURRENCY_CODE": "UAH"
+  },
   "NAV": {
     "LOGIN": "Увійти",
     "REGISTER": "Зареєструватися",
@@ -13,7 +17,7 @@
     "GITHUB": "Github"
   },
   "HOME": {
-    "COPYRIGHT": "© 2024-2026 ExpensesCalculator"
+    "COPYRIGHT": "© 2024-2026 ExpensesTracker"
   },
   "LOGIN": {
     "TITLE": "Увійти",
@@ -188,6 +192,7 @@
     "PERSON": "користувач",
     "PEOPLE": "користувачів",
     "NO_TAGS": "Без тегів",
+    "VIEW_IN_EXPENSES": "Переглянути у витратах",
     "SHOWING": "Показано товари з",
     "TO": "до",
     "OF": "з",
@@ -203,7 +208,8 @@
       "TOTAL_SUM": "Загальна сума",
       "USER_COUNT": "Користувачі",
       "RATING": "Рейтинг",
-      "TAGS": "Теги"
+      "TAGS": "Теги",
+      "APPLY": "Застосувати"
     },
     "SORT": {
       "CAPTION": "Сортування",
@@ -254,8 +260,8 @@
     },
     "VALIDATION": {
       "NAME_REQUIRED": "Назва товару обов'язкова.",
-      "PRICE_INVALID": "Ціна > 0",
-      "AMOUNT_INVALID": "Кількість > 0",
+      "PRICE_INVALID": "Ціна > 0 & <= 10000",
+      "AMOUNT_INVALID": "Кількість > 0 & <= 1000",
       "RATING_REQUIRED": "Рейтинг обов'язковий.",
       "USERS_REQUIRED": "Потрібен хоча б один користувач."
     },
@@ -287,8 +293,15 @@
     "EXPENSES_TABLE_CONTENT": "Ця таблиця показує витрати. Натисніть на будь-який заголовок стовпця, щоб відсортувати витрати за цим полем. Таблиця нижче відображає всі рядки витрат, які можна двічі клацнути для перегляду деталей.",
     "ACTIONS_MENU_TITLE": "Меню дій",
     "ACTIONS_MENU_CONTENT": "Натисніть кнопку з трьома крапками, щоб отримати доступ до дій для кожної витрати. Ви можете відкрити деталі, розрахувати витрати, редагувати, поділитися з іншими користувачами або видалити запис витрат.",
+    "SORT_CONTROLS_TITLE": "Елементи керування сортуванням",
+    "SORT_CONTROLS_CONTENT": "Використовуйте ці кнопки для сортування ваших витрат. Натисніть будь-яку кнопку, щоб відсортувати за цим полем (Дата, Місце, Учасники або Загальна сума). Натисніть ще раз, щоб перемикатися між зростанням та спаданням.",
+    "EXPENSES_ACCORDION_TITLE": "Список витрат",
+    "EXPENSES_ACCORDION_CONTENT": "Цей розкривний список показує всі ваші витрати. Кожен рядок відображає дату та місце. Натисніть стрілку, щоб розгорнути та переглянути учасників, загальну суму та кнопки дій для керування витратами.",
     "PAGINATION_TITLE": "Сторінки",
-    "PAGINATION_CONTENT": "Перемикайтеся між витратами за допомогою цих елементів керування. Змініть кількість елементів на сторінці, використовуючи випадаюче меню справа."
+    "PAGINATION_CONTENT": "Перемикайтеся між витратами за допомогою цих елементів керування. Змініть кількість елементів на сторінці, використовуючи випадаюче меню справа.",
+    "PREV_BTN": "Попередній",
+    "NEXT_BTN": "Далі",
+    "END_BTN": "Завершити"
   },
   "TOUR_DETAILS": {
     "BACK_BTN_TITLE": "Назад до списку",
@@ -300,7 +313,15 @@
     "ADD_ITEM_TITLE": "Додати товар",
     "ADD_ITEM_CONTENT": "Натисніть цю кнопку, щоб додати товари до чека. Вкажіть назву товару, ціну, кількість та оберіть, які учасники його споживали. Загальна сума чека оновиться автоматично.",
     "CALCULATOR_TITLE": "Розрахунки",
-    "CALCULATOR_CONTENT": "Після того, як ви додали всі чеки та товари, натисніть цю кнопку, щоб переглянути розрахунки, які показують, як витрати розподіляються між учасниками."
+    "CALCULATOR_CONTENT": "Після того, як ви додали всі чеки та товари, натисніть цю кнопку, щоб переглянути розрахунки, які показують, як витрати розподіляються між учасниками.",
+    "FILTER_SORT_CONTROLS_TITLE": "Фільтр і Сортування",
+    "FILTER_SORT_CONTROLS_CONTENT": "Використовуйте ці елементи керування для фільтрації та сортування ваших чеків. Кнопка фільтра дозволяє шукати за місцем, платником або сумою, а випадаюче меню сортування допомагає організувати чеки за різними критеріями.",
+    "CHECKS_ACCORDION_TITLE": "Список Чеків",
+    "CHECKS_ACCORDION_CONTENT": "Це показує всі ваші чеки в форматі акордеона, оптимізованому для мобільних пристроїв. Кожен чек відображає місце та загальну суму. Торкніться будь-якого чека, щоб розгорнути його та переглянути його елементи.",
+    "ACCORDION_CHECK_ITEM_TITLE": "Деталі Чека",
+    "ACCORDION_CHECK_ITEM_CONTENT": "Торкніться заголовка чека, щоб розгорнути або згорнути його. Коли розгорнуто, ви можете переглянути інформацію про платника, редагувати або видалити чек, а також переглянути всі елементи, що належать до цього чека.",
+    "ACTIONS_MENU_TITLE": "Меню Дій",
+    "ACTIONS_MENU_CONTENT": "Натисніть меню з трьома крапками, щоб отримати доступ до додаткових дій для цього запису витрат, включаючи редагування, спільний доступ та видалення."
   },
   "TOUR_CALCULATIONS": {
     "BACK_BTN_TITLE": "Назад до деталей",
@@ -317,6 +338,8 @@
     "SEARCH_FILTER_CONTENT": "Шукайте свої товари за різними критеріями. Використовуйте випадаюче меню, щоб перемикатися між фільтрацією за назвою, описом, ціною, кількістю, загальною сумою, кількістю користувачів або рейтингом. Введіть текст у поле пошуку, щоб знайти конкретні товари.",
     "SORT_BAR_TITLE": "Сортування",
     "SORT_BAR_CONTENT": "Сортуйте свої товари за різними атрибутами. Натисніть на випадаюче меню, щоб вибрати колонку (назва, ціна, кількість, загальна ціна, кількість користувачів або рейтинг) та перемикайтеся між зростанням та спаданням.",
+    "FILTER_SORT_CONTROLS_TITLE": "Фільтр та сортування",
+    "FILTER_SORT_CONTROLS_CONTENT": "Використовуйте кнопку Фільтр для пошуку товарів, застосування фільтрів за тегами та перемикання показу лише ваших товарів. Використовуйте випадаюче меню Сортування для сортування за назвою, ціною, кількістю, загальною ціною, кількістю користувачів або рейтингом.",
     "ADD_ITEM_TITLE": "Додати новий товар",
     "ADD_ITEM_CONTENT": "Натисніть цю кнопку, щоб додати новий товар до ваших рекомендацій. Ви можете додавати товари з назвою, описом, ціною, кількістю, рейтингом та тегами. Це ваші персональні товари, до яких ви можете отримати доступ тільки з цього перегляду рекомендацій.",
     "ONLY_MY_ITEMS_TITLE": "Тільки ваші товари",

src/ExpensesCalculator.UI/src/app/app.component.html

@@ -5,7 +5,7 @@
         </div>
         <div class="col-10 dark-blue-0 d-flex flex-column" style="padding: 0; min-height: 100vh;">
             <div class="sticky-top dark-blue-0" style="z-index: 1000;">
-                <nav class="navbar navbar-expand px-4 justify-content-end">
+                <nav class="navbar navbar-expand pe-3 justify-content-end">
                     <app-horizontal-navbar></app-horizontal-navbar>
                 </nav>
                 <hr class="my-0" style="border-color: rgba(255,255,255,0.1); opacity: 1;" />
@@ -20,4 +20,5 @@
     </div>
 </div>
 
-<app-toast></app-toast>
+<app-toast></app-toast>
+<app-modal-window></app-modal-window>

src/ExpensesCalculator.UI/src/app/app.component.ts

@@ -3,6 +3,7 @@ import { isPlatformBrowser } from '@angular/common';
 import { VerticalNavbarComponent } from "./shared/vertical-navbar/vertical-navbar.component";
 import { HorizontalNavbarComponent } from './shared/horizontal-navbar/horizontal-navbar.component';
 import { ToastComponent } from './shared/toast/toast.component';
+import { ModalWindowComponent } from './shared/modal-window/modal-window.component';
 import { RouterOutlet } from "@angular/router";
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 
@@ -11,7 +12,7 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
   standalone: true,
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
-  imports: [VerticalNavbarComponent, HorizontalNavbarComponent, ToastComponent, RouterOutlet, TranslatePipe]
+  imports: [VerticalNavbarComponent, HorizontalNavbarComponent, ToastComponent, ModalWindowComponent, RouterOutlet, TranslatePipe]
 })
 export class AppComponent {
   title = 'Expenses Calculator';

src/ExpensesCalculator.UI/src/app/checks/check-list/check-list.component.css

@@ -138,3 +138,127 @@ td {
   background-color: #1f429d !important;
   color: white;
 }
+
+/* Accordion styles for small screens */
+.accordion-button {
+  background-color: transparent !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+
+.accordion-button:not(.collapsed) {
+  background-color: transparent !important;
+  color: white !important;
+}
+
+.accordion-button::after {
+  filter: invert(1);
+}
+
+.accordion-button:focus {
+  box-shadow: none !important;
+  border-color: transparent !important;
+}
+
+.accordion-item {
+  border-bottom: 1px solid rgba(13, 110, 253, 0.3) !important;
+}
+
+.accordion-item:last-child {
+  border-bottom: none !important;
+}
+
+.accordion-body {
+  border-top: 1px solid rgba(13, 110, 253, 0.2);
+}
+
+/* Payer dropdown styling */
+.form-group .dropdown .btn.form-control {
+  font-size: 0.95rem;
+  padding: 0.375rem 0.75rem;
+  background-color: white;
+  border-color: #ced4da;
+  color: #212529;
+  text-align: left;
+}
+
+.form-group .dropdown .btn.form-control:hover,
+.form-group .dropdown .btn.form-control:focus,
+.form-group .dropdown .btn.form-control:active {
+  background-color: white;
+  border-color: #ced4da;
+  color: #212529;
+  box-shadow: none;
+}
+
+.form-group .dropdown .btn.form-control.is-invalid {
+  border-color: #dc3545;
+  background-color: white;
+}
+
+.form-group .dropdown .btn.form-control.is-valid {
+  border-color: #198754;
+  background-color: white;
+}
+
+.form-group .dropdown-menu {
+  background-color: white;
+  border-color: #ced4da;
+  max-height: 250px;
+  overflow-y: auto;
+}
+
+.form-group .dropdown-item {
+  color: #212529;
+  font-size: 0.95rem;
+  padding: 0.5rem 0.75rem;
+}
+
+.form-group .dropdown-item:hover,
+.form-group .dropdown-item:focus {
+  background-color: #e9ecef;
+  color: #212529;
+}
+
+/* Component-specific responsive styles */
+@media (max-width: 576px) {
+  .pagination-info {
+    font-size: 0.8rem !important;
+  }
+
+  /* Reduce payer dropdown size on small screens */
+  .form-group .dropdown .btn.form-control {
+    font-size: 0.85rem !important;
+    padding: 0.25rem 0.5rem !important;
+  }
+
+  .form-group .dropdown-item {
+    font-size: 0.85rem !important;
+    padding: 0.375rem 0.5rem !important;
+  }
+
+  /* Filter and Sort group - side by side buttons */
+  .filter-sort-group {
+    gap: 0.5rem !important;
+  }
+
+  .filter-sort-group .filter-btn {
+    width: 50% !important;
+    font-size: 0.85rem !important;
+    padding: 0.2rem 0.5rem !important;
+    line-height: 1.2 !important;
+  }
+
+  .filter-sort-group app-sort-bar {
+    width: 50% !important;
+    flex: 0 0 50%;
+  }
+
+  .filter-sort-group app-sort-bar .sort-dropdown {
+    width: 100%;
+  }
+
+  .filter-sort-group app-sort-bar button {
+    width: 100% !important;
+  }
+}