fixed templates to use flexbox and default to mobile view

author: Adam T. Carpenter <atc@53hor.net> 2021-05-04 21:52:43 -0400
committer: Adam T. Carpenter <atc@53hor.net> 2021-05-04 21:52:43 -0400
commit: d31c954d94ffe9bb70c6532469e01dc8e83dee97 (patch)
tree: 15309a4a5b2406f9de888f83520269e72b69ba22 /src
parent: 72ce821e633b57da9cba0e868940cdbd1f630f85 (diff)
download: twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.tar.xz
twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.zip
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}}
author	Adam T. Carpenter <atc@53hor.net>	2021-05-04 21:52:43 -0400
committer	Adam T. Carpenter <atc@53hor.net>	2021-05-04 21:52:43 -0400
commit	d31c954d94ffe9bb70c6532469e01dc8e83dee97 (patch)
tree	15309a4a5b2406f9de888f83520269e72b69ba22 /src
parent	72ce821e633b57da9cba0e868940cdbd1f630f85 (diff)
download	twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.tar.xz twinh-d31c954d94ffe9bb70c6532469e01dc8e83dee97.zip