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-bootstrap": "^5.0.0",
"inferno-router": "^5.0.1", "inferno-router": "^5.0.1",
"inferno-scripts": "6.3.0", "inferno-scripts": "6.3.0",
"lodash": "^4.17.5",
"node-exiftool": "^2.3.0", "node-exiftool": "^2.3.0",
"query-string": "^6.0.0" "query-string": "^6.0.0"
}, },

View File

@ -10,7 +10,7 @@
} }
.full-height { .full-height {
height: 100%; height: 99vmin;
} }
/*! Elements */ /*! Elements */
@ -18,4 +18,8 @@ html, body {
height: 100vh; height: 100vh;
} }
bs-container > * {
padding: 0.5em 1em;
}
/*! Ids */ /*! Ids */

View File

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

View File

@ -1,6 +1,5 @@
import { BrowserRouter, Link, NavLink } from 'inferno-router'; import { BrowserRouter, Link, NavLink } from 'inferno-router';
import { import {
Container,
Nav, Nav,
Navbar, Navbar,
NavbarBrand, NavbarBrand,
@ -10,8 +9,8 @@ import { Routes } from './Routes';
export const App = () => ( export const App = () => (
<BrowserRouter> <BrowserRouter>
<Container className="full-height"> <bs-container className="full-height">
<Navbar className="sticky-top" color="dark" dark expandable="sm"> <Navbar className="static-top" color="dark" dark expandable="sm">
<NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand> <NavbarBrand to="/" tag={Link}>Film Exif</NavbarBrand>
<Nav fill pills> <Nav fill pills>
<NavItem> <NavItem>
@ -26,6 +25,6 @@ export const App = () => (
</Nav> </Nav>
</Navbar> </Navbar>
<Routes /> <Routes />
</Container> </bs-container>
</BrowserRouter> </BrowserRouter>
); );

View File

@ -5193,7 +5193,7 @@ lodash.uniq@^4.5.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" 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" version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"