Components for file list

alexjstubbs · Oct 30, 2017 · 2647a1a · 2647a1a
1 parent 510c614
commit 2647a1a
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 15 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,8 +1,8 @@
 {
-  "main.css": "static/css/main.76ecd9c9.css",
+  "main.css": "static/css/main.7e0941bf.css",
-  "main.css.map": "static/css/main.76ecd9c9.css.map",
+  "main.css.map": "static/css/main.7e0941bf.css.map",
-  "main.js": "static/js/main.dba8de9e.js",
+  "main.js": "static/js/main.57a92ca8.js",
-  "main.js.map": "static/js/main.dba8de9e.js.map",
+  "main.js.map": "static/js/main.57a92ca8.js.map",
   "static/media/Roboto-Thin.ttf": "static/media/Roboto-Thin.89e2666c.ttf",
   "static/media/ionicons.eot?v=2.0.0": "static/media/ionicons.2c2ae068.eot",
   "static/media/ionicons.svg?v=2.0.0": "static/media/ionicons.621bd386.svg",

diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.76ecd9c9.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.dba8de9e.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.7e0941bf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.57a92ca8.js"></script></body></html>
diff --git a/build/service-worker.js b/build/service-worker.js
diff --git a/build/static/css/main.76ecd9c9.css.map b/build/static/css/main.76ecd9c9.css.map
diff --git a/build/static/css/main.76ecd9c9.css → build/static/css/main.7e0941bf.css b/build/static/css/main.76ecd9c9.css → build/static/css/main.7e0941bf.css
diff --git a/build/static/css/main.7e0941bf.css.map b/build/static/css/main.7e0941bf.css.map
diff --git a/build/static/js/main.dba8de9e.js → build/static/js/main.57a92ca8.js b/build/static/js/main.dba8de9e.js → build/static/js/main.57a92ca8.js
diff --git a/build/static/js/main.57a92ca8.js.map b/build/static/js/main.57a92ca8.js.map
diff --git a/build/static/js/main.dba8de9e.js.map b/build/static/js/main.dba8de9e.js.map
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,15 @@
 import React, { Component } from 'react';
 import Avatar from './components/Avatar';
+import FileList from './components/FileList';
+import ConsoleList from './components/ConsoleList';
 import './assets/themes/neon_moon.css';
 
 class App extends Component {
   render() {
     return (
-      <div className="App twelve columns">
+      <div className="App container">
+        <div className="twelve columns">
+
         <header className="App-header">
 
           <Avatar></Avatar>
@@ -14,6 +18,21 @@ class App extends Component {
           <hr className="twelve columns" />
 
         </header>
+
+
+        <div className="content">
+
+          <ConsoleList></ConsoleList>
+
+          <br />
+
+          <div className="u-cf"></div>
+
+          <FileList></FileList>
+
+        </div>
+
+        </div>
       </div>
     );
   }

diff --git a/src/assets/themes/neon_moon.css b/src/assets/themes/neon_moon.css
@@ -21,6 +21,9 @@
   padding: 0 !important;
   margin: 0 !important; }
 
+.no-bullets {
+  list-style-type: none !important; }
+
 .icon-justified {
   position: relative;
   top: 1.3px;
@@ -52,3 +55,27 @@ body {
 
 hr {
   border-color: #404040; }
+
+/*
+ * Console List
+ */
+.console-list li {
+  font-size: 2em;
+  display: inline;
+  padding: 15px; }
+
+.console-list li:not(.active) {
+  opacity: 0.5; }
+
+.console-list li .active {
+  font-size: 2.5em;
+  opacity: 1; }
+
+/*
+ * File List
+ */
+.file-list {
+  padding: 0px;
+  margin: 20px 0 0 0;
+  height: 100vh;
+  background: black; }
diff --git a/src/components/ConsoleList.jsx b/src/components/ConsoleList.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Components = {
+  ConsoleList: function DatePicker(props) {
+    return (
+
+          <div className="console-list twelve columns">
+              <ul className="no-bullets nopadding-nomargin console-list">
+                <li className="active">NES</li>
+                <li>SNES</li>
+                <li>N64</li>
+              </ul>
+          </div>
+
+    );
+
+  }
+}
+
+function ConsoleList() {
+  return <Components.ConsoleList />;
+}
+
+export default ConsoleList;
diff --git a/src/components/FileList.jsx b/src/components/FileList.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+const Components = {
+  FileList: function DatePicker(props) {
+    return (
+
+          <div className="file-list five columns">
+              File List
+          </div>
+
+    );
+
+  }
+}
+
+function FileList() {
+  return <Components.FileList />;
+}
+
+export default FileList;
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -9,7 +9,7 @@
 // This link also includes instructions on opting out of this behavior.
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === '127.0.0.1' ||
     // [::1] is the IPv6 localhost address.
     window.location.hostname === '[::1]' ||
     // 127.0.0.1/8 is considered localhost for IPv4.

diff --git a/src/themes/neon_moon.css b/src/themes/neon_moon.css
@@ -21,6 +21,9 @@
   padding: 0 !important;
   margin: 0 !important; }
 
+.no-bullets {
+  list-style-type: none !important; }
+
 .icon-justified {
   position: relative;
   top: 1.3px;
@@ -52,3 +55,28 @@ body {
 
 hr {
   border-color: #404040; }
+
+/*
+ * Console List
+ */
+.console-list li {
+  font-size: 2em;
+  display: inline;
+  padding: 15px; }
+
+.console-list li:not(.active) {
+  opacity: 0.5; }
+
+.console-list li .active {
+  font-size: 2.5em;
+  opacity: 1; }
+
+/*
+ * File List
+ */
+.file-list {
+  padding: 0px;
+  margin: 20px 0 0 0;
+  height: 100vh;
+  overflow-y: scroll;
+  background: black; }
diff --git a/src/themes/neon_moon.scss b/src/themes/neon_moon.scss
@@ -34,6 +34,10 @@ $red: #C50F0F;
     margin: 0 !important;
 }
 
+.no-bullets {
+    list-style-type: none !important;
+}
+
 .icon-justified {
     position: relative;
     top: 1.3px;
@@ -72,4 +76,36 @@ body {
 
 hr {
     border-color: darken($text-color, 55%);
-}
+}
+
+/*
+ * Console List
+ */
+
+.console-list li {
+    font-size: 2em;
+    display: inline; 
+    padding: 15px;
+}
+
+.console-list li:not(.active) {
+    opacity: 0.5;
+}
+
+.console-list li .active {
+    font-size: 2.5em;
+    opacity: 1;
+}
+
+
+/*
+ * File List
+ */
+
+ .file-list {
+     padding: 0px;
+     margin: 20px 0 0 0;
+     height: 100vh;
+     overflow-y: scroll;
+     background: darken($background-color, 40%);
+ }