feat/qg-157: ux верхней панели сделан более мобильным

d-r-q · d-r-q · commit 3b5173b1c327 · 2025-06-15T12:30:26.000+07:00
Панель сделана белой и в неё перенесено название страницы вместо Trainer Advisor.
Туда же добавлены специфичные контролы для страницы - сейчас только дата в календаре и удаление приёма, но в перспективе - туда надо будет утащить стандартные кнопки отмены (как стрелка назад) и сохранения (как галочка) форм.

Так же убраны отступы между контентом и верхней панелью

Ну и заодно поправлены тайты нескольких страниц

Системный статус бар сделан серым, потому что за разумное время не удалось убрать под ним серую полоску.
diff --git a/app/src/main/resources/static/manifest.json b/app/src/main/resources/static/manifest.json
@@ -5,8 +5,8 @@
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#ffffff",
-  "theme_color": "#000000",
+  "background_color": "#e6e6e6",
+  "theme_color": "#e6e6e6",
   "icons": [
     {
       "src": "/img/icon-192x192.png",
diff --git a/app/src/main/resources/templates/fragments/header.html b/app/src/main/resources/templates/fragments/header.html
@@ -1,6 +1,7 @@
 <meta charset="utf-8"/>
 <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
+<meta content="#e6e6e6" name="theme-color"/>
 
 <script defer src="/vendor/fontawesome-6.5.2/js/fontawesome.min.js"></script>
 <link href="/vendor/fontawesome-6.5.2/css/all.min.css" rel="stylesheet">
diff --git a/app/src/main/resources/templates/fragments/headerNavPanel.html b/app/src/main/resources/templates/fragments/headerNavPanel.html
@@ -1,9 +1,13 @@
-<div th:fragment="headerNavPanel">
-    <nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
+<div th:fragment="headerNavPanel(pageName)">
+    <nav class="sb-topnav navbar navbar-expand navbar bg-white d-flex align-items-baseline pe-4">
         <button class="btn float-end" id="sidebarToggle" role="button">
-            <i class="fas fa-bars text-white" data-bs-target="#offcanvas"></i>
+            <i class="fas fa-bars text-black" data-bs-target="#offcanvas"></i>
         </button>
 
-        <a class="navbar-brand ps-3">Trainer Advisor</a>
+        <a class="navbar-brand ps-3 text-truncate" th:text="${pageName}"></a>
+
+        <div class="ms-auto" th:if="${controlsView != null}">
+            <span th:replace="${controlsView}"></span>
+        </div>
     </nav>
 </div>
diff --git a/app/src/main/resources/templates/fragments/leftNavPanel.html b/app/src/main/resources/templates/fragments/leftNavPanel.html
@@ -1,8 +1,8 @@
 <div id="layoutSidenav_nav" th:fragment="leftNavPanel (activeLink)">
-    <nav class="sb-sidenav accordion sb-sidenav-light d-flex flex-column flex-shrink-0 ps-3 pe-3 bg-body-tertiary"
+    <nav class="sb-sidenav accordion sb-sidenav-light d-flex flex-column flex-shrink-0 ps-3 pe-3 bg-white"
          id="sidenavAccordion">
 
-        <ul class="nav nav-pills flex-column mb-auto mt-3">
+        <ul class="nav nav-pills flex-column mb-auto">
 
             <li>
                 <div class="navbar-text bold">
diff --git a/app/src/main/resources/templates/public/landing.html b/app/src/main/resources/templates/public/landing.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8"/>
     <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
     <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>
-    <meta content="#000000" name="theme-color"/>
+    <meta content="#e6e6e6" name="theme-color"/>
     <meta content="yes" name="mobile-web-app-capable">
     <meta content="yes" name="apple-mobile-web-app-capable">
     <meta content="default" name="apple-mobile-web-app-status-bar-style">
diff --git a/app/src/main/resources/templates/therapist/account/settings.html b/app/src/main/resources/templates/therapist/account/settings.html
@@ -7,7 +7,7 @@
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = 'Настройки')}"></div>
 
 <div id="layoutSidenav">
 
@@ -17,8 +17,6 @@
         <main>
             <div class="container px-4">
 
-                <view-title th:replace="~{components/view-title.html :: viewTitle(title='Настройки')}">
-                </view-title>
                 <div hx-get="/therapist/survey-forms/settings" hx-trigger="load" id="surveyFormsSettings"></div>
             </div>
         </main>
