Add awards to event pages

Author: jhh

setup.cfg

@@ -1,5 +1,5 @@
 {% load wagtailroutablepage_tags %}
-<div class="hidden sm:block min-w-32 bg-white shadow-xs rounded-lg overflow-hidden text-center">
+<div class="hidden md:block min-w-32 bg-white shadow-xs 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 %}
@@ -11,7 +11,7 @@ <h2 class="text-lg font-semibold py-4 border-b bg-blue text-white">Season</h2>
   </ul>
 </div>
 
-<div x-data="{ seasonMenuOpen: false }" class="block sm:hidden relative">
+<div x-data="{ seasonMenuOpen: false }" class="block md:hidden relative">
   <button @click="seasonMenuOpen = !seasonMenuOpen"
           type="button"
           class="inline-flex items-center gap-x-1 text-lg font-semibold text-blue"

website/templates/events/_years.html

@@ -1,11 +1,10 @@
 {% extends "base.html" %}
-{% load blog_tags wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %}
+{% load blog_tags static wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %}
 
 {% block nav_classes %}border-b-2 border-gray-100{% endblock %}
 
 {% block content %}
   <div class="px-4 md:px-6 lg:px-8 mx-auto grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 grid-flow-row gap-4">
-
     <div class="pt-4 lg:pt-6 md:col-span-4">
       <span class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">{{ event.name }}</span>
       <div class="mt-3 sm:mt-4 max-w-prose">
@@ -108,47 +107,65 @@
       </p>
     </a>
   </div>
-  <div class="md:col-span-4 pt-4 max-w-prose">{{ event.body|richtext }}</div>
-
-  <nav class="md:col-span-5 px-4 md:px-6 lg:px-8 flex items-center justify-between border-t border-gray-200 mt-4">
-    <div class="-mt-px flex w-0 flex-1">
-      {% if previous_event %}
-        <a href="{% routablepageurl page 'event_for_key' previous_event.key %}"
-           class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
-          <svg class="mr-3 size-5 text-gray-400"
-               viewBox="0 0 20 20"
-               fill="currentColor"
-               aria-hidden="true"
-               data-slot="icon">
-            <path fill-rule="evenodd" d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" />
-          </svg>
-          Previous Event
-        </a>
+  {% if event.awards or event.body %}
+  <div class="border border-gray-200 rounded-lg shadow-xs bg-white h-fit md:col-span-4 py-4 md:py-6 row-span-2 px-6 max-w-prose">
+      {% if event.awards %}
+      <ul class="pb-2 md:pb-4">
+      {% for award in event.awards %}
+          <li>
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow inline-block size-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
+              </svg>
+              {{ award.name }}
+          </li>
+      {% endfor %}
       {% endif %}
-    </div>
-
-    <div class="hidden md:-mt-px md:flex">
-      <a href="{% routablepageurl page 'events_for_year' event.year %}"
-         class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
-      {{ event.year }} Events</a>
-    </div>
+      </ul>
+      <p>
+          {{ event.body|richtext }}
+      </p>
+  </div>
+  {% endif %}
 
-    <div class="-mt-px flex w-0 flex-1 justify-end">
-      {% if next_event %}
-        <a href="{% routablepageurl page 'event_for_key' next_event.key %}"
-           class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
-          Next Event
-          <svg class="ml-3 size-5 text-gray-400"
-               viewBox="0 0 20 20"
-               fill="currentColor"
-               aria-hidden="true"
-               data-slot="icon">
-            <path fill-rule="evenodd" d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" />
-          </svg>
-        </a>
-      {% endif %}
-    </div>
-  </nav>
 </div>
 
+<nav class="md:col-span-4 px-4 md:px-6 lg:px-8 flex items-center justify-between border-t border-gray-200 mt-4">
+  <div class="-mt-px flex w-0 flex-1">
+    {% if previous_event %}
+      <a href="{% routablepageurl page 'event_for_key' previous_event.key %}"
+         class="inline-flex items-center border-t-2 border-transparent pt-4 pr-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
+        <svg class="mr-3 size-5 text-gray-400"
+             viewBox="0 0 20 20"
+             fill="currentColor"
+             aria-hidden="true"
+             data-slot="icon">
+          <path fill-rule="evenodd" d="M18 10a.75.75 0 0 1-.75.75H4.66l2.1 1.95a.75.75 0 1 1-1.02 1.1l-3.5-3.25a.75.75 0 0 1 0-1.1l3.5-3.25a.75.75 0 1 1 1.02 1.1l-2.1 1.95h12.59A.75.75 0 0 1 18 10Z" clip-rule="evenodd" />
+        </svg>
+        Previous Event
+      </a>
+    {% endif %}
+  </div>
+
+  <div class="hidden md:-mt-px md:flex">
+    <a href="{% routablepageurl page 'events_for_year' event.year %}"
+       class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
+    {{ event.year }} Events</a>
+  </div>
+
+  <div class="-mt-px flex w-0 flex-1 justify-end">
+    {% if next_event %}
+      <a href="{% routablepageurl page 'event_for_key' next_event.key %}"
+         class="inline-flex items-center border-t-2 border-transparent pt-4 pl-1 text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
+        Next Event
+        <svg class="ml-3 size-5 text-gray-400"
+             viewBox="0 0 20 20"
+             fill="currentColor"
+             aria-hidden="true"
+             data-slot="icon">
+          <path fill-rule="evenodd" d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z" clip-rule="evenodd" />
+        </svg>
+      </a>
+    {% endif %}
+  </div>
+</nav>
 {% endblock content %}