From 58d8bd5df94a6940fee0b772e17f514042805c4f Mon Sep 17 00:00:00 2001 From: Kaitlyn Parkhurst Date: Tue, 6 Sep 2022 20:52:33 -0700 Subject: [PATCH] Templates. --- Web/public/assets/css/dashboard.css | 100 +++++++++++++ Web/public/assets/js/dashboard.js | 7 + Web/templates/layouts/standard.html.ep | 195 +++++++++++++++++++++++++ Web/templates/root/index.html.ep | 10 ++ 4 files changed, 312 insertions(+) create mode 100644 Web/public/assets/css/dashboard.css create mode 100644 Web/public/assets/js/dashboard.js create mode 100644 Web/templates/layouts/standard.html.ep create mode 100644 Web/templates/root/index.html.ep diff --git a/Web/public/assets/css/dashboard.css b/Web/public/assets/css/dashboard.css new file mode 100644 index 0000000..8b0fa72 --- /dev/null +++ b/Web/public/assets/css/dashboard.css @@ -0,0 +1,100 @@ +body { + font-size: .875rem; +} + +.feather { + width: 16px; + height: 16px; + vertical-align: text-bottom; +} + +/* + * Sidebar + */ + +.sidebar { + position: fixed; + top: 0; + /* rtl:raw: + right: 0; + */ + bottom: 0; + /* rtl:remove */ + left: 0; + z-index: 100; /* Behind the navbar */ + padding: 48px 0 0; /* Height of navbar */ + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); +} + +@media (max-width: 767.98px) { + .sidebar { + top: 5rem; + } +} + +.sidebar-sticky { + position: relative; + top: 0; + height: calc(100vh - 48px); + padding-top: .5rem; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ +} + +.sidebar .nav-link { + font-weight: 500; + color: #333; +} + +.sidebar .nav-link .feather { + margin-right: 4px; + color: #727272; +} + +.sidebar .nav-link.active { + color: #007bff; +} + +.sidebar .nav-link:hover .feather, +.sidebar .nav-link.active .feather { + color: inherit; +} + +.sidebar-heading { + font-size: .75rem; + text-transform: uppercase; +} + +/* + * Navbar + */ + +.navbar-brand { + padding-top: .75rem; + padding-bottom: .75rem; + font-size: 1rem; + background-color: rgba(0, 0, 0, .25); + box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25); +} + +.navbar .navbar-toggler { + top: .25rem; + right: 1rem; +} + +.navbar .form-control { + padding: .75rem 1rem; + border-width: 0; + border-radius: 0; +} + +.form-control-dark { + color: #fff; + background-color: rgba(255, 255, 255, .1); + border-color: rgba(255, 255, 255, .1); +} + +.form-control-dark:focus { + border-color: transparent; + box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); +} diff --git a/Web/public/assets/js/dashboard.js b/Web/public/assets/js/dashboard.js new file mode 100644 index 0000000..a3efdbd --- /dev/null +++ b/Web/public/assets/js/dashboard.js @@ -0,0 +1,7 @@ +/* globals Chart:false, feather:false */ + +(function () { + 'use strict' + + feather.replace() +})() diff --git a/Web/templates/layouts/standard.html.ep b/Web/templates/layouts/standard.html.ep new file mode 100644 index 0000000..5129944 --- /dev/null +++ b/Web/templates/layouts/standard.html.ep @@ -0,0 +1,195 @@ + + + + + + TodayChecklist<%= $title ? " - " . $title : "" %> + + + + + + + + + + + + + + + + + + + + + + %#= include '_base/bootstrap-datepicker' + + +
+ WeightGrapher + + % if ( $c->stash->{person} ) { + + % } else { + + % } +
+
+
+ +
+ <%= content %> +
+
+
+
+
+ + + + + + + + diff --git a/Web/templates/root/index.html.ep b/Web/templates/root/index.html.ep new file mode 100644 index 0000000..9d6648d --- /dev/null +++ b/Web/templates/root/index.html.ep @@ -0,0 +1,10 @@ +% layout 'standard', title => 'Homepage', sb_active => 'home'; + +
+
+

Welcome To WeightGrapher

+

+ WeightGrapher gives you the insight to understand how your activity impacts your weight +

+
+