diff options
| author | Frederick Yin <fkfd@fkfd.me> | 2021-10-22 00:03:24 +0800 |
|---|---|---|
| committer | Frederick Yin <fkfd@fkfd.me> | 2021-10-22 00:03:24 +0800 |
| commit | f78c58931ec4e8c10e6f085ee5bea9ff8d4ad58a (patch) | |
| tree | e00b6cca382b031cd8b6d0bfebd8f31b687808ed /jimbrella/templates/admin/index.html | |
| parent | 537d044b73d277c5326d143a55ca57a233786af0 (diff) | |
Mobile view for overdue table
This prevents banner and tile containers from overflowing to the left.
Diffstat (limited to 'jimbrella/templates/admin/index.html')
| -rw-r--r-- | jimbrella/templates/admin/index.html | 55 |
1 files changed, 39 insertions, 16 deletions
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> |