appstore: much responsiveness

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>