diff options
| -rw-r--r-- | src/templates/base.hbs | 148 | ||||
| -rw-r--r-- | src/templates/index.hbs | 81 |
2 files changed, 112 insertions, 117 deletions
diff --git a/src/templates/base.hbs b/src/templates/base.hbs index df3ba9d..d80124b 100644 --- a/src/templates/base.hbs +++ b/src/templates/base.hbs @@ -7,62 +7,47 @@ --balboa: #195970; } - body { + html, + body, + main { margin: 0; padding: 0; + } + + body { font-size: 1em; } - .model::before { - content: "⤷"; + nav, + main, + aside { + display: flex; + flex-direction: column; } - .topbar { + nav { 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 { + nav a { + padding: 1em 1em; color: white; + text-align: center; text-decoration: none; } - .sidebar { - background-color: var(--balboa); - box-shadow: inset -0.5em 0 0.5em -0.5em black; + aside { + flex-grow: 1; z-index: 1; - position: fixed; - top: 3em; - left: 0; - width: 20%; + flex-direction: column; height: 100%; - transition: 0.25s; - } - - .sidebar form { - padding: 10px 10px; + background-color: var(--balboa); + padding: 0.5em; } - .sidebar button { + aside button { font-size: 1em; display: block; background: none; @@ -71,85 +56,98 @@ color: white; } - .model { - margin-left: 20px; + aside button.model::before { + content: "⤷"; } - #hidden:target .sidebar { - left: -20%; + article { + flex-grow: 3; + padding: 0.5em; } - .menuToggle a.openMenu { + #hidden:target aside { display: none; } - #hidden:target .menuToggle a.closeMenu { + #hidden:target a.openMenu { + display: block; + } + + a.openMenu { display: none; } - #hidden:target .menuToggle a.openMenu { - display: block; + #hidden:target a.closeMenu { + display: none; } - #hidden:target section { - margin-left: 0; + input[type="search"] { + width: 100%; } - .catalogTable { + section { + padding-top: 2em; + } + + table { width: 100%; border-collapse: collapse; } - .catalogTable td, - .catalogTable th { + td, + th { padding: 0.5em; } - .catalogTable tr:nth-child(even) { + tr:nth-child(even) { background-color: #f2f2f2; } - .catalogTable tr:hover { + tr:hover { background-color: #ddd; } - .catalogTable th { - padding-top: 12px; - padding-bottom: 12px; + th { + padding-top: 0.25em; + padding-bottom: 0.25em; text-align: left; background-color: var(--balboa); color: white; } - input[type="search"] { - width: 100%; - } + @media only screen and (min-width: 700px) { - 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; + nav, + main { + flex-direction: row; + } + + aside { + box-shadow: inset -0.5em 0.5em 0.5em -0.5em black; + } + + html, + body, + main { + height: 100%; + } } </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> + <a href="/">Index</a> + <a href="#">Parts</a> + <a href="#">Cars</a> + <a href="#">Suggestions</a> + <a href="#">About</a> + <a href="/login">Login</a> </nav> - {{~> body}} + <main> + {{~> main}} + </main> </body> </html> diff --git a/src/templates/index.hbs b/src/templates/index.hbs index 6bd539b..e948d53 100644 --- a/src/templates/index.hbs +++ b/src/templates/index.hbs @@ -1,23 +1,6 @@ {{#> 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"> +{{#*inline "main"}} +<aside> {{#each makes}} <form action="/"> {{#if (eq this ../selected_make)}} @@ -45,30 +28,44 @@ {{else}} <button disabled class="make">(No makes found)</button> {{/each}} -</nav> +</aside> -<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> +<article> + <a class="openMenu" href="#"> + <svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> + <path fill="#195970" d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z" /> + </svg> + </a> + <a class="closeMenu" href="#hidden"> + <svg style="width: 24px; height: 24px" viewBox="0 0 24 24"> + <path fill="#195970" + d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z" /> + </svg> + </a> + + <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="press enter key to search" /> + </form> + </section> -<section> - <table class="catalogTable"> - <tbody> - {{#each parts}} - <tr> - <td>{{ this }}</td> - </tr> - {{/each}} - </tbody> - </table> -</section> + <section> + <table> + <tbody> + {{#each parts}} + <tr> + <td>{{ this }}</td> + </tr> + {{/each}} + </tbody> + </table> + </section> +</article> {{/inline}} {{/base}} |