From 89f4590fb7bda6ceb8470416640006ee17e3cf0b Mon Sep 17 00:00:00 2001
From: Luc Didry <luc@didry.org>
Date: Tue, 24 Sep 2024 10:58:58 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20=E2=80=94=20Correctly=20show=20r?=
 =?UTF-8?q?esults=20on=20small=20screens?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                      |  2 ++
 argos/server/static/styles.css    | 17 +++++++++++++++++
 argos/server/templates/index.html | 24 +++++++++++++++++++++++-
 3 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da118ed..c6fa32b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+- 💄 — Correctly show results on small screens
+
 ## 0.4.1
 
 Date: 2024-09-18
diff --git a/argos/server/static/styles.css b/argos/server/static/styles.css
index 6b03c9e..870bafb 100644
--- a/argos/server/static/styles.css
+++ b/argos/server/static/styles.css
@@ -1,5 +1,22 @@
 @import url("pico.min.css");
 
+.display-small {
+    display: none;
+    text-align: center;
+}
+@media (max-width: 767px) {
+    .display-large {
+        display: none !important;
+    }
+    .display-small {
+        display: block;
+    }
+    .display-small article {
+        display: inline-block;
+        width: 24%;
+    }
+}
+
 code {
     white-space: pre-wrap;
 }
diff --git a/argos/server/templates/index.html b/argos/server/templates/index.html
index 455697d..87bd07a 100644
--- a/argos/server/templates/index.html
+++ b/argos/server/templates/index.html
@@ -44,7 +44,29 @@
             </ul>
         </nav>
         <div class="container">
-            <div class="grid grid-index">
+            <div class="display-small">
+                <article title="Unknown">
+                    ❔
+                    <br>
+                    {{ counts_dict['unknown'] }}
+                </article>
+                <article title="OK">
+                    ✅
+                    <br>
+                    {{ counts_dict['ok'] }}
+                </article>
+                <article title="Warning">
+                    ⚠️
+                    <br>
+                    {{ counts_dict['warning'] }}
+                </article>
+                <article title="Critical">
+                    ❌
+                    <br>
+                    {{ counts_dict['critical'] }}
+                </article>
+            </div>
+            <div class="grid grid-index display-large">
                 <article>
                     <header title="Unknown">
                         ❔