From 6ddf5cfeafc14ac624cc400c64561f33e7617041 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Fri, 24 May 2024 18:42:18 +0200
Subject: [PATCH] store/dash: misc responsiveness improvements

---
 store/templates/dash.html | 66 ++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/store/templates/dash.html b/store/templates/dash.html
index 66fcce68..84deb66d 100644
--- a/store/templates/dash.html
+++ b/store/templates/dash.html
@@ -8,12 +8,13 @@
     <h1 class="text-2xl font-bold">
         {{ _("App packaging dashboard") }}
     </h1>
-    <p class="text-sm text-gray-700 mx-10 mt-2">{{ _("This is where packagers can monitor the status of automatic tests (CI) and ongoing major pull requests accross all apps. If you want to get started with app packaging in YunoHost, please check out the <a class='text-blue-500' href='https://yunohost.org/packaging_apps'>packaging documentation</a> and come say hi to us on the <a class='text-blue-500' href='https://yunohost.org/chat_rooms'>app packaging chatroom</a>!") }}</p>
+    <p class="text-sm text-gray-700 mx-2 md:mx-32 mt-2">{{ _("This is where packagers can monitor the status of automatic tests (CI) and ongoing major pull requests accross all apps. If you want to get started with app packaging in YunoHost, please check out the <a class='text-blue-500' href='https://yunohost.org/packaging_apps'>packaging documentation</a> and come say hi to us on the <a class='text-blue-500' href='https://yunohost.org/chat_rooms'>app packaging chatroom</a>!") }}</p>
 
 </div>
 
-<div class="mx-auto text-center py-4">
-    <div class="inline-block w-5/12">
+
+<div class="mx-auto text-center space-y-3 md:space-y-0 md:space-x-3 px-2 md:px-10 lg:px-20 flex flex-col md:flex-row items-center">
+    <div class="inline-block basis-1/2">
         {{ _("Filter") }}
         <select
           name="selectfilter"
@@ -30,7 +31,7 @@
         <option {% if request.args.get("filter") == "packagingv1" %}selected{% endif %} value="packagingv1">{{ _("Packaging v1 apps") }}</option>
         </select>
     </div>
-    <div class="inline-block w-5/12">
+    <div class="inline-block basis-1/2">
         {{ _("Sort by") }}
         <select
           name="selectsort"
@@ -44,25 +45,24 @@
         <option {% if request.args.get("sort") == "testing_branch_update" %}selected{% endif %} value="testing_branch_update">{{ _("Last update on testing branch") }}</option>
         </select>
     </div>
-    <div class="block w-fit mx-auto flex items-center px-2 pt-2 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}" aria-label="{{ _('Requires to be logged-in') }}"{% endif %}>
-        <label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
-          <span class="sr-only">{{ _("Show only apps you starred") }}</span>
-          <input type="checkbox" id="starsonly" class="peer sr-only" {% if user and request.args.get("starsonly") %}checked{% endif %} {% if not user%}disabled{% endif %} >
+</div>
+<div class="block w-fit mx-auto flex items-center px-2 pt-2 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}" aria-label="{{ _('Requires to be logged-in') }}"{% endif %}>
+    <label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
+      <span class="sr-only">{{ _("Show only apps you starred") }}</span>
+      <input type="checkbox" id="starsonly" class="peer sr-only" {% if user and request.args.get("starsonly") %}checked{% endif %} {% if not user%}disabled{% endif %} >
 
-          <span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500">
-          </span>
-
-          <span class="absolute inset-y-0 start-0 m-1 h-2 w-2 rounded-full bg-white transition-all peer-checked:start-3">
-          </span>
-        </label>
-        {{ _("Show only apps you starred") }}
-    </div>
+      <span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500">
+      </span>
 
+      <span class="absolute inset-y-0 start-0 m-1 h-2 w-2 rounded-full bg-white transition-all peer-checked:start-3">
+      </span>
+    </label>
+    {{ _("Show only apps you starred") }}
 </div>
 
-<table id="appTable" class="mx-auto">
+<table id="appTable" class="mx-auto text-sm sm:text-base">
     <tr class="h-40 md:h-20">
-        <th class="max-w-20 md:max-w-32">{{ _("App") }}</th>
+        <th class="max-w-24 md:max-w-32">{{ _("App") }}</th>
         <th class="-rotate-90 md:-rotate-45 max-w-10 md:max-w-16 text-left text-nowrap">{{ _("Catalog") }}</th>
         <th class="-rotate-90 md:-rotate-45 max-w-10 md:max-w-16 text-left text-nowrap">{{ _("Main CI") }}</th>
         <th class="-rotate-90 md:-rotate-45 max-w-10 md:max-w-16 text-left text-nowrap">{{ _("Bookworm CI") }}</th>
@@ -88,13 +88,15 @@
         data-main-ci-level="{% if infos["ci_results"]["main"] %}{{ infos["ci_results"]["main"]["level"] }}{% else %}-1{% endif %}"
         data-main-ci-daysago="{% if infos["ci_results"]["main"] %}{{ infos["ci_results"]["main"]["timestamp"] | days_ago }}{% else %}-9999{% endif %}"
         data-nextdebian-ci-level="{% if infos["ci_results"]["nextdebian"] %}{{ infos["ci_results"]["nextdebian"]["level"] }}{% else %}-1{% endif %}"
