From 876ac3cf54efd25c26431c83122b860b84243a9e Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Thu, 27 Mar 2025 10:01:17 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E2=80=94=20Better=20mobile=20di?=
 =?UTF-8?q?splay?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                      |  1 +
 argos/server/static/styles.css    |  6 ++--
 argos/server/templates/index.html | 47 +++++++++++++++++++++++++++++--
 3 files changed, 49 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f3b3152..b476b01 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - 🤕 — Fix order of tasks sent to agent
 - ✨ — Add application API (fix #86)
 - ⚡️ — Faster websites configuration reloading (#85)
+- 💄 — Better mobile display
 
 ## 0.9.0
 
diff --git a/argos/server/static/styles.css b/argos/server/static/styles.css
index 870bafb..9a62eb0 100644
--- a/argos/server/static/styles.css
+++ b/argos/server/static/styles.css
@@ -13,7 +13,7 @@
     }
     .display-small article {
         display: inline-block;
-        width: 24%;
+        width: 49%;
     }
 }
 
@@ -60,10 +60,10 @@ label[for="select-status"] {
 .initial-width {
     width: initial !important;
 }
-#refresh-form {
+.refresh-form {
     margin-bottom: 0;
 }
-#refresh-delay {
+.refresh-delay {
     max-width: 120px;
 }
 /* Remove chevron on menu */
diff --git a/argos/server/templates/index.html b/argos/server/templates/index.html
index 87bd07a..e4fccef 100644
--- a/argos/server/templates/index.html
+++ b/argos/server/templates/index.html
@@ -4,7 +4,7 @@
 {% endblock title %}
 {% block content %}
     <div id="domains" class="frame">
-        <nav>
+        <nav class="display-large">
             <ul>
                 <li>
                     <a href="{{ url_for("get_agents_view") }}">
@@ -25,7 +25,7 @@
                     <label class="inline-label">
                         Every
                         <input id="refresh-delay"
-                               class="initial-width"
+                               class="initial-width refresh-delay"
                                name="auto_refresh_seconds"
                                type="number"
                                form="refresh-form"
@@ -36,6 +36,7 @@
                 </li>
                 <li>
                     <form id="refresh-form"
+                          class="refresh-form"
                           method="post"
                           action="{{ url_for("set_refresh_cookies_view") }}">
                         <input type="Submit">
@@ -43,6 +44,48 @@
                 </li>
             </ul>
         </nav>
+        <nav class="display-small">
+            <ul>
+                <li>
+                    <a href="{{ url_for("get_agents_view") }}">
+                        {{ agents | length }} agent{{ 's' if agents | length > 1 }}
+                    </a>
+                </li>
+            </ul>
+            <div>
+                <ul>
+                    <li>
+                        <input id="auto-refresh-sm"
+                               name="auto_refresh_enabled"
+                               type="checkbox"
+                               form="refresh-form-sm"
+                               {{ 'checked' if auto_refresh_enabled }}>
+                        <label for="auto-refresh-sm" class="inline-label">Auto-refresh</label>
+                    </li>
+                    <li>
+                        <label class="inline-label">
+                            Every
+                            <input id="refresh-delay-sm"
+                                   class="initial-width refresh-delay"
+                                   name="auto_refresh_seconds"
+                                   type="number"
+                                   form="refresh-form-sm"
+                                   min="5"
+                                   value="{{ auto_refresh_seconds }}">
+                            seconds
+                        </label>
+                    </li>
+                    <li>
+                        <form id="refresh-form-sm"
+                              method="post"
+                              class="refresh-form"
+                              action="{{ url_for("set_refresh_cookies_view") }}">
+                            <input type="Submit">
+                        </form>
+                    </li>
+                </ul>
+            </div>
+        </nav>
         <div class="container">
             <div class="display-small">
                 <article title="Unknown">