WIP: reponsive layout for report actions

TODOs: - report month - lyout when there are no selected persons (there are ugly gaps...)
urlaubsverwaltung · Oct 22, 2024 · 0cf4e16 · 0cf4e16
1 parent e252660
commit 0cf4e16
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 50 deletions.
diff --git a/src/main/css/reports.css b/src/main/css/reports.css
@@ -1,3 +1,130 @@
+.report-actions {
+  display: grid;
+  gap: 1rem;
+}
+
+.report-actions__pagination {
+  @apply w-full;
+  @apply flex;
+  @apply items-center;
+  @apply gap-1;
+}
+
+.report-actions__persons {
+  display: grid;
+  grid-row: span 2;
+  grid-template-rows: subgrid;
+  grid-template-columns: subgrid;
+}
+.report-actions__avatars {
+  margin-top: -0.75rem;
+}
+
+.report-actions__csv {
+}
+
+@screen xxs {
+  .report-actions {
+    grid-template-columns: auto 1fr auto;
+  }
+  .report-actions__pagination {
+    grid-column: span 3;
+  }
+  .report-actions__persons {
+    grid-column: span 2;
+  }
+  .report-actions__persons-select {
+    grid-column: 1 / span 3;
+    grid-row: auto;
+  }
+  .report-actions__avatars {
+    grid-column: 1 / span 3;
+    grid-row: 3;
+  }
+  .report-actions__csv {
+    grid-row: 2;
+    grid-column: 3;
+  }
+}
+
+@screen xs {
+  .report-actions {
+    grid-template-columns: auto 1fr auto;
+  }
+  .report-actions__pagination {
+    grid-column: span 2;
+  }
+  .report-actions__persons {
+    grid-row: 2;
+    grid-column: span 3;
+  }
+  .report-actions__persons-select {
+    grid-column: 1;
+  }
+  .report-actions__avatars {
+    grid-row: 2;
+    grid-column: 2 / span 2;
+    margin-top: 0;
+  }
+  .report-actions__csv {
+    grid-row: 1;
+    grid-column: 3;
+  }
+}
+
+@screen md {
+  .report-actions {
+    grid-template-columns: auto 1fr auto auto;
+    grid-template-rows: auto auto;
+  }
+  .report-actions__pagination {
+    grid-column: 1;
+  }
+  .report-actions__persons {
+    grid-row: 1 / span 2;
+    grid-column: 3;
+  }
+  .report-actions__persons-select {
+    grid-column: 3;
+  }
+  .report-actions__avatars {
+    grid-row: 2;
+    grid-column: 3 / span 2;
+    margin-top: -0.75rem;
+  }
+  .report-actions__csv {
+    grid-row: 1;
+    grid-column: 4;
+  }
+}
+
+@screen xl {
+  .report-actions {
+    grid-template-columns: 50% auto auto 1fr auto;
+    grid-template-rows: auto;
+  }
+  .report-actions__pagination {
+    grid-column: 1;
+  }
+  .report-actions__persons {
+    grid-row: 1;
+    grid-column: 2 / span 3;
+  }
+  .report-actions__persons-select {
+    grid-row: 1;
+    grid-column: 1;
+  }
+  .report-actions__avatars {
+    grid-row: 1;
+    grid-column: 2 / span 2;
+    margin-top: 0;
+  }
+  .report-actions__csv {
+    grid-row: 1;
+    grid-column: 5;
+  }
+}
+
 .report-graph-hover-background {
   fill: transparent;
 }

diff --git a/src/main/resources/templates/reports/_user-select.html b/src/main/resources/templates/reports/_user-select.html
@@ -9,9 +9,9 @@
       action="#"
       th:action="${userReportFilterUrl}"
       method="get"
-      class="flex gap-2"
+      class="report-actions__persons"
     >
-      <div class="relative">
+      <div class="report-actions__persons-select relative">
         <a
           href="#report-user-selection"
           class="button-secondary button-secondary-icon"
@@ -29,9 +29,11 @@
               <svg th:replace="~{icons/users.html::svg(className='w-4 h-4')}" />
             </th:block>
           </th:block>
-          <th:block th:text="#{report.filter.users}"> Personen </th:block>
+          <span th:text="#{report.filter.users}" class="flex-1 text-left"
+            >Personen</span
+          >
           <svg
-            th:replace="~{icons/chevron-down::svg(className='ml-4 w-4 h-4')}"
+            th:replace="~{icons/chevron-down::svg(className='ml-4 w-4 h-4 justify-self-end')}"
           ></svg>
         </a>
         <div id="report-user-selection" data-js-hidden>
