From fd6f0eb24c73cbf864590ce91fbe69068e898304 Mon Sep 17 00:00:00 2001
From: Alexandre Aubin <alex.aubin@mailoo.org>
Date: Tue, 19 Sep 2023 01:13:27 +0200
Subject: [PATCH] appstore: much responsiveness

---
 store/templates/app.html          |  80 +++++++++++--------
 store/templates/base.html         | 125 +++++++++++++++++++++++++-----
 store/templates/catalog.html      |  18 ++---
 store/templates/index.html        |   4 +-
 store/templates/wishlist.html     |  33 ++++----
 store/templates/wishlist_add.html |   5 +-
 6 files changed, 180 insertions(+), 85 deletions(-)

diff --git a/store/templates/app.html b/store/templates/app.html
index d5aa6420..2bf65d94 100644
--- a/store/templates/app.html
+++ b/store/templates/app.html
@@ -1,37 +1,49 @@
 {% extends "base.html" %}
 {% block main %}
-<div class="max-w-screen-md mx-auto pt-5">
+<div class="max-w-screen-md mx-auto pt-5 px-5 lg:px-0">
 
-    <span class="flex flex-row items-end mb-1">
-        <img {% if infos['logo_hash'] %}
-             src="https://app.yunohost.org/default/v3/logos/{{ infos['logo_hash'] }}.png"
-             {% else %}
-             src="{{ url_for('static', filename='app_logo_placeholder.png') }}"
-             {% endif %}
-             loading="lazy"
-             class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
-        />
-        <h2 class="flex-0 pl-2 pt-3 text-3xl font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h2>
-        {% if infos['category'] %}
-        <span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px]  border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
-            {{ catalog['categories'][infos['category']]['title']|localize|lower }}
-        </span>
-        {% endif %}
-        <div class="grow"></div>
+    <span class="sm:flex sm:flex-row sm:items-end mb-1">
+        <span class="flex flex-row items-end">
+            <img {% if infos['logo_hash'] %}
+                 src="https://app.yunohost.org/default/v3/logos/{{ infos['logo_hash'] }}.png"
+                 {% else %}
+                 src="{{ url_for('static', filename='app_logo_placeholder.png') }}"
+                 {% endif %}
+                 loading="lazy"
+                 class="h-12 w-12 rounded-lg object-cover shadow-sm mt-1"
+            />
+            <h2 class="flex-0 pl-2 pt-3 text-3xl font-bold text-gray-900">{{ infos["manifest"]["name"] }}</h2>
 
-
-        <div class="h-9.5">
-            {% if infos['level'] == "?" or infos["level"]|int <= 4 %}
-            <i class="fa fa-exclamation-circle text-red-500 py-0.5"
-               aria-hidden="true"
-               title="{{ _('This app is currently flagged as broken because it failed our automatic tests.') }} {{ _('This is usually a temporary situation which requires packagers to fix something in the app.') }}"
-            ></i>
-            {% elif infos['level'] == 8 %}
-            <i class="fa fa-diamond text-teal-500 py-0.5" aria-hidden="true"
-               title="{{ _('This app has been good quality according to our automatic tests over at least one year.') }}"
-            ></i>
+            {% if infos['category'] %}
+            <span class="ml-2 mb-1 rounded-full px-2.5 py-0.5 text-[10px] border text-{{ catalog['categories'][infos['category']]['color'] }}-500 border-{{ catalog['categories'][infos['category']]['color'] }}-400 ">
+                {{ catalog['categories'][infos['category']]['title']|localize|lower }}
+            </span>
             {% endif %}
 