diff --git a/app/src/main/resources/templates/therapist/appointments/appointment-edit.html b/app/src/main/resources/templates/therapist/appointments/appointment-edit.html
@@ -9,7 +9,15 @@
 </head>
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = ${pageMode == 'CREATE' ? 'Новый приём' : appointment.clientTitle }, controlsView = ~{ :: #deleteAppointmentLink})}">
+    <a class="btn btn-outline-danger text mb-1"
+       id="deleteAppointmentLink"
+       th:hx-confirm="'Удалить приём для ' + ${appointment.clientTitle} + '?'"
+       th:hx-delete="@{/therapist/appointments/{id}?returnTo={returnTo} (id=${appointmentId},returnTo=${appointment.dateTime.toLocalDate()})}"
+       th:if="${pageMode == 'EDIT'}">
+        <i class="fas fa-trash"></i>
+    </a>
+</div>
 
 <div id="layoutSidenav">
 
@@ -18,21 +26,8 @@
     <div id="layoutSidenav_content">
         <main>
             <section class="container px-4">
-                <h1 class="mt-4 pb-2 mb-3 border-bottom d-flex justify-content-between align-items-baseline">
-                    <span th:text="${pageMode == 'CREATE' ? 'Новый приём' : appointment.clientTitle }">
-                        Новый приём
-                    </span>
-
-                    <a class="btn btn-outline-danger text"
-                       id="deleteAppointmentLink"
-                       th:hx-confirm="'Удалить приём для ' + ${appointment.clientTitle} + '?'"
-                       th:hx-delete="@{/therapist/appointments/{id}?returnTo={returnTo} (id=${appointmentId},returnTo=${appointment.dateTime.toLocalDate()})}"
-                       th:if="${pageMode == 'EDIT'}">
-                        <i class="fas fa-trash"></i>
-                    </a>
-                </h1>
-
-                <form class="mt-4"
+
+                <form
                       hx-push-url="true" hx-swap="outerHTML" hx-target="body"
                       id="editAppointmentForm"
                       th:attr="hx-post=${pageMode == 'CREATE' ? '/therapist/appointments/new' : null},hx-put=${pageMode == 'EDIT' ? '/therapist/appointments/' + appointmentId : null}"
diff --git a/app/src/main/resources/templates/therapist/appointments/schedule.html b/app/src/main/resources/templates/therapist/appointments/schedule.html
@@ -72,46 +72,44 @@
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName='Расписание', controlsView=~{:: #datePickerView})}">
+
+    <div class="calendar-header bg-white z-3" id="datePickerView">
+        <button class="btn btn-outline-secondary"
+                name="datePickerButton"
+                onclick="document.getElementById('datePicker').showPicker()"
+                th:href="@{/therapist/schedule?calendar=true&date={date}(date=${today})}"
+
+        >
+                        <span th:text="${selectedDayLabel}">
+                        </span>
+            &nbsp;
+            <i class="fa-solid fa-chevron-down"></i>
+        </button>
+
+        <input class="d-none"
+               hx-push-url="true"
+               hx-select="main"
+               hx-swap="outerHTML"
+               hx-target="main"
+               hx-trigger="change"
+               id="datePicker"
+               name="date"
+               th:hx-get="@{/therapist/schedule}"
+               th:value="${date}"
+               type="date"
+        >
+    </div>
+</div>
 
 <div id="layoutSidenav">
 
     <div th:replace="~{fragments/leftNavPanel :: leftNavPanel (activeLink='schedule')}"></div>
 
     <div id="layoutSidenav_content">
         <main class="container px-4">
-            <h1 class="mt-4 d-flex justify-content-between align-items-baseline calendar-header bg-white z-2">
-                Расписание
-
-                <div class="calendar-header py-3 bg-white z-3 mb-4">
-                    <button class="btn btn-outline-secondary"
-                            name="datePickerButton"
-                            onclick="document.getElementById('datePicker').showPicker()"
-                            th:href="@{/therapist/schedule?calendar=true&date={date}(date=${today})}"
-
-                    >
-                        <span th:text="${selectedDayLabel}">
-                        </span>
-                        &nbsp;
-                        <i class="fa-solid fa-chevron-down"></i>
-                    </button>
-
-                    <input class="d-none"
-                           hx-push-url="true"
-                           hx-select="main"
-                           hx-swap="outerHTML"
-                           hx-target="main"
-                           hx-trigger="change"
-                           id="datePicker"
-                           name="date"
-                           th:hx-get="@{/therapist/schedule}"
-                           th:value="${date}"
-                           type="date"
-                    >
-                </div>
-            </h1>
 
-            <section id="calendar" th:fragment="calendarSchedule" xmlns:th="http://www.w3.org/1999/html">
+            <section class="mt-3" id="calendar" th:fragment="calendarSchedule" xmlns:th="http://www.w3.org/1999/html">
 
                 <div class="calendar-body mb-4">
                     <th:block th:each="mark : ${timeMarks}">
diff --git a/app/src/main/resources/templates/therapist/clients/client-create.html b/app/src/main/resources/templates/therapist/clients/client-create.html
@@ -8,7 +8,7 @@
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = 'Новый клиент')}"></div>
 
 <div id="layoutSidenav">
 
