feat: Improvements to the results announcement (#1009)

Author: Aiq0

bullet/bullet_admin/templates/bullet_admin/components/country.html

@@ -1,6 +1,6 @@
 {% load components %}
 <div class="flex gap-2 items-center shrink-0">
-    <span class="iconify shrink-0 shadow-lg"
+    <span class="iconify shrink-0 shadow-lg h-4 aspect-4/3"
           data-icon="flag:{{ attributes.code|lower }}-4x3"></span>
     <span>{{ attributes.name }}</span>
 </div>

bullet/bullet_admin/templates/bullet_admin/generic/list_countries.html

@@ -20,15 +20,15 @@
     {% if request.GET.country == country %}
       {% anavitem url=url active=True %}
         <div class="flex gap-2 items-center flex-wrap">
-          <span class="iconify shrink-0 shadow-lg"
+          <span class="iconify shrink-0 shadow-lg h-4 aspect-4/3"
                 data-icon="flag:{{ country_info.code|lower }}-4x3"></span>
           <span>{{ country_info.name }}</span>
         </div>
       {% endanavitem %}
     {% else %}
       {% anavitem url=url active=False %}
         <div class="flex gap-2 items-center flex-wrap">
-          <span class="iconify shrink-0 shadow-lg"
+          <span class="iconify shrink-0 shadow-lg h-4 aspect-4/3"
                 data-icon="flag:{{ country_info.code|lower }}-4x3"></span>
           <span>{{ country_info.name }}</span>
         </div>

bullet/bullet_admin/templates/bullet_admin/results/announce.html

@@ -39,17 +39,17 @@
       <span>{{ position }}.</span>
       <button class="btn-admin-sm bg-primary hover:bg-primary-dark"
               hx-get="{{ links.prev }}"
-              hx-trigger="click, keyup[key=='ArrowDown'||key=='Backspace'] from:body">
+              hx-trigger="click, keyup[key=='ArrowDown'||key=='ArrowLeft'||key=='PageUp'||key=='Backspace'] from:body">
         <i class="fas fa-arrow-down"></i>
       </button>
       <button class="btn-admin-sm bg-primary hover:bg-primary-dark"
               hx-get="{{ links.hide }}"
-              hx-trigger="click, keyup[key=='h'] from:body">
+              hx-trigger="click, keyup[key=='h'||key=='b'||key=='.'] from:body">
         <i class="fas fa-eye-slash"></i>
       </button>
       <button class="btn-admin-sm bg-primary hover:bg-primary-dark"
               hx-get="{{ links.next }}"
-              hx-trigger="click, keyup[key=='ArrowUp'||key==' '] from:body">
+              hx-trigger="click, keyup[key=='ArrowUp'||key=='ArrowRight'||key=='PageDown'||key==' '] from:body">
         <i class="fas fa-arrow-up"></i>
       </button>
     </div>

bullet/bullet_admin/templates/bullet_admin/venues/field__venue.html

@@ -1,5 +1,5 @@
 <div class="flex gap-2 items-center">
-    <span class="iconify shrink-0"
+    <span class="iconify shrink-0 h-4 aspect-4/3"
           data-icon="flag:{{ object.country.code|lower }}-4x3"></span>
     <div>
         <span class="font-bold">{{ object.shortcode }}</span>

bullet/competitions/templates/teams/list.html

@@ -25,7 +25,7 @@ <h1 class="text-4xl md:text-6xl font-bold mt-8 md:mt-24 mb-4 md:mb-16">
             {% for c in countries %}
                 <a href="?country={{ c }}"
                    class="{% if c == country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded flex gap-2 items-center flex-wrap">
-                    <span class="iconify shrink-0 shadow-lg"
+                    <span class="iconify shrink-0 shadow-lg h-4 aspect-4/3"
                           data-icon="flag:{{ c|lower }}-4x3"></span>
                     {% get_country c as country_data %}
                     {{ country_data.name }}

bullet/gallery/templates/gallery/list.html

@@ -15,7 +15,7 @@ <h1 class="text-4xl md:text-6xl font-bold mt-8 md:mt-24">{% translate "Albums" %
         {% for country in countries %}
             <div>
                 <h2 class="flex items-center text-3xl font-bold mb-4">
-                    <span class="iconify h-5 mr-2"
+                    <span class="iconify h-5 aspect-4/3 mr-2"
                           data-icon="flag:{{ country.grouper.code|lower }}-4x3"></span>
                     {{ country.grouper.name }}
                 </h2>

bullet/problems/templates/problems/results.html

@@ -35,7 +35,7 @@ <h2 class="text-2xl md:text-4xl mt-4 font-semibold">
       {% for c in countries %}
         <a href="{% if competition_number %}{% country_url "archive_results_category" category=category.identifier competition_number=competition_number country=c.code|lower %}{% else %}{% country_url "results_category" category=category.identifier country=c.code|lower %}{% endif %}{% query_transform %}"
            class="{% if c == country %} bg-primary text-white font-bold {% else %} bg-gray-100 {% endif %} whitespace-nowrap py-1 px-2 rounded flex gap-2 items-center flex-wrap">
-          <iconify-icon icon="flag:{{ c.code|lower }}-4x3" width="none" class="h-4"></iconify-icon>
+          <iconify-icon icon="flag:{{ c.code|lower }}-4x3" width="none" class="h-4 aspect-4/3"></iconify-icon>
           {{ c.name }}
         </a>
       {% endfor %}

bullet/users/templates/partials/team_name.html

@@ -2,7 +2,7 @@
 {% if team.school %}
 <div class="flex items-center gap-2">
   {% if flag %}
-  <iconify-icon icon="flag:{{ team.school.country.code|lower }}-4x3" width="none" class="h-5"></iconify-icon>
+  <iconify-icon icon="flag:{{ team.school.country.code|lower }}-4x3" width="none" class="h-5 aspect-4/3"></iconify-icon>
   {% endif %}
   <div>
     <div class="font-medium leading-4">

bullet/web/static/js/live-results.js

@@ -15,7 +15,11 @@
             }
 
             document.getElementById("js-title-"+i).innerText = screens[i].title
-            htmx.ajax("GET", screens[i].url, "#js-screen-"+i)
+            try {
+                htmx.ajax("GET", screens[i].url, "#js-screen-"+i)
+            } catch (e) {
+                console.log(`Unable to load screen #${i}: ${e}`)
+            }
         }
 
         setTimeout(scrollMore, 5000)
@@ -36,6 +40,11 @@
         const oldScroll = document.scrollingElement.scrollTop
 
         const row = document.querySelector("#js-results-content tr")
+        if (!row) {
+            console.error("No results are loaded, trying to reload results in 1s")
+            setTimeout(nextScreen, 1000)
+            return;
+        }
         const offset = Math.max(Math.round(row.clientHeight / 40), 1)
         const divided = row.clientHeight / offset
         document.scrollingElement.scrollTop += offset

tailwind.config.js

@@ -8,6 +8,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      aspectRatio: {
+        '4/3': '4 / 3',
+      },
       colors: {
         primary: "var(--primary)",
         "primary-light": "var(--primary-light)",