+            {% if infos['level'] == "?" or infos["level"]|int <= 4 %}
+            <span class="ml-2 mb-1.5">
+                <i class="fa fa-exclamation-circle text-red-500 py-0.5"
+                   aria-hidden="true"
+                   title="{{ _('This app is currently flagged as broken because it failed our automatic tests.') }} {{ _('This is usually a temporary situation which requires packagers to fix something in the app.') }}"
+                ></i>
+            </span>
+            {% elif infos['level'] == 8 %}
+            <span class="ml-2 mb-1.5">
+                <i class="fa fa-diamond text-teal-500 py-0.5"
+                   aria-hidden="true"
+                   title="{{ _('This app has been good quality according to our automatic tests over at least one year.') }}"
+                ></i>
+            </span>
+            {% endif %}
+
+        </span>
+
+        <span class="grow"></span>
+
+        <div class="h-9.5 flex flex-row items-end my-3 sm:my-0 scale-90 sm:scale-100">
+        
+            <span class="grow"></span>
+
             {% set this_app_stars = stars.get(app_id, {})|length %}
             {% if user %}
                 {% set user_starred_this_app = user['id'] in stars.get(app_id, {}) %}
@@ -62,16 +74,16 @@
               href="{{ infos["manifest"]["upstream"]["demo"] }}"
             >
               <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
-              {{ _("Try the demo") }} 
+              <span class="hidden sm:inline">{{ _("Try the demo") }}</span>
+              <span class="inline sm:hidden">{{ _("Demo") }}</span>
             </a>
             {% endif %}
+            <a class="h-9.5 inline-block rounded-md border p-0 bg-gray-900 text-white " href="https://install-app.yunohost.org/?app={{ app_id }}">
+                <span class="inline-block text-[11px] leading-3 text-center py-1.5 pl-2">Install<br/>with</span>
+                <span class="inline-block pr-2 pt-1"><img src="{{ url_for('static', filename='horizontal-yunohost.svg') }}" /></span>
+            </a>
         </div>
 
-        <a class="h-9.5 inline-block rounded-md border p-0 bg-gray-900 text-white " href="https://install-app.yunohost.org/?app={{ app_id }}">
-            <span class="inline-block text-[11px] leading-3 text-center py-1.5 pl-2">Install<br/>with</span>
-            <span class="inline-block pr-2 pt-1"><img src="{{ url_for('static', filename='horizontal-yunohost.svg') }}" /></span>
-        </a>
-
     </span>
 
     <p class="text-sm text-slate-500">{{ _("Current version: %(version)s", version=infos["manifest"]["version"]) }}</p>
diff --git a/store/templates/base.html b/store/templates/base.html
index 7823da0f..0b8afd5e 100644
--- a/store/templates/base.html
+++ b/store/templates/base.html
@@ -58,7 +58,7 @@
             </a>
 
             <div class="flex flex-1 items-center justify-end md:justify-between">
-              <nav aria-label="Global" class="hidden md:block">
+              <nav class="hidden md:block">
                 <ul class="flex items-center gap-6 text-sm">
                   <li>
                     <a class="text-gray-800 font-bold transition hover:text-gray-500/75" href="{{ url_for('browse_catalog') }}">
@@ -75,9 +75,9 @@
               </nav>
 
               <div class="flex items-center gap-4">
-                <div class="sm:flex sm:gap-4">
+                <div class="hidden md:flex sm:gap-4">
                   <a
-                    class="btn btn-primary-outline hidden md:inline-block"
+                    class="btn btn-primary-outline inline-block"
                     href="https://yunohost.org/docs/"
                   >
                     <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
@@ -85,8 +85,9 @@
                   </a>
                   {% if not user %}
                   <a
-                    class="btn btn-primary hidden md:inline-block"
+                    class="btn btn-primary inline-block"
                     href="{{ url_for('login_using_discourse') }}"
+                    role="button"
                   >
                      {{ _("Login using YunoHost's forum") }} 
                   </a>
@@ -95,14 +96,14 @@
                       <button
                         id="toggleUserMenu"
                         type="button"
