Add season fly-out menu for events, remove includes

Author: jhh

website/static/css/main.css

@@ -1629,6 +1629,10 @@ select {
   top: 3rem;
 }
 
+.z-10 {
+  z-index: 10;
+}
+
 .z-20 {
   z-index: 20;
 }
@@ -1641,10 +1645,6 @@ select {
   grid-column: span 1 / span 1;
 }
 
-.col-span-4 {
-  grid-column: span 4 / span 4;
-}
-
 .-m-3 {
   margin: -0.75rem;
 }
@@ -1715,6 +1715,10 @@ select {
   margin-top: 1rem;
 }
 
+.mt-5 {
+  margin-top: 1.25rem;
+}
+
 .mt-6 {
   margin-top: 1.5rem;
 }
@@ -1816,6 +1820,10 @@ select {
   width: 1.25rem;
 }
 
+.w-56 {
+  width: 14rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -1865,6 +1873,11 @@ select {
   max-width: 28rem;
 }
 
+.max-w-min {
+  max-width: -moz-min-content;
+  max-width: min-content;
+}
+
 .max-w-prose {
   max-width: 65ch;
 }
@@ -1885,6 +1898,10 @@ select {
   flex-shrink: 0;
 }
 
+.shrink {
+  flex-shrink: 1;
+}
+
 .grow-0 {
   flex-grow: 0;
 }
@@ -2007,6 +2024,11 @@ select {
   gap: 2rem;
 }
 
+.gap-x-1 {
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+
 .gap-x-8 {
   -moz-column-gap: 2rem;
        column-gap: 2rem;
@@ -2118,6 +2140,10 @@ select {
   border-radius: 0.375rem;
 }
 
+.rounded-xl {
+  border-radius: 0.75rem;
+}
+
 .rounded-l-md {
   border-top-left-radius: 0.375rem;
   border-bottom-left-radius: 0.375rem;
@@ -2370,6 +2396,11 @@ select {
   line-height: 1.25rem;
 }
 
+.text-sm\/6 {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
@@ -2522,6 +2553,10 @@ select {
   --tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity, 1));
 }
 
+.ring-gray-900\/5 {
+  --tw-ring-color: rgb(17 24 39 / 0.05);
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -2544,6 +2579,12 @@ select {
   transition-duration: 150ms;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-150 {
   transition-duration: 150ms;
 }
@@ -2552,6 +2593,10 @@ select {
   transition-duration: 200ms;
 }
 
+.duration-300 {
+  transition-duration: 300ms;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -2560,6 +2605,10 @@ select {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
+.ease-linear {
+  transition-timing-function: linear;
+}
+
 .richtext-image.full-width {
   width: 100%;
 }
@@ -2771,14 +2820,14 @@ input#id_phone_number, label[for='id_phone_number'] {
     order: 0;
   }
 
-  .sm\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
   .sm\:col-span-1 {
     grid-column: span 1 / span 1;
   }
 
+  .sm\:col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+
   .sm\:col-span-4 {
     grid-column: span 4 / span 4;
   }
@@ -2800,6 +2849,10 @@ input#id_phone_number, label[for='id_phone_number'] {
     margin-left: 1.5rem;
   }
 
+  .sm\:ml-auto {
+    margin-left: auto;
+  }
+
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -2812,8 +2865,8 @@ input#id_phone_number, label[for='id_phone_number'] {
     margin-top: 1rem;
   }
 
-  .sm\:ml-auto {
-    margin-left: auto;
+  .sm\:block {
+    display: block;
   }
 
   .sm\:flex {
@@ -2828,6 +2881,10 @@ input#id_phone_number, label[for='id_phone_number'] {
     display: inline-grid;
   }
 
+  .sm\:hidden {
+    display: none;
+  }
+
   .sm\:h-10 {
     height: 2.5rem;
   }
@@ -2973,10 +3030,6 @@ input#id_phone_number, label[for='id_phone_number'] {
     grid-column: span 4 / span 4;
   }
 
-  .md\:row-span-2 {
-    grid-row: span 2 / span 2;
-  }
-
   .md\:row-span-3 {
     grid-row: span 3 / span 3;
   }

website/templates/events/_date.html

@@ -1,5 +1,5 @@
 {% load wagtailroutablepage_tags %}
-<div class="min-w-32 bg-white shadow-sm rounded-lg overflow-hidden text-center">
+<div class="hidden sm:block min-w-32 bg-white shadow-sm rounded-lg overflow-hidden text-center">
   <h2 class="text-lg font-semibold py-4 border-b bg-blue text-white">Season</h2>
   <ul class="flex flex-col p-2">
     {% for year in years %}
@@ -10,3 +10,34 @@ <h2 class="text-lg font-semibold py-4 border-b bg-blue text-white">Season</h2>
     {% endfor %}
   </ul>
 </div>
+
+<div x-data="{ seasonMenuOpen: false }" class="block sm:hidden relative">
+  <button @click="seasonMenuOpen = !seasonMenuOpen"
+          type="button"
+          class="inline-flex items-center gap-x-1 text-lg font-semibold text-blue"
+          aria-expanded="false">
+    <span>Season</span>
+    <svg class="size-5"
+         viewBox="0 0 20 20"
+         fill="currentColor"
+         aria-hidden="true"
+         data-slot="icon">
+      <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+    </svg>
+  </button>
+  <div x-show="seasonMenuOpen"
+       x-transition:enter="transition ease-out duration-200"
+       x-transition:enter-start="opacity-0 translate-y-1"
+       x-transition:enter-end="opacity-100 translate-y-0"
+       x-transition:leave="transition ease-in duration-150"
+       x-transition:leave-start="opacity-100 translate-y-0"
+       x-transition:leave-end="opacity-0 translate-y-1"
+       class="absolute left-1/2 z-10 mt-5 flex w-screen max-w-min -translate-x-1/2 px-4">
+    <div class="w-56 shrink rounded-xl bg-white p-4 text-sm/6 font-semibold text-gray-900 shadow-lg ring-1 ring-gray-900/5">
+      {% for year in years %}
+        <a href="{% routablepageurl page 'events_for_year' year %}"
+           class="block p-2 hover:text-indigo-600">{{ year }}</a>
+      {% endfor %}
+    </div>
+  </div>
+</div>