@@ -97,20 +99,22 @@
       </div>
       <div
         th:if="${not #lists.isEmpty(selectedUserIds)}"
-        class="flex avatar-group"
+        class="report-actions__avatars"
       >
-        <th:block th:each="user : ${users}">
-          <div
-            th:if="${allUsersSelected or user.selected}"
-            class="avatar text-blue-300"
-          >
-            <img
-              alt=""
-              src=""
-              th:replace="~{fragments/avatar::avatar(${user.fullName},38,38)}"
-            />
-          </div>
-        </th:block>
+        <div class="avatar-group flex w-fit">
+          <th:block th:each="user : ${users}">
+            <div
+              th:if="${allUsersSelected or user.selected}"
+              class="avatar text-blue-300"
+            >
+              <img
+                alt=""
+                src=""
+                th:replace="~{fragments/avatar::avatar(${user.fullName},38,38)}"
+              />
+            </div>
+          </th:block>
+        </div>
       </div>
     </form>
   </body>

diff --git a/src/main/resources/templates/reports/user-report-week.html b/src/main/resources/templates/reports/user-report-week.html
@@ -4,12 +4,9 @@
     <title>Zeiterfassung - Bericht</title>
   </head>
   <body>
-    <div
-      th:fragment="chart-navigation"
-      class="flex flex-row gap-4 flex-wrap items-start 2xl:grid 2xl:grid-cols-2 2xl:gap-8"
-    >
+    <div th:fragment="chart-navigation" class="report-actions">
       <nav
-        class="flex items-center gap-1"
+        class="report-actions__pagination"
         th:aria-label="#{report.time.pagination.navigation.aria-label}"
       >
         <a
@@ -29,7 +26,7 @@
         <a
           href="#"
           th:href="${userReportTodaySectionUrl}"
-          class="button-primary"
+          class="button-primary flex-1 justify-center xs:flex-none xs:justify-normal"
           th:text="#{report.month.navigation.button.today}"
         >
           Heute
@@ -47,18 +44,18 @@
           >
         </a>
       </nav>
-      <div class="flex-1 flex justify-between gap-2">
-        <form th:replace="~{reports/_user-select::form}" />
-        <a
-          href="#"
-          th:href="${userReportCsvDownloadUrl}"
-          download
-          class="button-secondary sm:ml-auto inline-block"
-          th:text="#{report.week.button.csv-download}"
-        >
-          CSV Download
-        </a>
-      </div>
+      <!--      <div class="flex-1 flex justify-between gap-2 flex-col xxs:flex-row">-->
+      <form th:replace="~{reports/_user-select::form}" />
+      <a
+        href="#"
+        th:href="${userReportCsvDownloadUrl}"
+        download
+        class="report-actions__csv button-secondary"
+        th:text="#{report.week.button.csv-download}"
+      >
+        CSV Download
+      </a>
+      <!--      </div>-->
     </div>
 
     <th:block th:fragment="chart">
@@ -443,22 +440,24 @@
                     <p
                       class="flex-1 flex items-start gap-1 text-sm text-gray-500 transition-colors group-hover:text-black"
                     >
-                      <th:block th:if="${not #strings.isEmpty(dayEntry.comment)}">
-                      <svg
-                        th:replace="~{icons/message-circle::svg(className='shrink-0 stroke-1 w-5 h-5 text-blue-300 transition-colors group-hover:text-blue-400')}"
-                      />
-                      <span
-                        class="sr-only"
-                        th:text="#{report.detail.day.comment.label}"
-                      >
-                        Kommentar:
-                      </span>
-                      <span
-                        th:text="${dayEntry.comment}"
-                        class="flex-1 break-words leading-5"
+                      <th:block
+                        th:if="${not #strings.isEmpty(dayEntry.comment)}"
                       >
-                        hard work!
-                      </span>
+                        <svg
+                          th:replace="~{icons/message-circle::svg(className='shrink-0 stroke-1 w-5 h-5 text-blue-300 transition-colors group-hover:text-blue-400')}"
+                        />
+                        <span
+                          class="sr-only"
+                          th:text="#{report.detail.day.comment.label}"
+                        >
+                          Kommentar:
+                        </span>
+                        <span
+                          th:text="${dayEntry.comment}"
+                          class="flex-1 break-words leading-5"
+                        >
+                          hard work!
+                        </span>
                       </th:block>
                       <th:block th:if="${#strings.isEmpty(dayEntry.comment)}">
                         <svg

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -25,6 +25,7 @@ module.exports = {
         21: "5.25rem",
       },
       screens: {
+        xxs: "420px",
         xs: "480px",
         "2xl": "1440px",
         "3xl": "1600px",