-                        class="group flex shrink-0 items-center rounded-lg transition"
+                        class="group flex shrink-0 items-center rounded-md transition"
                       >
                           <img
                             alt="Man"
                             src="{{ user['avatar_url'] }}"
                             class="h-10 w-10 rounded-full object-cover"
                           />
-                          <p class="ms-2 hidden text-left text-xs sm:inline-block">
+                          <p class="ms-2 text-left text-xs inline-block">
                             <strong class="block font-medium">{{ user['username'] }}</strong>
                           </p>
                           <i class="fa fa-caret-down fa-fw" aria-hidden="true"></i>
@@ -115,26 +116,106 @@
                         <div class="p-2">
                           <a
                             href="/logout"
-                            class="block rounded-lg px-4 py-2 text-sm text-gray-500 hover:bg-gray-50 hover:text-gray-700"
+                            class="block rounded-md px-4 py-2 text-sm text-gray-800 hover:bg-gray-50 hover:text-gray-700"
                             role="menuitem"
                           >
-                            Logout
+                            {{ _("Logout") }} 
                           </a>
                         </div>
                      </div>
                   </div>
                   {% endif %}
-
-
-
                 </div>
 
-                <button
-                  class="block rounded bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden"
-                >
-                  <span class="sr-only">{{ _("Toggle menu") }}</span>
-                  <i class="fa fa-bars h-5 w-5" aria-hidden="true"></i>
-                </button>
+                <div class="relative">
+                    <button
+                      id="toggleMenu"
+                      class="block rounded bg-gray-100 p-2.5 text-gray-600 transition hover:text-gray-600/75 md:hidden"
+                    >
+                      <span class="sr-only">{{ _("Toggle menu") }}</span>
+                      <i class="fa fa-bars h-5 w-5" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      id="menu"
+                      class="hidden absolute end-0 z-10 mt-2 p-2 w-64 rounded-md border border-gray-100 text-gray-800 bg-white shadow-lg"
+                      role="menu"
+                    >
+                      <div class="px-2 py-0.5">
+                        <a
+                          href="/"
+                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
+                          role="menuitem"
+                        >
+                          {{ _("Home") }}
+                        </a>
+                      </div>
+                      <div class="px-2 py-0.5">
+                        <a
+                          href="{{ url_for('browse_catalog') }}"
+                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
+                          role="menuitem"
+                        >
+                          {{ _("Catalog") }} 
+                        </a>
+                      </div>
+                      <div class="px-2 py-0.5">
+                        <a
+                          href="{{ url_for('browse_wishlist') }}"
+                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
+                          role="menuitem"
+                        >
+                          {{ _("Wishlist") }} 
+                        </a>
+                      </div>
+                      <div class="px-2 py-1">
+                        <a
+                          href="https://yunohost.org/docs/"
+                          class="block btn btn-primary-outline text-xs text-gray-500"
+                          role="menuitem"
+                        >
+                            <i class="fa fa-external-link fa-fw" aria-hidden="true"></i>
+                            {{ _("YunoHost documentation") }} 
+                        </a>
+                      </div>
+                      {% if not user %}
+                      <div class="px-2 py-1">
+                        <a
+                          href="{{ url_for('login_using_discourse') }}"
+                          class="block btn btn-primary rounded-md text-xs text-gray-500"
+                          role="button"
+                        >
+                          {{ _("Login using YunoHost's forum") }} 
+                        </a>
+                      </div>
+                      {% else %}
+                      <hr class="mt-3" />
+                      <div class="px-2 py-0.5">
+                        <span
+                          class="block rounded-md px-4 py-2 text-sm text-gray-500"
+                          role="menuitem"
+                        >
+                          <img
+                            alt="Avatar"
+                            src="{{ user['avatar_url'] }}"
+                            class="h-10 w-10 rounded-full object-cover inline-block"
+                          />
+                          <p class="ms-2 inline-block text-left">
+                            <strong class="font-medium">{{ user['username'] }}</strong>
+                          </p>
+                        </span>
+                      </div>
+                      <div class="px-2 py-0.5">
+                        <a
+                          href="/logout"
+                          class="block rounded-md px-4 py-3 text-sm hover:bg-gray-100"
+                          role="menuitem"
+                        >
+                          {{ _("Logout") }} 
+                        </a>
+                      </div>
+                      {% endif %}
+                   </div>
+                </div>
               </div>
             </div>
           </div>
