Starting on some file system stuff

public/css/app.css

@@ -9,8 +9,17 @@
 	width: auto;
 }
 
+.container {
+	padding: 0;
+	margin: 0;
+}
+
 .full-height {
-	height: 99vmin;
+	height: calc(100% - 60px);
+}
+
+.row {
+	margin: inherit;
 }
 
 /*! Elements */

public/index.html

@@ -5,7 +5,6 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 		<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
 		<link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.min.css" />
-		<link rel="stylesheet" href="%PUBLIC_URL%/css/marx.min.css" />
 		<link rel="stylesheet" href="%PUBLIC_URL%/css/app.css" />
 		<title>Inferno App</title>
 	</head>

public/js/customElements.js

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

src/App.js

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

src/electron/events.js

@@ -0,0 +1,5 @@
+const { app, dialog } = require('electron');
+
+app.on('foo', () => {});
+
+console.log(dialog);

src/electron/starter.js

@@ -68,3 +68,4 @@ app.on('activate', () => {
 
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
+require('./events');

src/views/HomeView.js

@@ -1,18 +1,26 @@
-import QueryString from 'query-string';
 import {
-	Button,
 	Container,
-	Form,
-	FormGroup,
-	Input,
 	Jumbotron,
-	Label,
 	Row,
 } from '../components/Bootstrap';
 
+function handleDrop (e) {
+	e.preventDefault();
+	e.stopPropagation();
+
+	for (const f of e.dataTransfer.files) {
+		console.log('Dragged files', f.path);
+	}
+}
+
+function handleDragOver (e) {
+	e.preventDefault();
+	e.stopPropagation();
+}
+
 export const HomeView = (props) => {
 	return (
-		<Jumbotron>
+		<Jumbotron onDrop={handleDrop} onDragover={handleDragOver}>
 			<Container className="App">
 				<Row>
 					<header className="App-header">
@@ -24,19 +32,7 @@ export const HomeView = (props) => {
 						To get started, edit <code>src/App.js</code> and save to reload.
 					</p>
 				</Row>
-				<Row>
-					<Form>
-						<FormGroup>
-							<Label tag="label" for="brand">Brand</Label>
-							<Input type="text" id="brand" name="brand" />
-						</FormGroup>
-						<Button color="primary" type="submit">Save</Button>
-					</Form>
-				</Row>
 			</Container>
-			<pre>{
-				JSON.stringify(QueryString.parse(window.location.search), undefined, 2)
-			}</pre>
 		</Jumbotron>
 	);
 };

src/views/OopsView.js

@@ -2,9 +2,12 @@ import { Alert, Row } from '../components/Bootstrap';
 
 export const OopsView = (props) => (
 	<Row className="align-items-center justify-content-center full-height">
-		<Alert className="abs-center" color="danger" tag="main">
+		<Alert className="abs-center" color="danger" style={{padding: '5em'}} tag="main">
 			<h1>Oops!</h1>
+			<hr />
 			<p>Looks like there was a problem.</p>
+			<p>(╥﹏╥)</p>
+			<p>(╯°□°）╯︵ ┻━┻</p>
 		</Alert>
 	</Row>
 );