From f78c58931ec4e8c10e6f085ee5bea9ff8d4ad58a Mon Sep 17 00:00:00 2001
From: Frederick Yin <fkfd@fkfd.me>
Date: Fri, 22 Oct 2021 00:03:24 +0800
Subject: Mobile view for overdue table

This prevents banner and tile containers from overflowing to the left.
---
 jimbrella/static/jimbrella.css       | 10 ++++++-
 jimbrella/templates/admin/index.html | 55 +++++++++++++++++++++++++-----------
 jimbrella/web.py                     |  1 +
 3 files changed, 49 insertions(+), 17 deletions(-)

(limited to 'jimbrella')

diff --git a/jimbrella/static/jimbrella.css b/jimbrella/static/jimbrella.css
index 8e629ef..dcadf42 100644
--- a/jimbrella/static/jimbrella.css
+++ b/jimbrella/static/jimbrella.css
@@ -4,6 +4,7 @@ body {
     display: grid;
     align-items: center;
     justify-content: center;
+    overflow-x: auto;
 }
 
 #container {
@@ -25,6 +26,10 @@ td.tab {
     display: grid;
 }
 
+.table-container {
+    overflow-x: auto;
+}
+
 .tile-container {
     display: flex;
     flex-wrap: wrap;
@@ -48,7 +53,6 @@ table.data {
 }
 
 td {
-    border: 1px solid;
     padding: 1em;
 }
 
@@ -71,3 +75,7 @@ td {
 .big {
     font-size: 3em;
 }
+
+.far {
+    padding: 0.2em;
+}
diff --git a/jimbrella/templates/admin/index.html b/jimbrella/templates/admin/index.html
index 1330e4b..940f2c2 100644
--- a/jimbrella/templates/admin/index.html
+++ b/jimbrella/templates/admin/index.html
@@ -17,22 +17,45 @@
                         <span class="proportion">
                             <strong class="big">{{ overdue|length }}</strong> / {{ umbrellas|length }}
                         </span>
-                        <table class="data">
-                            <tr>
-                                <td>#</td>
-                                <td>Tenant</td>
-                                <td>Phone</td>
-                                <td>Lent</td>
-                            </tr>
-                        {% for umb in overdue %}
-                            <tr>
-                                <td>{{ umb.serial }}</td>
-                                <td>{{ umb.tenant_name }}</td>
-                                <td>{{ umb.tenant_phone }}</td>
-                                <td>{{ umb.lent_time_ago_str }} ago</td>
-                            </tr>
-                        {% endfor %}
-                        </table>
+                        <div class="table-container">
+                        {% if mobile %}
+                            <table class="data">
+                                {% for umb in overdue %}
+                                <tr class="{{ umb.status }}">
+                                    <th class="big far" rowspan=4>#{{ umb.serial }}</th>
+                                    <td>{{ umb.tenant_name }}</td>
+                                </tr>
+                                <tr class="{{ umb.status }}"><td>{{ umb.tenant_phone }}</td></tr>
+                                <tr class="{{ umb.status }}"><td>{{ umb.lent_at_str }}</td></tr>
+                                <tr class="{{ umb.status }}"><td>
+                                    {{ umb.lent_time_ago_str }}
+                                    {% if umb.status in ["lent", "overdue"] %} ago {% endif %}
+                                </td></tr>
+                                {% endfor %}
+                            </table>
+                        {% else %}
+                            <table class="data">
+                                <thead>
+                                    <tr>
+                                        <th>#</th>
+                                        <th>Tenant</th>
+                                        <th>Phone</th>
+                                        <th>Lent</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                {% for umb in overdue %}
+                                    <tr>
+                                        <td>{{ umb.serial }}</td>
+                                        <td>{{ umb.tenant_name }}</td>
+                                        <td>{{ umb.tenant_phone }}</td>
+                                        <td>{{ umb.lent_time_ago_str }} ago</td>
+                                    </tr>
+                                {% endfor %}
+                                </tbody>
+                            </table>
+                        {% endif %}
+                        </div>
                     </div>
                 {% endif %}
             </div>
diff --git a/jimbrella/web.py b/jimbrella/web.py
index 0b32ce0..4237055 100644
--- a/jimbrella/web.py
+++ b/jimbrella/web.py
@@ -18,6 +18,7 @@ def admin_index():
         available=statuses["available"],
         lent=statuses["lent"],
         overdue=statuses["overdue"],
+        mobile=user_agent(request.user_agent.string).is_mobile,
     )
 
 
-- 
cgit v1.2.3