@@ -146,13 +227,15 @@
         <footer class="h-5 mt-5"></footer>
   </body>
 
-  {% if user %}
   <script>
-      let toggleUserMenu = document.getElementById('toggleUserMenu');
-      toggleUserMenu.addEventListener('click', () => {
+      {% if user %}
+      document.getElementById('toggleUserMenu').addEventListener('click', () => {
         document.getElementById('userMenu').classList.toggle("hidden");
       });
+      {% endif %}
+      document.getElementById('toggleMenu').addEventListener('click', () => {
+        document.getElementById('menu').classList.toggle("hidden");
+      });
   </script>
-  {% endif %}
 
 </html>
diff --git a/store/templates/catalog.html b/store/templates/catalog.html
index e82eadde..b6614a1f 100644
--- a/store/templates/catalog.html
+++ b/store/templates/catalog.html
@@ -16,10 +16,10 @@
 >
     <a
         href="{{ url_for('app_info', app_id=app) }}"
-        class="relative block overflow-hidden rounded-lg p-2 hover:bg-gray-200"
+        class="relative block overflow-hidden rounded-lg py-2 px-4 hover:bg-gray-100 mx-2 md:mx-0"
         >
-        <div class="sm:flex sm:justify-between sm:gap-4">
-            <div class="sm:shrink-0">
+        <div class="flex justify-between gap-4">
+            <div class="shrink-0">
                 <img
                         {% if infos['logo_hash'] %}
                         src="https://app.yunohost.org/default/v3/logos/{{ infos['logo_hash'] }}.png"
@@ -35,7 +35,7 @@
                     <h3 class="grow text-md font-bold text-gray-900">
                         {{ infos['manifest']['name'] }}
                     </h3>
-                    <span class="pt-1 pr-2 text-xs">
+                    <span class="text-xs">
                         {% if infos['level'] == "?" or infos["level"]|int <= 4 %}
                         <i class="fa fa-exclamation-circle text-red-500 py-0.5"
                            aria-hidden="true"
@@ -77,7 +77,7 @@
     </h2>
 </div>
 <div class="max-w-screen-md mx-auto mt-3 mb-3">
-    <div class="flex flex-row">
+    <div class="flex flex-col md:flex-row items-center">
         <div class="px-2 inline-block relative basis-2/3 text-gray-700">
             <label for="search" class="sr-only"> {{ _("Search") }} </label>
 
@@ -93,7 +93,7 @@
                 <i class="fa fa-search" aria-hidden="true"></i>
             </span>
         </div>
-        <div class="basis-1/3">
+        <div class="basis-1/3 px-2 pt-2 md:pt-0 md:px-0">
 
             <select
               name="selectcategory"
@@ -109,7 +109,7 @@
         </div>
     </div>
 
-    <div class="flex flex-row justify-center items-center pt-2 text-center text-sm">
+    <div class="flex flex-col md:flex-row justify-center items-center pt-2 text-center text-sm">
         <div class="inline-block px-2">
             {{ _("Sort by") }} 
             <select
@@ -122,7 +122,7 @@
             <option {% if init_sort == "popularity" %}selected{% endif %} value="popularity">{{ _("Popularity") }}</option>
             </select>
         </div>
-        <div class="inline-block flex items-center px-2 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}"{% endif %}>
+        <div class="inline-block flex items-center px-2 pt-2 md:pt-0 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}"{% endif %}>
             <label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
                 <input type="checkbox" id="starsonly" class="peer sr-only" {% if user and init_starsonly %}checked{% endif %} {% if not user%}disabled{% endif %} />
 
@@ -156,7 +156,7 @@
     </p>
 </div>
 
-<div id="lowQualityAppTitle" class="text-center pt-10">
+<div id="lowQualityAppTitle" class="text-center pt-10 mx-4 md:mx-0">
     <h2 class="text-lg font-bold text-gray-900">
         {{ _("Applications currently flagged as broken") }} 
     </h2>
diff --git a/store/templates/index.html b/store/templates/index.html
index ec4bba32..d5701f08 100644
--- a/store/templates/index.html
+++ b/store/templates/index.html
@@ -9,7 +9,7 @@
 </div>
 
 <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 max-w-screen-lg mx-auto pt-5">
-    <div class="text-center border rounded-lg h-32">
+    <div class="text-center border rounded-lg h-32 mx-3 sm:mx-0">
         <a
             href="{{ url_for('browse_catalog') }}"
             class="h-full relative block overflow-hidden hover:bg-gray-200 pt-12"
@@ -20,7 +20,7 @@
         </a>
     </div>
     {% for id, category in catalog['categories'].items() %}
-    <div class="text-center border rounded-lg h-32">
+    <div class="text-center border rounded-lg h-32 mx-3 sm:mx-0">
         <a
             href="{{ url_for('browse_catalog', category=id) }}"
             class="h-full relative block overflow-hidden hover:bg-gray-200 pt-10"
diff --git a/store/templates/wishlist.html b/store/templates/wishlist.html
index 0483b786..3911e106 100644
--- a/store/templates/wishlist.html
+++ b/store/templates/wishlist.html
@@ -1,14 +1,14 @@
 {% extends "base.html" %}
 {% block main %}
-<div class="text-center max-w-screen-md mx-auto mt-5">
+<div class="text-center max-w-screen-md mx-auto mt-5 mx-2">
     <h2 class="text-2xl font-bold text-gray-900">
         {{ _("Application Wishlist") }}
     </h2>
-    <p class="text-sm text-gray-700 mx-3 mt-2">{{ _("The wishlist is the place where people can collectively suggest and vote for apps that they would like to see packaged and made available in YunoHost's official apps catalog. The fact that apps are listed here should by no mean be interpreted as a fact that YunoHost plans to integrate it, and is merely a source of inspiration for packaging volunteers.") }}</p>
+    <p class="text-sm text-gray-700 mx-10 mt-2">{{ _("The wishlist is the place where people can collectively suggest and vote for apps that they would like to see packaged and made available in YunoHost's official apps catalog. The fact that apps are listed here should by no mean be interpreted as a fact that YunoHost plans to integrate it, and is merely a source of inspiration for packaging volunteers.") }}</p>
 </div>
 
 <div class="max-w-screen-md mx-auto mt-3 mb-3">
-    <div class="flex flex-row">
+    <div class="flex flex-col md:flex-row items-center">
         <div class="px-2 inline-block relative basis-2/3 text-gray-700">
             <label for="search" class="sr-only"> {{ _("Search") }} </label>
 
@@ -24,13 +24,14 @@
             </span>
         </div>
 
+        <div class="my-3 md:my-0">
         <a class="btn btn-primary-outline" href="{{ url_for('add_to_wishlist') }}">
             <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
             {{ _("Suggest an app") }}
         </a>
+        </div>
     </div>
-
-    <div class="flex flex-row justify-center items-center pt-2 text-center text-sm">
+    <div class="flex flex-col md:flex-row justify-center items-center pt-1 text-center text-sm">
         <div class="inline-block px-2">
             {{ _("Sort by") }}
             <select
@@ -42,7 +43,7 @@
             <option {% if init_sort == "popularity" %}selected{% endif %} value="popularity">{{ _("Popularity") }}</option>
             </select>
         </div>
-        <div class="inline-block flex items-center px-2 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}"{% endif %}>
+        <div class="inline-block flex items-center px-2 pt-2 md:pt-0 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}"{% endif %}>
             <label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
                 <input type="checkbox" id="starsonly" class="peer sr-only" {% if user and init_starsonly %}checked{% endif %} {% if not user%}disabled{% endif %} />
 
@@ -62,15 +63,15 @@
   <table class="min-w-full divide-y-2 divide-gray-200 bg-white text-sm">
     <thead>
       <tr>
-        <th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
+        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium text-gray-900">
             {{ _("Name") }}
         </th>
-        <th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900">
+        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium text-gray-900">
             {{ _("Description") }}
         </th>
-        <th class="py-2"></th>
-        <th class="py-2"></th>
-        <th class="whitespace-nowrap px-4 py-2 font-medium text-gray-900 max-w-[5em]">{{ _("Popularity") }}</th>
+        <th class="hidden sm:table-cell py-2"></th>
+        <th class="hidden sm:table-cell py-2"></th>
+        <th class="hidden sm:table-cell whitespace-nowrap px-4 py-2 font-medium text-gray-900 max-w-[5em]">{{ _("Popularity") }}</th>
       </tr>
     </thead>
 
@@ -87,11 +88,11 @@
              data-stars="{{ this_app_stars }}"
              data-starred="{{ user_starred_this_app }}"
         >
-            <td class="px-4 py-2 font-bold text-gray-900 max-w-[10em]">
+            <td class="inline-block sm:table-cell px-4 py-2 font-bold text-gray-900 sm:max-w-[10em]">
                 {{ infos['name'] }}
             </td>
-            <td class="px-4 py-2 text-gray-700 max-w-md">{{ infos['description'] }}</td>
-            <td class="py-2">
+            <td class="block sm:table-cell px-4 py-0 sm:py-2 text-gray-700 max-w-md">{{ infos['description'] }}</td>
+            <td class="float-right sm:float-none sm:table-cell py-2 px-1 sm:px-0">
               {% if infos['website'] %}
               <a
                 title="{{ _('Official website') }}"
@@ -102,7 +103,7 @@
               </a>
               {% endif %}
             </td>
-            <td class="py-2">
+            <td class="float-right sm:float-none sm:table-cell py-2 px-1 sm:px-0">
               {% if infos['upstream'] %}
               <a
                 title="{{ _('Code repository') }}"
@@ -113,7 +114,7 @@
               </a>
               {% endif %}
             </td>
-            <td class="text-center max-w-[5em]">
+            <td class="float-right sm:float-none sm:table-cell py-2 px-1 sm:px-0 text-center max-w-[5em]">
 
                 <a
                   title="{{ _('Star this app') }}"
diff --git a/store/templates/wishlist_add.html b/store/templates/wishlist_add.html
index 120482f4..b005344b 100644
--- a/store/templates/wishlist_add.html
+++ b/store/templates/wishlist_add.html
@@ -1,13 +1,13 @@
 {% extends "base.html" %}
 {% block main %}
-<div class="mt-5 text-center">
+<div class="mt-5 text-center px-3 sm:px-0">
     <h2 class="text-2xl font-bold text-gray-900">
         {{ _("Suggest an application to be added to YunoHost's catalog") }} 
     </h2>
 </div>
 
 
-<div class="overflow-x-auto max-w-md mx-auto pt-5">
+<div class="overflow-x-auto max-w-md mx-auto pt-5 px-3 sm:px-0">
 
     {% if successmsg %}
     <div role="alert" class="rounded-md border-s-4 border-green-500 bg-green-50 p-4 my-5">
@@ -47,7 +47,6 @@
     </div>
     {% endif %}
 
-
     <form method="POST" action="{{ url_for('add_to_wishlist') }}" class="mt-8 mb-8" >
       
       <label for="name" class="mt-5 block font-bold text-gray-700">{{ _("Name") }}</label>