-        data-last-update-master-daysago="{{ infos["ci_results"]["main"]["timestamp"] | days_ago }}"
-        data-last-update-testing-daysago="{% if infos["testing"] %}{{ infos["testing"]["timestamp_updated"] | days_ago }}{% endif %}"
-        data-last-update-autoupdate-daysago="{% if infos["ci-auto-update"] %}{{ infos["ci-auto-update"]["timestamp_updated"] | days_ago }}{% endif %}"
+        data-last-update-master="{{ infos["ci_results"]["main"]["timestamp"] }}"
+        data-last-update-testing="{% if infos["testing"] %}{{ infos["testing"]["timestamp_updated"] }}{% else %}-1{% endif %}"
+        data-last-update-autoupdate="{% if infos["ci-auto-update"] %}{{ infos["ci-auto-update"]["timestamp_updated"] }}{% else %}-1{% endif %}"
         data-packaging-format="{{ infos["packaging_format"] }}"
      >
-        <td class="max-w-40 md:max-w-64 text-center text-blue-600 font-medium"><a href="{{ infos["url"] }}">{{ app }}</a></td>
-        <td class="font-bold">
+        <td class="truncate max-w-24 md:max-w-64 text-center text-blue-600 font-medium">
+            <a href="{{ infos["url"] }}">{{ app }}</a>
+        </td>
+        <td class="font-bold text-center">
             <a href="{{ url_for('app_info', app_id=app) }}">
                 {{ infos["public_level"] }}
                 {% if infos["public_level"] == "?" %}
@@ -105,7 +107,7 @@
                 {% endif %}
             </a>
         </td>
-        <td>
+        <td class="border-l-2 border-gray-100 text-center">
             <a class="{% if infos["public_level"] == infos["ci_results"]["main"]["level"] or infos["ci_results"]["main"]["timestamp"] | days_ago > 30 %}opacity-50{% endif %}" href="https://ci-apps.yunohost.org/ci/apps/{{ app }}/">
                 {% if infos["public_level"] == infos["ci_results"]["main"]["level"] %}
                     =
@@ -123,7 +125,7 @@
                 {% endif %}
             </a>
         </td>
-        <td>
+        <td class="text-center">
             <a class="{% if infos["ci_results"]["nextdebian"] and ((infos["public_level"] == infos["ci_results"]["nextdebian"]["level"]) or (infos["ci_results"]["nextdebian"]["timestamp"] | days_ago) > 30) %}opacity-50{% endif %}" href="https://ci-apps-bookworm.yunohost.org/ci/apps/{{ app }}/">
                 {% if infos["ci_results"]["nextdebian"] %}
                     {% if infos["public_level"] == infos["ci_results"]["nextdebian"]["level"] %}
@@ -145,7 +147,7 @@
                 {% endif %}
             </a>
         </td>
-        <td>
+        <td class="border-l-2 border-gray-100 text-center">
             {% if "testing" in infos %}
                 <a href="{{ infos["testing"]["url"] }}">
                     <i class="fa fa-flask"></i>
@@ -160,7 +162,7 @@
                 </a>
             {% endif %}
         </td>
-        <td>
+        <td class="border-r-2 border-gray-100 text-center"
             {% if "ci-auto-update" in infos %}
                 <a href="{{ infos["ci-auto-update"]["url"] }}">
                     <i class="fa fa-arrow-up"></i>
@@ -175,7 +177,7 @@
                 </a>
             {% endif %}
         </td>
-        <td class="text-sm">
+        <td class="px-3 truncate text-sm max-w-16 sm:max-w-full">
             {% if this_app_stars > 0 %}
                 <span class="text-xs border-purple-400 text-purple-600 px-1 py-0 border rounded">{{ this_app_stars }}
                     <i class="fa {% if not user_starred_this_app %}fa-star-o{% else %}fa-star{% endif %}" aria-hidden="true" title="{{ _("Popularity stars") }}"></i>
@@ -277,7 +279,7 @@
             }
             else if (filterName == "testings")
             {
-                if (entries[i].dataset.lastUpdateTestingDaysago)
+                if (parseInt(entries[i].dataset.lastUpdateTesting) > -1)
                 {
                     entries[i].classList.remove("hidden");
                     nb_found++;
@@ -289,7 +291,7 @@
             }
             else if (filterName == "autoupdate")
             {
-                if (entries[i].dataset.lastUpdateAutoupdateDaysago)
+                if (parseInt(entries[i].dataset.lastUpdateAutoupdate) > -1)
                 {
                     entries[i].classList.remove("hidden");
                     nb_found++;
@@ -338,12 +340,12 @@
         }
         else if (sortBy === "main_branch_update") {
             toSort.sort(function(a, b) {
-                return parseInt(a.dataset.lastUpdateMasterDaysago) < parseInt(b.dataset.lastUpdateMasterDaysago) ? 1 : -1;
+                return parseInt(a.dataset.lastUpdateMaster) < parseInt(b.dataset.lastUpdateMaster) ? 1 : -1;
             });
         }
         else if (sortBy === "testing_branch_update") {
             toSort.sort(function(a, b) {
-                return parseInt(a.dataset.lastUpdateTestingDaysago) < parseInt(b.dataset.lastUpdateTestingDaysago) ? 1 : -1;
+                return parseInt(a.dataset.lastUpdateTesting) < parseInt(b.dataset.lastUpdateTesting) ? 1 : -1;
             });
         }
         else if (sortBy === "alpha") {