@@ -18,7 +18,6 @@
         <main>
 
             <section class="container px-4">
-                <h1 class="mt-4 pb-2 mb-3 border-bottom">Новый клиент</h1>
                 <div th:replace="therapist/clients/client-card-fragment.html"></div>
             </section>
         </main>
diff --git a/app/src/main/resources/templates/therapist/clients/client-edit.html b/app/src/main/resources/templates/therapist/clients/client-edit.html
@@ -9,7 +9,7 @@
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel (pageName=${client.fullName()})}"></div>
 
 <div id="layoutSidenav">
 
@@ -19,7 +19,6 @@
         <main class="h-100">
 
             <section class="container px-4">
-                <h1 class="mt-4 mb-3" th:text="${client?.fullName() ?: 'ФИО'}">Новый клиент</h1>
 
                 <div class="row g-0 w-100 mb-4 d-none d-sm-flex">
                     <ul class="nav nav-tabs" id="cardTabs">
diff --git a/app/src/main/resources/templates/therapist/clients/clients-list.html b/app/src/main/resources/templates/therapist/clients/clients-list.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
     <div th:replace="~{fragments/header.html}"></div>
-    <title>Список клиентов</title>
+    <title>Клиенты</title>
 </head>
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = 'Клиенты')}"></div>
 
 <div id="layoutSidenav">
 
@@ -16,9 +16,8 @@
     <div id="layoutSidenav_content">
         <main>
             <div class="container px-4">
-                <h1 class="mt-4 pb-2 mb-3 border-bottom">Клиенты</h1>
 
-                <form class="row mt-3 mb-3" hx-get="/therapist/clients/search"
+                <form class="row mb-3" hx-get="/therapist/clients/search"
                       hx-target="#tablePagination"
                       hx-trigger="submit"
                       id="searchClientsFilterForm"
diff --git a/app/src/main/resources/templates/therapist/therapy/exercises/exercise-create.html b/app/src/main/resources/templates/therapist/therapy/exercises/exercise-create.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
     <div th:replace="~{fragments/header.html}"></div>
-    <title>Новое упражнение</title>
+    <title th:text="${exercise?.title ?: 'Новое упражнение'}">Новое упражнение</title>
     <link href="/styles/therapist/create-exercise.css" rel="stylesheet"/>
 </head>
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = ${exercise?.title ?: 'Новое упражнение'})}"></div>
 
 <div id="layoutSidenav">
 
@@ -16,9 +16,7 @@
     <div id="layoutSidenav_content">
         <main>
             <section class="container px-4">
-                <h1 class="mt-4 pb-2 mb-3 border-bottom" th:text="${exercise?.title ?: 'Новое упражнение'}">Новое
-                    упражнение</h1>
-                <form class="mt-4"
+                <form
                       hx-post=""
                       enctype="multipart/form-data"
                       id="exerciseForm"
diff --git a/app/src/main/resources/templates/therapist/therapy/exercises/exercises-list.html b/app/src/main/resources/templates/therapist/therapy/exercises/exercises-list.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
     <div th:replace="~{fragments/header.html}"></div>
-    <title>Список упражнений</title>
+    <title>Упражнения</title>
 </head>
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = 'Упражнения')}"></div>
 
 <div id="layoutSidenav">
 
@@ -16,9 +16,8 @@
     <div id="layoutSidenav_content">
         <main>
             <div class="container px-4">
-                <h1 class="mt-4 pb-2 mt-3 border-bottom">Упражнения</h1>
 
