[A11y] fix calendar nav dropdown (#5078)

* [A11y] fix calendar nav dropdown

* update organizer calender

* keep cal-nav on one line

* simplify html

* unify calendar layouts

* fix rounding issue with .input-group select+button

* add comment to explain complex css

* fix calendar dropdown due to too broad css-selector

* reduce spacing of top-nav

* fix input-group-btn double line through rounding issue

src/pretix/static/pretixpresale/js/ui/main.js

@@ -476,17 +476,10 @@ $(function () {
         $("[data-save-scrollpos]").on("click submit", function () {
             sessionStorage.setItem('scrollpos', window.scrollY);
         });
+        $("#monthselform").on("submit", function () {
+            sessionStorage.setItem('scrollpos', window.scrollY);
+        });
     }
-    $("#monthselform select").change(function () {
-        if (sessionStorage) sessionStorage.setItem('scrollpos', window.scrollY);
-        this.form.submit();
-    });
-    $("#monthselform input").on("dp.change", function () {
-        if ($(this).data("DateTimePicker")) {  // prevent submit after dp init
-            if (sessionStorage) sessionStorage.setItem('scrollpos', window.scrollY);
-            this.form.submit();
-        }
-    });
     var update_cart_form = function () {
         var is_enabled = $(".product-row input[type=checkbox]:checked, .variations input[type=checkbox]:checked, .product-row input[type=radio]:checked, .variations input[type=radio]:checked").length;
         if (!is_enabled) {

src/pretix/static/pretixpresale/scss/_calendar.scss

@@ -3,7 +3,9 @@
     width: 14.29%;
   }
   h3 {
-    font-size: 16px;
+    font-size: 0.875rem;
+    color: $text-muted;
+    border-bottom: 2px solid $table-border-color;
   }
   p {
     margin-bottom: 3px;
@@ -11,6 +13,7 @@
   .events {
     list-style: none;
     padding: 0;
+    margin-bottom: 0;
   }
   a.event {
     --status-bg-color: var(--pretix-brand-primary-tint-90);
@@ -97,9 +100,13 @@
     margin-bottom: 15px;
   }
   h3 {
+    margin-top: 0;
+    padding-top: 10px;
+    padding-bottom: 8px;
     margin-bottom: 8px;
     font-weight: bold;
     cursor: pointer;
+    background-color: #fff;
   }
   h3 .fa::before {
     content: $fa-var-caret-right;
@@ -112,6 +119,10 @@
   }
 }
 
+.table-calendar .day:nth-child(even) {
+  background-color: $table-bg-accent;
+}
+
 .event-list-filter-form {
   .event-list-filter-form-row {
     display: flex;
@@ -244,7 +255,7 @@
 }
 
 .day-calendar a.event {
-  margin: 1px;
+  margin: 0;
 }
 .day-calendar a.event .event-time {
   display: inline;
@@ -373,9 +384,20 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
   grid-template-rows: repeat(var(--concurrency, 1), auto);
 }
 
+
+.day-timeline {
+  --total-concurrency: var(--concurrency);
+}
 .day-timeline > li {
   grid-column: calc(1 + var(--offset-hour, 0)*60/var(--raster-size, 5) + var(--offset-minute, 0)/var(--raster-size, 5)) / span calc(var(--duration-hour, 0)*60/var(--raster-size, 5) + var(--duration-minute, 0)/var(--raster-size, 5));
   grid-row: var(--concurrency, 1) / span 1;
+  padding: 3px 8px 0;
+  /* add 11px of padding-bottom to the events with --concurrency being the same as --total-concurrency, otherwise 0px */
+  padding-bottom: #{'round(down, calc(11px * var(--concurrency)/var(--total-concurrency)), 11px)'};
+}
+
+.day-timeline > li[data-concurrency="1"] {
+  padding-top: 8px;
 }
 .day-timeline > li:focus-within {
   z-index: 2;  /* move to front so focus-outline overlays other elements */
@@ -385,12 +407,14 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
     grid-row: 1 / span var(--concurrency, 1) !important;
 }
 .ticks li {
-  padding: 8px 3px 5px;
+  padding: 11px 8px 8px;
   line-height: 1;
   border-top-left-radius: $border-radius-base;
   border-top-right-radius: $border-radius-base;
+  border-bottom: 2px solid $table-border-color;
+  font-weight: bold;
 }
-.ticks li:nth-of-type(odd), .tick {
+.tick {
     background-color: $table-bg-accent;
 }
 .day-timeline:nth-last-of-type(1) li {
@@ -422,7 +446,16 @@ if concurrency is higher than 9, JavaScript (currently in pretixpresale/js/ui/ma
 
     .weekday {
       flex: 1;
-      margin: 0 5px;
+      padding: 0 8px 8px;
+    }
+    .weekday:nth-child(even) {
+      background-color: $table-bg-accent;
+    }
+    .weekday h3 {
+      margin-left: -8px;
+      margin-right: -8px;
+      padding-left: 8px;
+      padding-right: 8px;
     }
     .weekday:first-child {
       margin-left: 0;

src/pretix/static/pretixpresale/scss/_event.scss

@@ -240,14 +240,26 @@ div.front-page {
     }
 }
 
-.calendar-nav, .calendar-nav li {
+.calendar-nav, .calendar-nav > li {
     list-style: none;
     margin: 0;
     padding: 0
 }
-.calendar-nav li {
-    padding: 10px 0;
+.calendar-nav > li {
+    padding: 0 0 10px;
 }
+.calendar-nav {
+    display: flex;
+    align-items: end;
+}
+.calendar-nav > li {
+    width: 60%;
+}
+.calendar-nav > li:first-child,
+.calendar-nav > li:last-child {
+    width: 20%;
+}
+
 
 .subevent-toggle {
     display: none;

src/pretix/static/pretixpresale/scss/_forms.scss

@@ -23,6 +23,10 @@ a.btn, button.btn {
     }
 }
 
+.input-group:has(.input-group-btn:last-child) *:not(last-child) {
+  border-right: 0;
+}
+
 .panel-title .radio {
   margin-left: 20px;
 }

src/pretix/static/pretixpresale/scss/main.scss

@@ -14,7 +14,7 @@ $font-size-h4:            ($font-size-base * 1.25) !default;
 $font-size-h5:            $font-size-base !default;
 $font-size-h6:            ($font-size-base * .85) !default;
 
-$line-height-base:        1.428571429 !default;
+$line-height-base:        1.43 !default;
 $line-height-computed:    ($font-size-base * $line-height-base) !default;
 $line-height-large:       1.3333333 !default; // extra decimals for Win 8.1 Chrome
 $line-height-small:       1.5 !default;