diff options
| author | Frederick Yin <fkfd@fkfd.me> | 2021-10-20 17:10:19 +0800 |
|---|---|---|
| committer | Frederick Yin <fkfd@fkfd.me> | 2021-10-20 17:10:19 +0800 |
| commit | f53b65c14a92562309ced75a24371b577f9d8ef1 (patch) | |
| tree | 083d00c7a36c40efc832035e7bf9d10454db713b /jimbrella | |
| parent | a2c80e9a02430be73962f4ca83b49e5f80fd3594 (diff) | |
Frontend updates
I forgot what I exactly did
Diffstat (limited to 'jimbrella')
| -rw-r--r-- | jimbrella/static/jimbrella.css | 9 | ||||
| -rw-r--r-- | jimbrella/templates/admin/index.html | 20 | ||||
| -rw-r--r-- | jimbrella/templates/admin/tabs.html | 8 | ||||
| -rw-r--r-- | jimbrella/templates/admin/umbrellas.html | 57 |
4 files changed, 57 insertions, 37 deletions
diff --git a/jimbrella/static/jimbrella.css b/jimbrella/static/jimbrella.css index 8bb7fbd..8e629ef 100644 --- a/jimbrella/static/jimbrella.css +++ b/jimbrella/static/jimbrella.css @@ -11,6 +11,10 @@ body { max-width: 1200px; } +td.tab { + border: none; +} + .banner-container { padding: 1em; } @@ -40,6 +44,7 @@ h2.tile-heading, h2.banner-heading { table.data { border: 2px solid; + margin: 1em; } td { @@ -59,6 +64,10 @@ td { background-color: #d3e99f; } +.proportion { + display: inline; +} + .big { font-size: 3em; } diff --git a/jimbrella/templates/admin/index.html b/jimbrella/templates/admin/index.html index ddbe4e5..1330e4b 100644 --- a/jimbrella/templates/admin/index.html +++ b/jimbrella/templates/admin/index.html @@ -8,19 +8,15 @@ <body> <h1>JI Umbrella Overview</h1> <div id="container"> - <header> - <table class="tabs"> - <tr> - <td><a href="/admin">Overview</a></td> - <td><a href="/admin/umbrellas">All</a></td> - </tr> - </table> - </header> + {% include "admin/tabs.html" %} <!--Takes up full width of container--> <div class="banner-container"> {% if overdue %} <div class="banner overdue"> <h2 class="banner-heading">Overdue</h2> + <span class="proportion"> + <strong class="big">{{ overdue|length }}</strong> / {{ umbrellas|length }} + </span> <table class="data"> <tr> <td>#</td> @@ -44,11 +40,15 @@ <div class="tile-container"> <div class="tile lent"> <h2 class="tile-heading">Lent</h2> - <strong class="big">{{ lent|length }}</strong> / {{ umbrellas|length }} + <span class="proportion"> + <strong class="big">{{ lent|length }}</strong> / {{ umbrellas|length }} + </span> </div> <div class="tile available"> <h2 class="tile-heading">Available</h2> - <strong class="big">{{ available|length }}</strong> / {{ umbrellas|length }} + <span class="proportion"> + <strong class="big">{{ available|length }}</strong> / {{ umbrellas|length }} + </span> </div> </div> </div> diff --git a/jimbrella/templates/admin/tabs.html b/jimbrella/templates/admin/tabs.html new file mode 100644 index 0000000..2b22c30 --- /dev/null +++ b/jimbrella/templates/admin/tabs.html @@ -0,0 +1,8 @@ +<header> + <table class="tabs"> + <tr> + <td class="tab"><a href="/admin">Overview</a></td> + <td class="tab"><a href="/admin/umbrellas">All</a></td> + </tr> + </table> +</header> diff --git a/jimbrella/templates/admin/umbrellas.html b/jimbrella/templates/admin/umbrellas.html index c64111e..56a5dde 100644 --- a/jimbrella/templates/admin/umbrellas.html +++ b/jimbrella/templates/admin/umbrellas.html @@ -8,33 +8,36 @@ <body> <h1>All Umbrellas</h1> <div id="container"> - <table class="data"> - <thead> - <tr> - <th>#</th> - <th>Status</th> - <th>Tenant</th> - <th>ID</th> - <th>Phone</th> - <th colspan=2>Lent at</th> - </tr> - </thead> - <tbody> - {% for umb in umbrellas %} - <tr class="{{ umb.status }}"> - <td>{{ umb.serial }}</td> - <td>{{ umb.status }}</td> - <td>{{ umb.tenant_name }}</td> - <td>{{ umb.tenant_id }}</td> - <td>{{ umb.tenant_phone }}</td> - <td>{{ umb.lent_at_str }}</td> - <td>{{ umb.lent_time_ago_str }} - {% if umb.status == "lent" %} ago {% endif %} - </td> - </tr> - {% endfor %} - </tbody> - </table> + {% include "admin/tabs.html" %} + <div class="data-table-container"> + <table class="data"> + <thead> + <tr> + <th>#</th> + <th>Status</th> + <th>Tenant</th> + <th>ID</th> + <th>Phone</th> + <th colspan=2>Lent at</th> + </tr> + </thead> + <tbody> + {% for umb in umbrellas %} + <tr class="{{ umb.status }}"> + <td>{{ umb.serial }}</td> + <td>{{ umb.status }}</td> + <td>{{ umb.tenant_name }}</td> + <td>{{ umb.tenant_id }}</td> + <td>{{ umb.tenant_phone }}</td> + <td>{{ umb.lent_at_str }}</td> + <td>{{ umb.lent_time_ago_str }} + {% if umb.status in ["lent", "overdue"] %} ago {% endif %} + </td> + </tr> + {% endfor %} + </tbody> + </table> + </div> </div> </body> </html> |