summaryrefslogtreecommitdiff
path: root/src/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/base.hbs155
-rw-r--r--src/templates/index.hbs74
-rw-r--r--src/templates/index.html85
-rw-r--r--src/templates/login.hbs7
-rw-r--r--src/templates/login.html6
-rw-r--r--src/templates/mod.rs25
-rw-r--r--src/templates/suggestions.hbs9
7 files changed, 261 insertions, 100 deletions
diff --git a/src/templates/base.hbs b/src/templates/base.hbs
new file mode 100644
index 0000000..df3ba9d
--- /dev/null
+++ b/src/templates/base.hbs
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <style>
+ :root {
+ --balboa: #195970;
+ }
+
+ body {
+ margin: 0;
+ padding: 0;
+ font-size: 1em;
+ }
+
+ .model::before {
+ content: "⤷";
+ }
+
+ .topbar {
+ background-color: var(--balboa);
+ box-shadow: 0 0 0.5em black;
+ position: relative;
+ height: 3em;
+ z-index: 2;
+ }
+
+ .topbar ul {
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+ }
+
+ .topbar li {
+ float: left;
+ display: block;
+ padding: 14px 14px;
+ }
+
+ .topbar li.right {
+ float: right;
+ }
+
+ .topbar li a {
+ color: white;
+ text-decoration: none;
+ }
+
+ .sidebar {
+ background-color: var(--balboa);
+ box-shadow: inset -0.5em 0 0.5em -0.5em black;
+ z-index: 1;
+ position: fixed;
+ top: 3em;
+ left: 0;
+ width: 20%;
+ height: 100%;
+ transition: 0.25s;
+ }
+
+ .sidebar form {
+ padding: 10px 10px;
+ }
+
+ .sidebar button {
+ font-size: 1em;
+ display: block;
+ background: none;
+ border: 0 none;
+ cursor: pointer;
+ color: white;
+ }
+
+ .model {
+ margin-left: 20px;
+ }
+
+ #hidden:target .sidebar {
+ left: -20%;
+ }
+
+ .menuToggle a.openMenu {
+ display: none;
+ }
+
+ #hidden:target .menuToggle a.closeMenu {
+ display: none;
+ }
+
+ #hidden:target .menuToggle a.openMenu {
+ display: block;
+ }
+
+ #hidden:target section {
+ margin-left: 0;
+ }
+
+ .catalogTable {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .catalogTable td,
+ .catalogTable th {
+ padding: 0.5em;
+ }
+
+ .catalogTable tr:nth-child(even) {
+ background-color: #f2f2f2;
+ }
+
+ .catalogTable tr:hover {
+ background-color: #ddd;
+ }
+
+ .catalogTable th {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ text-align: left;
+ background-color: var(--balboa);
+ color: white;
+ }
+
+ input[type="search"] {
+ width: 100%;
+ }
+
+ section {
+ /* TODO: need to make this not applicable to other templates that don't have sidebar */
+ margin-left: 20%;
+ transition: margin-left 0.25s;
+ padding-top: 2em;
+ padding-left: 2em;
+ padding-right: 2em;
+ }
+ </style>
+</head>
+
+<body id="hidden">
+ <nav class="topbar">
+ <ul>
+ {{~> navItem}}
+ <li><a href="/">Index</a></li>
+ <li><a href="#">Parts</a></li>
+ <li><a href="#">Cars</a></li>
+ <li><a href="#">Suggestions</a></li>
+ <li><a href="#">About</a></li>
+ <li class="right"><a href="/login">Login</a></li>
+ </ul>
+ </nav>
+
+ {{~> body}}
+</body>
+
+</html>
diff --git a/src/templates/index.hbs b/src/templates/index.hbs
new file mode 100644
index 0000000..6bd539b
--- /dev/null
+++ b/src/templates/index.hbs
@@ -0,0 +1,74 @@
+{{#> base}}
+{{#*inline "navItem"}}
+<li>
+ <div class="menuToggle">
+ <a class="openMenu" href="#"><span>
+ <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
+ <path fill="currentColor" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" />
+ </svg>
+ </span></a>
+ <a class="closeMenu" href="#hidden"><span>
+ <svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
+ <path fill="currentColor"
+ d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" />
+ </svg>
+ </span></a>
+ </div>
+</li>
+{{/inline}}
+{{#*inline "body"}}
+<nav class="sidebar">
+ {{#each makes}}
+ <form action="/">
+ {{#if (eq this ../selected_make)}}
+ <button disabled class="make">
+ {{ this }}
+ </button>
+ <input type="hidden" name="make" value="{{ ../selected_make }}" />
+ {{#each ../models}}
+ {{#if (eq this ../../selected_model)}}
+ <button disabled class="model">{{~ this ~}}</button>
+ {{else}}
+ <button class="model" name="model" value="{{ this }}">
+ {{~ this ~}}
+ </button>
+ {{/if}}
+ {{else}}
+ <button disabled class="model">(No models found)</button>
+ {{/each}}
+ {{else}}
+ <button class="make" name="make" value="{{ this }}">
+ {{~ this ~}}
+ </button>
+ {{/if}}
+ </form>
+ {{else}}
+ <button disabled class="make">(No makes found)</button>
+ {{/each}}
+</nav>
+
+<section>
+ <form>
+ {{#if selected_make}}
+ <input type="hidden" name="make" value="{{ selected_make }}" />
+ {{/if}}
+ {{#if selected_model}}
+ <input type="hidden" name="model" value="{{ selected_model }}" />
+ {{/if}}
+ <input autofocus type="search" name="search" placeholder="hit enter to search" />
+ </form>
+</section>
+
+<section>
+ <table class="catalogTable">
+ <tbody>
+ {{#each parts}}
+ <tr>
+ <td>{{ this }}</td>
+ </tr>
+ {{/each}}
+ </tbody>
+ </table>
+</section>
+{{/inline}}
+{{/base}}
diff --git a/src/templates/index.html b/src/templates/index.html
deleted file mode 100644
index 4663f5d..0000000
--- a/src/templates/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta charset="UTF-8" />
-
- <style>
- .make {
- display: block;
- background: none;
- border: 0 none;
- cursor: pointer;
- }
-
- .model {
- display: block;
- background: none;
- border: 0 none;
- cursor: pointer;
- margin-left: 20px;
- }
-
- .sidebar {
- width: 300px;
- height: 100%;
- position: fixed;
- z-index: 1;
- }
-
- .main {
- margin-left: 300px;
- height: 100%;
- }
- </style>
- </head>
- <body>
- <div class="sidebar">
- <h1>Parts Catalog</h1>
- {{#each makes}}
- <form action="/parts">
- {{#if (eq this ../selected_make)}}
- <button disabled class="make">
- {{ this }}
- </button>
- <input type="hidden" name="make" value="{{ ../selected_make }}" />
- {{#each ../models}}
- {{#if (eq this ../../selected_model)}}
- <button disabled class="model">{{ this }}</button>
- {{else}}
- <button class="model" name="model" value="{{ this }}">
- {{ this }}
- </button>
- {{/if}}
- {{else}}
- <button disabled class="model">(No models found)</button>
- {{/each}}
- {{else}}
- <button class="make" name="make" value="{{ this }}">{{ this }}</button>
- {{/if}}
- </form>
- {{else}}
- No makes found.
- {{/each}}
- </div>
-
- <div class="main">
- <form action="/parts">
- <input type="hidden" name="make" value="{{ selected_make }}" />
- <input type="hidden" name="model" value="{{ selected_model }}" />
- <input
- type="search"
- name="search"
- placeholder="Part #, Name, Source, etc."
- />
- <button>Search</button>
- </form>
- <table>
- {{#each parts}}
- <tr>
- <td>{{ this }}</td>
- </tr>
- {{/each}}
- </table>
- </div>
- </body>
-</html>
diff --git a/src/templates/login.hbs b/src/templates/login.hbs
new file mode 100644
index 0000000..84b354b
--- /dev/null
+++ b/src/templates/login.hbs
@@ -0,0 +1,7 @@
+{{#> base}}
+{{#*inline "body"}}
+<body>
+ <a href="/login/google">Login with Google</a>
+</body>
+{{/inline}}
+{{/base}}
diff --git a/src/templates/login.html b/src/templates/login.html
deleted file mode 100644
index 9329a22..0000000
--- a/src/templates/login.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<!DOCTYPE html>
-<html>
- <body>
- <a href="/login/google">Login with Google</a>
- </body>
-</html>
diff --git a/src/templates/mod.rs b/src/templates/mod.rs
index 3a6eb2b..534ada0 100644
--- a/src/templates/mod.rs
+++ b/src/templates/mod.rs
@@ -1,9 +1,16 @@
-pub static INDEX_T: &str = include_str!("index.html");
-pub static LOGIN_T: &str = include_str!("login.html");
-pub const CATALOG_L: &str = "/#menu";
-pub const PARTS_L: &str = "/parts";
-pub const PARTS_CSV_L: &str = "/parts.csv";
-pub const CARS_L: &str = "/cars";
-pub const CARS_CSV_L: &str = "/cars.csv";
-pub const SUGGESTIONS_L: &str = "/suggestions";
-pub const LOGIN_L: &str = "/login";
+use handlebars::Handlebars;
+use once_cell::sync::Lazy;
+
+pub static REGISTRY: Lazy<Handlebars> = Lazy::new(|| {
+ let mut handlebars = Handlebars::new();
+ handlebars
+ .register_template_string("index", include_str!("index.hbs"))
+ .unwrap();
+ handlebars
+ .register_template_string("login", include_str!("login.hbs"))
+ .unwrap();
+ handlebars
+ .register_template_string("base", include_str!("base.hbs"))
+ .unwrap();
+ handlebars
+});
diff --git a/src/templates/suggestions.hbs b/src/templates/suggestions.hbs
new file mode 100644
index 0000000..f979be7
--- /dev/null
+++ b/src/templates/suggestions.hbs
@@ -0,0 +1,9 @@
+{{#> base}}
+{{#*inline "body"}}
+<section>
+ <form>
+ <!-- input for new car or part -->
+ </form>
+</section>
+{{/inline}}
+{{/base}}