diff options
Diffstat (limited to 'src/templates')
| -rw-r--r-- | src/templates/base.hbs | 155 | ||||
| -rw-r--r-- | src/templates/index.hbs | 74 | ||||
| -rw-r--r-- | src/templates/index.html | 85 | ||||
| -rw-r--r-- | src/templates/login.hbs | 7 | ||||
| -rw-r--r-- | src/templates/login.html | 6 | ||||
| -rw-r--r-- | src/templates/mod.rs | 25 | ||||
| -rw-r--r-- | src/templates/suggestions.hbs | 9 |
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}} |