-                <form class="row mt-3 mb-3" hx-get="/therapist/exercises/search"
+                <form class="row mb-3" hx-get="/therapist/exercises/search"
                       hx-target="#tablePagination"
                       hx-trigger="submit"
                       id="exercisesSearch"
diff --git a/app/src/main/resources/templates/therapist/therapy/programs/program-edit.html b/app/src/main/resources/templates/therapist/therapy/programs/program-edit.html
@@ -6,7 +6,7 @@
 </head>
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = ${program?.title ?: 'Новая программа'})}"></div>
 
 <div id="layoutSidenav">
 
@@ -15,10 +15,6 @@
     <div id="layoutSidenav_content">
         <main>
             <section class="container px-4">
-                <h1 class="mt-4 pb-2 mb-3 border-bottom" th:text="${program?.title ?: 'Новая программа'}">
-                    Новая программа
-                </h1>
-
 
                 <script id="programFormScript" th:inline="javascript">
                     let initialExercises = /*[[${program?.exercises ?: new java.util.ArrayList()}]]*/ [];
@@ -119,7 +115,7 @@ <h1 class="mt-4 pb-2 mb-3 border-bottom" th:text="${program?.title ?: 'Нова
 
                 </script>
 
-                <form class="mt-4"
+                <form
                       id="programForm"
                       th:attr="hx-post=${pageMode == 'CREATE' ? '/therapist/programs/create' : null},hx-put=${pageMode == 'EDIT' ? '/therapist/programs/' + program.id : null}"
                       hx-on:htmx:validation:validate="validate(event)"
diff --git a/app/src/main/resources/templates/therapist/therapy/programs/programs-list.html b/app/src/main/resources/templates/therapist/therapy/programs/programs-list.html
@@ -7,7 +7,7 @@
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = 'Программы')}"></div>
 
 <div id="layoutSidenav">
 
@@ -16,9 +16,7 @@
     <div id="layoutSidenav_content">
         <main>
             <div class="container px-4">
-                <h1 class="mt-4 mb-3 pb-2 mb-3 border-bottom">Программы</h1>
-
-                <form class="row mt-3 mb-3" hx-get="/therapist/programs/search"
+                <form class="row mb-3" hx-get="/therapist/programs/search"
                       hx-target="#programsTable"
                       hx-trigger="submit"
                       id="programSearchForm"
diff --git a/app/src/main/resources/templates/therapist/therapy/therapeutic-tasks/therapeutic-tasks-list.html b/app/src/main/resources/templates/therapist/therapy/therapeutic-tasks/therapeutic-tasks-list.html
@@ -7,7 +7,7 @@
 
 <body class="sb-nav-fixed">
 
-<div th:replace="~{fragments/headerNavPanel :: headerNavPanel}"></div>
+<div th:replace="~{fragments/headerNavPanel :: headerNavPanel(pageName = 'Терапевтические задачи')}"></div>
 
 <div id="layoutSidenav">
 
@@ -16,7 +16,6 @@
     <div id="layoutSidenav_content">
         <main>
             <div class="container px-4">
-                <h1 class="mt-4 mb-3 pb-2 mb-3 border-bottom">Терапевтические задачи</h1>
                 <div class="mb-4">
                     <form class="input-group" hx-get="/therapist/therapeutic-tasks/search"
                           hx-swap="outerHTML"
diff --git a/app/src/testFixtures/kotlin/pro/qyoga/tests/pages/therapist/clients/ClientsListPage.kt b/app/src/testFixtures/kotlin/pro/qyoga/tests/pages/therapist/clients/ClientsListPage.kt
@@ -23,7 +23,7 @@ object ClientsListPage : QYogaPage {
 
     override val path = ClientsListPageController.PATH
 
-    override val title = "Список клиентов"
+    override val title = "Клиенты"
 
     object ClientSearchForm :
         QYogaForm("searchClientsFilterForm", FormAction.hxGet(ClientsListPageController.SEARCH_PATH)) {
diff --git a/app/src/testFixtures/kotlin/pro/qyoga/tests/pages/therapist/therapy/exercises/EditExercisePage.kt b/app/src/testFixtures/kotlin/pro/qyoga/tests/pages/therapist/therapy/exercises/EditExercisePage.kt
diff --git a/app/src/testFixtures/kotlin/pro/qyoga/tests/pages/therapist/therapy/exercises/ExercisesListPage.kt b/app/src/testFixtures/kotlin/pro/qyoga/tests/pages/therapist/therapy/exercises/ExercisesListPage.kt
