From 27c8be28e00fbf110143d4bc4b949c610f704639 Mon Sep 17 00:00:00 2001 From: Frederick Yin Date: Wed, 20 Oct 2021 15:43:26 +0800 Subject: Update frontend, is more informational and pretty --- jimbrella/static/jimbrella.css | 66 ++++++++++++++++++++++++++---------- jimbrella/templates/admin/index.html | 48 ++++++++++++++++++++++++++ jimbrella/templates/index.html | 26 -------------- 3 files changed, 96 insertions(+), 44 deletions(-) create mode 100644 jimbrella/templates/admin/index.html delete mode 100644 jimbrella/templates/index.html 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 @@ + + + + JI Umbrella + + + + +

JI Umbrella Overview

+
+ + + +
+
+

Lent

+ {{ lent|length }} / {{ umbrellas|length }} +
+
+

Available

+ {{ available|length }} / {{ umbrellas|length }} +
+
+
+ + 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 @@ - - - - JI Umbrella - - - -
-

JI Umbrella Overview

- - - - - - - - - - - - - -
TotalAvailableLentOverdue
{{ total }}{{ available }}{{ lent }}{{ overdue }}
-
- - -- cgit v1.2.3