summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAdam T. Carpenter <atc@53hor.net>2021-05-04 21:52:43 -0400
committerAdam T. Carpenter <atc@53hor.net>2021-05-04 21:52:43 -0400
commitd31c954d94ffe9bb70c6532469e01dc8e83dee97 (patch)
tree15309a4a5b2406f9de888f83520269e72b69ba22
parent72ce821e633b57da9cba0e868940cdbd1f630f85 (diff)
downloadtwinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.tar.xz
twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.zip
fixed templates to use flexbox and default to mobile view
-rw-r--r--src/templates/base.hbs148
-rw-r--r--src/templates/index.hbs81
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}}