diff options
| -rw-r--r-- | jimbrella/static/jimbrella.css | 66 | ||||
| -rw-r--r-- | jimbrella/templates/admin/index.html | 48 | ||||
| -rw-r--r-- | jimbrella/templates/index.html | 26 |
3 files changed, 96 insertions, 44 deletions
diff --git a/jimbrella/static/jimbrella.css b/jimbrella/static/jimbrella.css index 5328f48..f9ef7ae 100644 --- a/jimbrella/static/jimbrella.css +++ b/jimbrella/static/jimbrella.css @@ -1,34 +1,64 @@ +body { + font-family: sans-serif; + text-align: center; + display: grid; + align-items: center; + justify-content: center; +} + #container { position: relative; + max-width: 1200px; } -/* Desktop */ -@media(min-width: 1081px) { - #container { - width: 60%; - left: 20%; - } +.banner-container { + padding: 1em; } -/* Mobile compatibility */ -@media (max-width: 1080px) { - #container { - padding: 1em; - } +.banner { + padding: 2em; + margin: 1em; + display: grid; } -body { - font-family: sans-serif; +.tile-container { + display: flex; + flex-wrap: wrap; + padding: 1em; +} + +.tile { + padding: 2em; + margin: 1em; + flex: 1 1 8em; +} + +h2.tile-heading, h2.banner-heading { + margin-top: 0; + margin-bottom: 2em; } -table.overview { +table { border: 2px solid; - text-align: center; } td { border: 1px solid; - padding-top: 1em; - padding-bottom: 1em; - width: 6em; + padding: 1em; +} + +.overdue { + background-color: #e99fd3; +} + +.lent { + background-color: #9fd3e9; +} + +.available { + background-color: #d3e99f; +} + +.big { + font-size: 3em; } diff --git a/jimbrella/templates/admin/index.html b/jimbrella/templates/admin/index.html new file mode 100644 index 0000000..7a62a14 --- /dev/null +++ b/jimbrella/templates/admin/index.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> + <head> + <title>JI Umbrella</title> + <link rel="stylesheet" href="static/jimbrella.css" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + </head> + <body> + <h1>JI Umbrella Overview</h1> + <div id="container"> + <!--Takes up full width of container--> + <div class="banner-container"> + {% if overdue %} + <div class="banner overdue"> + <h2 class="banner-heading">Overdue</h2> + <table> + <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> + {% endif %} + </div> + <!--Tiles displaying minimal data--> + <div class="tile-container"> + <div class="tile lent"> + <h2 class="tile-heading">Lent</h2> + <strong class="big">{{ lent|length }}</strong> / {{ umbrellas|length }} + </div> + <div class="tile available"> + <h2 class="tile-heading">Available</h2> + <strong class="big">{{ available|length }}</strong> / {{ umbrellas|length }} + </div> + </div> + </div> + </body> +</html> diff --git a/jimbrella/templates/index.html b/jimbrella/templates/index.html deleted file mode 100644 index 00036fc..0000000 --- a/jimbrella/templates/index.html +++ /dev/null @@ -1,26 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <title>JI Umbrella</title> - <link rel="stylesheet" href="static/jimbrella.css" /> - </head> - <body> - <div id="container"> - <h1>JI Umbrella Overview</h1> - <table class="overview"> - <tr> - <td>Total</td> - <td>Available</td> - <td>Lent</td> - <td>Overdue</td> - </tr> - <tr> - <td>{{ total }}</td> - <td>{{ available }}</td> - <td>{{ lent }}</td> - <td>{{ overdue }}</td> - </tr> - </table> - </div> - </body> -</html> |