refactor: overview table

- remove desktop/mobile variant, in favor of responsive desktop view
- add heading for each date
- update `min/max-width`

cypress/e2e/admin-view.cy.ts

@@ -60,7 +60,7 @@ context('admin-view', () => {
       cy.get('[data-cy=overviewDeleteLabel]');
       cy.get('[data-cy=overviewDeleteValue]');
 
-      cy.get('[data-id=overviewDatesDesktop]');
+      cy.get('[data-id=overviewDates]');
       cy.get('[data-id=statusPollButton]');
       cy.get('[data-id=pauseText]');
       cy.get('[data-id=continueEverytime]');

cypress/e2e/overview-view.cy.ts

@@ -31,7 +31,7 @@ context('overview-view', () => {
       cy.get('[data-cy=overviewDeleteLabel]');
       cy.get('[data-cy=overviewDeleteValue]');
 
-      cy.get('[data-id=overviewDatesDesktop]');
+      cy.get('[data-id=overviewDates]');
       cy.get('[data-id=back]')
         .should('be.enabled');
       cy.get('[data-id=next]')

src/app/poll/mobile-poll-table.component.html

@@ -101,7 +101,7 @@
                   <app-suggested-date [date]="date" [index]="i"></app-suggested-date>
                 </div>
                 @if (!formHelper.hasAddOrEditParticipantForm()) {
-                  <div class="col-4 d-flex justify-content-center align-items-center">
+                  <div class="col d-flex justify-content-center align-items-center">
                     <button
                       (click)="formHelper.downloadCal(date, i)"
                       class="download-cal btn btn-rounded btn-sm btn-light"

src/app/poll/mobile-poll-table.component.scss

@@ -27,11 +27,10 @@
 }
 
 .poll-table td.suggested-date {
-  @media (min-width: map-get($grid-breakpoints, sm)) {
-    width: 150px;
-  }
-  @media (min-width: map-get($grid-breakpoints, md)) {
-    width: 180px;
+  width: 180px;
+
+  @media (max-width: 430px) {
+    width: 45%;
   }
 }
 

src/app/shared/components/dates-overview/dates-overview.component.html

@@ -1,28 +1,25 @@
 @if (appointment) {
-  <div class="date-time-overview">
-    <table class="table mobile d-table d-lg-none w-100" data-id="overviewDatesMobile">
+  <div class="date-time-overview mt-2 table-responsive">
+    <table class="table table-borderless d-inline-block mt-1" data-id="overviewDates">
+      <thead>
+      <caption class="visually-hidden">{{ 'poll.caption' | translate }}</caption>
+      <tr>
+        @for (date of appointment.suggestedDates; track date; let i = $index) {
+          <th scope="row">
+            {{ 'date.date' | translate }} {{ i + 1 }}
+          </th>
+        }
+      </tr>
+      </thead>
       <tbody>
+      <tr>
         @for (date of appointment.suggestedDates; track date; let i = $index) {
-          <tr>
-            <td>
-              <app-suggested-date [date]="date" [index]="i"></app-suggested-date>
-            </td>
-          </tr>
+          <td>
+            <app-suggested-date [date]="date" [index]="i"></app-suggested-date>
+          </td>
         }
+      </tr>
       </tbody>
     </table>
-    <div class="table-responsive d-none d-lg-block">
-      <table class="table table-borderless desktop d-inline-block mt-3 mb-1" data-id="overviewDatesDesktop">
-        <tbody>
-        <tr>
-          @for (date of appointment.suggestedDates; track date; let i = $index) {
-            <td>
-              <app-suggested-date [date]="date" [index]="i"></app-suggested-date>
-            </td>
-          }
-        </tr>
-        </tbody>
-      </table>
-    </div>
   </div>
 }

src/app/shared/components/dates-overview/dates-overview.component.scss

@@ -1,32 +1,31 @@
 @import "src/default.scss";
 
-.date-time-overview table.mobile {
-  tr td {
-    border-top: 1px solid $dark-gray;
-  }
+.date-time-overview table {
+  color: $primary;
+
+  th {
+    min-width: $suggested-date-desktop-min-width;
+    max-width: $suggested-date-desktop-max-width;
 
-  tr:first-child td {
-    border-top: none;
+    font-size: medium;
+    text-align: center;
+    vertical-align: middle;
   }
-}
 
-.date-time-overview table.desktop {
-  td {
+  td,
+  th {
     padding: 0;
-    min-width: $suggested-date-desktop-min-width;
-    max-width: $suggested-date-desktop-max-width;
-    border-right: 1px solid $dark-gray;
+    border-right: 1px solid $divider-border-color;
   }
 
-  td:last-child {
-    border-right: none;
+  td,
+  th {
+    &:last-child {
+      border-right: none;
+    }
   }
 }
 
 .btn .btn-next {
   min-width: 172px !important;
 }
-
-.table {
-  color: $primary;
-}

src/app/shared/components/suggested-date/suggested-date.component.scss

@@ -43,17 +43,15 @@ div {
 }
 
 .suggested-date-container {
-  @include media-breakpoint-up(lg) {
+  @include media-breakpoint-up(md) {
     min-width: $suggested-date-desktop-min-width;
     max-width: $suggested-date-desktop-max-width;
     .column {
       width: $suggested-date-desktop-min-width * 0.4;
     }
   }
   @include media-breakpoint-down(md) {
+    min-width: $suggested-date-mobile-min-width;
     max-width: $suggested-date-mobile-max-width;
-    .column {
-      width: $suggested-date-mobile-max-width * 0.4;
-    }
   }
 }

src/default.scss

@@ -42,10 +42,10 @@ $poll-option-height-large: 50px;
 $bootstrap-form-control-color: black; /* #495057; */
 $head-logo-width: auto !important;
 $head-logo-height: 6rem !important;
-$suggested-date-desktop-min-width: 140px;
+$suggested-date-desktop-min-width: 120px;
 $suggested-date-desktop-max-width: 160px;
-$suggested-date-mobile-min-width: 70px;
-$suggested-date-mobile-max-width: 100px;
+$suggested-date-mobile-min-width: 100px;
+$suggested-date-mobile-max-width: 120px;
 $font-size-small: 1rem; /* Baseline font-size: 16px */
 $small-font-size: $font-size-small;
 $font-size-medium: 1.275rem;