refactor unecessary files and redesign home and layout

backslash47 · Apr 18, 2018 · 21454f7 · 21454f7
1 parent 1b2bf7e
commit 21454f7
Show file tree

Hide file tree

Showing 14 changed files with 174 additions and 254 deletions.
diff --git a/src/app/app.ts b/src/app/app.ts
diff --git a/src/app/appView.tsx b/src/app/appView.tsx
@@ -32,14 +32,11 @@ import OntIdDetail from '~/ontIds/ontIdDetail';
 import Wallet from '~/wallet/wallet';
 import CreateWallet from '~/wallet/createWallet';
 import CreateClaim from '~/ontIds/createClaim';
+import Layout from '~/layout/layoutView';
 
-import Sidebar from '~/sidebar/sidebar';
-import Footer from '~/footer/footer';
-import { PropsInner as Props } from './app';
-
-const App: React.SFC<Props> = (props) => (
+const App: React.SFC<{}> = () => (
   <Router>
-    <Sidebar items={props.menu} footerComponent={Footer} >
+    <Layout>
         <Route path="/" exact={true} component={Home} />
         <Route path="/blocks" exact={true} component={BlocksGrid} />
         <Route path="/blocks/:id" exact={true} component={BlockDetail} />
@@ -54,7 +51,7 @@ const App: React.SFC<Props> = (props) => (
         <Route path="/ont-ids/:id/create-claim" exact={true} component={CreateClaim} />
         <Route path="/wallet" exact={true} component={Wallet} />
         <Route path="/wallet/create" exact={true} component={CreateWallet} />
-    </Sidebar>
+    </Layout>
   </Router>
 );
 

diff --git a/src/footer/footerView.tsx b/src/footer/footerView.tsx
@@ -17,9 +17,8 @@
  */
 
 import * as React from 'react';
-import { PropsInner as Props } from './footer';
 
-const FooterView: React.SFC<Props> = (props) => (
+const FooterView: React.SFC<{}> = () => (
     <div>
         Matus Zamborsky © 2018
         <br />

diff --git a/src/home/home.css b/src/home/home.css
@@ -16,21 +16,41 @@
  * along with The ONT Detective.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-.ui.grid.home {
-    height: calc(100vh - 180px);
+div.home {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
     padding-left: 20%;
     padding-right: 20%;
+    margin-top: 4em;
 }
 
-.ui.grid.home img.logo {
+div.home .logo {
     width: 25%;
     padding-bottom: 10px;
 }
 
-.ui.grid.home h1 {
+div.home .logo img {
+    width: 100%;
+}
+
+div.home h1.ui.header {
+    text-align: center;
     font-size: 3rem;
 }
 
-.ui.button.search {
+div.home .ui.form {
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+div.home .ui.form .field {
+    align-self: stretch;
+}
+
+div.home .ui.button.search {
     margin-top: 10px;
 }
diff --git a/src/home/homeView.tsx b/src/home/homeView.tsx
@@ -18,7 +18,7 @@
 
 import * as React from 'react';
 import { Redirect } from 'react-router-dom';
-import { Grid, Header, Button, Message } from 'semantic-ui-react';
+import { Header, Button, Message } from 'semantic-ui-react';
 import { Form as FinalForm, Field } from 'react-final-form';
 import { InputField, Form } from '~/form/formWrapper';
 import { PropsInner as Props } from './home';
@@ -27,30 +27,28 @@ import './home.css';
 const logo = require('./detective.svg');
 
 const Home: React.SFC<Props> = (props: Props) => (
-    <Grid className="home" verticalAlign="middle" columns={1} centered={true}>
-        <Grid.Row>
-            <Grid.Column textAlign="center">
-                <Header as="h1">ONT Detective</Header>
-                <img className="logo" src={logo} /> 
-                <FinalForm onSubmit={props.handleSearch} component={Form}>
-                    <Field 
-                        name="q" 
-                        component={InputField} 
-                        fluid={true}
-                        icon="search"
-                        placeholder="Search by block/tx/address hash or block index"
-                        size="large"
-                    />
-
-                    <Message warning={true}>
-                        Invalid account/block/transaction.
-                    </Message>
-                    <Button className="search" size="large">Search</Button>
-                </FinalForm>
-                {props.redirect != null ? (<Redirect to={props.redirect}/>) : null}
-            </Grid.Column>
-        </Grid.Row>
-    </Grid>
+    <div className="home">
+        <Header as="h1">ONT Detective</Header>
+        <div className="logo">
+            <img src={logo} />
+        </div>
+        <FinalForm onSubmit={props.handleSearch} component={Form}>
+            <Field 
+                name="q" 
+                component={InputField} 
+                fluid={true}
+                icon="search"
+                placeholder="Search by block/tx/address hash or block index"
+                size="large"
+            />
+
+            <Message warning={true}>
+                Invalid account/block/transaction.
+            </Message>
+            <Button className="search" size="large">Search</Button>
+        </FinalForm>
+        {props.redirect != null ? (<Redirect to={props.redirect}/>) : null}
+    </div>
 );
 
 export default Home;
diff --git a/src/index.css b/src/index.css
@@ -21,6 +21,27 @@
 body {
     font-family: 'Source Sans Pro', sans-serif;
     background-color: #f4f4f4;
+    display: flex;
+    flex-direction: column;
+}
+
+#root {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.ui.menu.ont-header {
+    min-height: 70px;
+    margin-bottom: 0;
+}
+
+.ui.segment.ont-main {
+    flex-grow: 1;
+}
+
+.ui.segment.ont-footer {
+    text-align: right;
 }
 
 .ui.table, .ui.header, .ui.table thead th {
@@ -36,10 +57,6 @@ body {
     font-weight: normal;
 }
 
-#root {
-    height: 100%;
-}
-
 .ui.segment, 
 .ui.segments, 
 .ui.table, 
@@ -63,19 +80,12 @@ body {
     background-color: white;
 }
 
-a, a:hover {
-    color: #32a4be;
-}
-
-.ui.breadcrumb {
-    word-break: break-all;
-}
-
-.ui.breadcrumb a, .ui.breadcrumb a:hover {
+a, a:hover, .ui.breadcrumb a, .ui.breadcrumb a:hover {
     color: #32a4be;
 }
 
 .ui.breadcrumb .section {
+    word-break: break-all;
     display: inline;
 }
 
@@ -108,4 +118,16 @@ img.icon {
     .ui.table tbody tr td.selectable>a:not(.ui) {
         padding: 0;
     }
-}
+}
+
+.menu.inverted {
+    background-color: #32a4be !important;
+}
+
+.ui.menu .ui.dropdown .menu.inverted>.item {
+    color: #fff !important;
+}
+
+.ui.inverted.menu .item.logo img {
+    margin: auto;
+}
diff --git a/src/index.tsx b/src/index.tsx
@@ -18,10 +18,13 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import App from '~/app/app';
+import App from '~/app/appView';
+import { login as loginElastic } from '~/shared/elastic/api';
 import 'semantic-ui-css/semantic.min.css';
 import './index.css';
 
+loginElastic(process.env.REACT_APP_API_URL || 'http://localhost:9200');
+
 ReactDOM.render(
   <App />,
   document.getElementById('root') as HTMLElement

diff --git a/src/footer/footer.ts → src/layout/layoutView.tsx b/src/footer/footer.ts → src/layout/layoutView.tsx
@@ -16,16 +16,21 @@
  * along with The ONT Detective.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { compose } from 'recompose';
-import FooterView from './footerView';
+import * as React from 'react';
+import { Segment } from 'semantic-ui-react';
+import Footer from '~/footer/footerView';
+import Menu from '~/menu/menuView';
+
+const LayoutView: React.SFC<{}> = (props) => (
+    <>
+        <Menu/>
+        <Segment className="ont-main" basic={true}>
+            {props.children}
+        </Segment>
+        <Segment className="ont-footer" basic={true}>
+            <Footer/>
+        </Segment>
+    </>
+);
 
-interface PropsOuter {
-
-}
-
-export interface PropsInner {
-
-}
-
-export default compose<PropsInner, PropsOuter>(
-) (FooterView);
+export default LayoutView;