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/templates/admin/index.html | 55 +++++++++++++++++++++++++-----------
 1 file changed, 39 insertions(+), 16 deletions(-)

(limited to 'jimbrella/templates/admin')

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>
-- 
cgit v1.2.3