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 | |
| parent | 537d044b73d277c5326d143a55ca57a233786af0 (diff) | |
Mobile view for overdue table
This prevents banner and tile containers from overflowing to the left.
Diffstat (limited to 'jimbrella')
| -rw-r--r-- | jimbrella/static/jimbrella.css | 10 | ||||
| -rw-r--r-- | jimbrella/templates/admin/index.html | 55 | ||||
| -rw-r--r-- | jimbrella/web.py | 1 |
3 files changed, 49 insertions, 17 deletions
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, ) |