From 7a9a95bc0884c96cc8648863f64855bb7f1796d3 Mon Sep 17 00:00:00 2001
From: Timothy Warren <twarren@nabancard.com>
Date: Tue, 3 Apr 2018 16:52:58 -0400
Subject: [PATCH] Use custom container component

---
 package.json                | 1 +
 public/css/app.css          | 6 +++++-
 public/js/customElements.js | 2 ++
 src/App.js                  | 7 +++----
 yarn.lock                   | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 46a6af2..e55fc6f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "inferno-bootstrap": "^5.0.0",
     "inferno-router": "^5.0.1",
     "inferno-scripts": "6.3.0",
+    "lodash": "^4.17.5",
     "node-exiftool": "^2.3.0",
     "query-string": "^6.0.0"
   },
diff --git a/public/css/app.css b/public/css/app.css
index aa4ddb6..362fb4d 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -10,7 +10,7 @@
 }
 
 .full-height {
-	height: 100%;
+	height: 99vmin;
 }
 
 /*! Elements */
@@ -18,4 +18,8 @@ html, body {
 	height: 100vh;
 }
 
+bs-container > * {
+	padding: 0.5em 1em;
+}
+
 /*! Ids */
diff --git a/public/js/customElements.js b/public/js/customElements.js
index fe4d14b..ab287ea 100644
--- a/public/js/customElements.js
+++ b/public/js/customElements.js
@@ -1,3 +1,5 @@
+class BSContainer extends HTMLElement {}
 class FilmExifElement extends HTMLElement {}
 
+customElements.define('bs-container', BSContainer);
 customElements.define('film-exif', FilmExifElement);
diff --git a/src/App.js b/src/App.js
index a64bc47..e5896d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import { BrowserRouter, Link, NavLink } from 'inferno-router';
 import {
-	Container,
 	Nav,
 	Navbar,
 	NavbarBrand,
@@ -10,8 +9,8 @@ import { Routes } from './Routes';
 
 export const App = () => (
 	<BrowserRouter>
-		<Container className="full-height">
-			<Navbar className="sticky-top" color="dark" dark expandable="sm">
+		<bs-container className="full-height">
+			<Navbar className="static-top" color="dark" dark expandable="sm">
 				<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
 				<Nav fill pills>
 					<NavItem>
@@ -26,6 +25,6 @@ export const App = () => (
 				</Nav>
 			</Navbar>
 			<Routes />
-		</Container>
+		</bs-container>
 	</BrowserRouter>
 );
diff --git a/yarn.lock b/yarn.lock
index 35347dc..c1cfe31 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5193,7 +5193,7 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
   version "4.17.5"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"