Use custom container component

This commit is contained in:
Timothy Warren 2018-04-03 16:52:58 -04:00
parent 5a1cf47b34
commit 7a9a95bc08
5 changed files with 12 additions and 6 deletions

View File

@ -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"
},

View File

@ -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 */

View File

@ -1,3 +1,5 @@
class BSContainer extends HTMLElement {}
class FilmExifElement extends HTMLElement {}
customElements.define('bs-container', BSContainer);
customElements.define('film-exif', FilmExifElement);

View File

@ -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>
);

View File

@ -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"