jQuery and nav tweaks

parkerbossier · May 21, 2017 · 870eb1b · 870eb1b
1 parent 9206682
commit 870eb1b
Show file tree

Hide file tree

Showing 9 changed files with 212 additions and 14 deletions.
diff --git a/app/App.less b/app/App.less
@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
+@import (reference) './definitions.less';
+@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700');
 
 * {
 	box-sizing: content-box;
@@ -11,17 +12,62 @@ body {
 	align-items: center;
 	justify-content: center;
 	font-family: 'Ubuntu Mono', monospace;
-	font-size: 14px;
+	font-size: 16px;
 	background: url('/img/mars.jpg');
 	background-size: cover;
 	background-repeat: no-repeat;
 }
 
+.Nav {
+	position: fixed;
+	top: 50px;
+	left: 50px;
+	background: fade(black, 50%);
+	padding: 30px;
+	color: @colorWhite;
+
+	li {
+		&:before {
+			content: '> ';
+		}
+	}
+	li + li {
+		margin-top: @gutterSmall;
+	}
+	label {
+		cursor: pointer;
+	}
+	input {
+		display: none;
+	}
+	input:checked + span {
+		font-weight: bold;
+	}
+
+	&:before,
+	&:after {
+		content: '';
+		position: absolute;
+		height: 10px;
+		left: -2px;
+		right: -2px;
+		border: 2px solid white;
+	}
+	&:before {
+		top: -2px;
+		border-bottom: none;
+	}
+	&:after {
+		bottom: -2px;
+		border-top: none;
+	}
+}
+
 .ComingSoon {
 	position: relative;
 	background: fade(black, 50%);
 	padding: 30px;
-	color: white;
+	color: @colorWhite;
 
 	&:before,
 	&:after {

diff --git a/app/App.ts b/app/App.ts
@@ -1,10 +1,7 @@
 import './reset.less';
-import './App.less';
 
-class Thing {
-	constructor() {
-		console.log('thing created', this);
-	}
-}
+import { Nav } from './Nav';
+
+import './App.less';
 
-const a = new Thing();
+new Nav($('.Nav'));
diff --git a/app/Nav.less b/app/Nav.less
@@ -0,0 +1,93 @@
+@import (reference) './definitions.less';
+
+.Nav {
+	position: fixed;
+	top: 50px;
+	left: 50px;
+	background: fade(black, 50%);
+	padding: 14px 30px;
+	color: @colorWhite;
+
+	ul {
+		transition: opacity .2s ease, max-height .2s ease;
+		max-height: 150px;
+	}
+	li {
+		&:before {
+			content: '> ';
+		}
+	}
+	li + li {
+		margin-top: @gutterSmall;
+	}
+	label {
+		cursor: pointer;
+		margin-right: 1em;
+	}
+	input[type=radio] {
+		display: none;
+	}
+	&-text {
+
+	}
+	input:checked + &-text {
+		font-weight: bold;
+
+		&:after {
+			content: ' <';
+			position: absolute;
+			margin-left: .5em;
+			pointer-events: none;
+		}
+	}
+
+	/* top/bottom bars */
+	&:before,
+	&:after {
+		content: '';
+		position: absolute;
+		height: 10px;
+		left: -2px;
+		right: -2px;
+		border: 2px solid white;
+	}
+	&:before {
+		top: -2px;
+		border-bottom: none;
+	}
+	&:after {
+		bottom: -2px;
+		border-top: none;
+	}
+
+	/* open/close */
+	&-toggle {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 15px;
+		height: 15px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 1px solid @colorWhite;
+		background: none;
+		color: @colorWhite;
+		font-size: 16px;
+		cursor: pointer;
+	}
+	&-toggleContent:before {
+		content: '-';
+	}
+
+	/* collapsed */
+	&--collapsed {
+		ul {
+			max-height: 0;
+			opacity: 0;
+		}
+	}
+	&--collapsed &-toggleContent:before {
+		content: '+';
+	}
+}
diff --git a/app/Nav.ts b/app/Nav.ts
@@ -0,0 +1,16 @@
+import './Nav.less';
+
+export class Nav {
+	constructor(private element: JQuery) {
+		// on change
+		element.find('input[type=radio]').on('change', e => {
+			const input = e.currentTarget as HTMLInputElement;
+			window.location.hash = input.value;
+		});
+
+		// toggle
+		element.find('.Nav-toggle').click(e => {
+			element.toggleClass('Nav--collapsed');
+		});
+	}
+}
diff --git a/app/definitions.less b/app/definitions.less
@@ -0,0 +1,3 @@
+@colorWhite: white;
+@gutter: 16px;
+@gutterSmall: 8px;
diff --git a/index.d.ts b/index.d.ts
@@ -0,0 +1 @@
+declare var $: JQueryStatic;
diff --git a/index.html b/index.html
@@ -9,11 +9,49 @@
 </head>
 
 <body>
-	<div class="ComingSoon">
-		Assembling launch vehicle
-	</div>
+	<nav class="Nav">
+		<ul>
+			<li>
+				<label>
+					<input checked name="nav" type="radio" value="flightplan" />
+					<span class="Nav-text">Flightplan</span>
+				</label>
+			</li>
+			<li>
+				<label>
+					<input name="nav" type="radio" value="zazzle" />
+					<span class="Nav-text">Zazzle</span>
+				</label>
+			</li>
+			<li>
+				<label>
+					<input name="nav" type="radio" value="secondary" />
+					<span class="Nav-text">Secondary missions</span>
+				</label>
+			</li>
+			<li>
+				<label>
+					<input name="nav" type="radio" value="resume" />
+					<span class="Nav-text">Resume</span>
+				</label>
+			</li>
+			<li>
+				<label>
+					<input name="nav" type="radio" value="contact" />
+					<span class="Nav-text">Contact</span>
+				</label>
+			</li>
+		</ul>
 
-	<script async src="/app.js"></script>
+		<!--
+		<div class="Nav-toggle">
+			<span class="Nav-toggleContent"></span>
+		</div>
+		-->
+	</nav>
+
+	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+	<script src="/app.js"></script>
 </body>
 
 </html>
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "start": "webpack-dev-server"
   },
   "dependencies": {
+    "@types/jquery": "^2.0.45",
     "autoprefixer": "^7.1.1",
     "awesome-typescript-loader": "^3.1.3",
     "css-loader": "^0.28.1",

diff --git a/tsconfig.json b/tsconfig.json
@@ -10,5 +10,8 @@
 	},
 	"exclude": [
 		"node_modules"
+	],
+	"files": [
+		"index.d.ts"
 	]
 }