From 6afd6bd152a2516764658a47b8505fefbb98571b Mon Sep 17 00:00:00 2001
From: Ken Wheeler <ken_wheeler@me.com>
Date: Tue, 22 Aug 2017 09:11:42 -0400
Subject: [PATCH] fixing absurd layout

---
 app/components/Box.js       |   3 +-
 app/components/Container.js |   5 +-
 app/components/DoubleBox.js |   6 +-
 app/components/Row.js       |   1 +
 app/containers/Body.js      | 192 +++++-------------------------------
 5 files changed, 37 insertions(+), 170 deletions(-)

diff --git a/app/components/Box.js b/app/components/Box.js
index 2c921d9..7a0dca4 100644
--- a/app/components/Box.js
+++ b/app/components/Box.js
@@ -5,7 +5,8 @@ const zoomInAnimation = keyframes`${zoomIn}`;
 
 export default styled.div`
   background: #2a2e3b;
-  flex: 1 1 0;
+  flex: ${({ size }) => (size === 'small' ? '1 1 100%' : '1 1 0')};
+  height: ${({ size }) => (size === 'small' ? '350px' : '')};
   margin: 6px;
   padding: 30px;
   animation: 500ms ${zoomInAnimation};
diff --git a/app/components/Container.js b/app/components/Container.js
index 235ce96..0ddec45 100644
--- a/app/components/Container.js
+++ b/app/components/Container.js
@@ -1,10 +1,11 @@
 import styled from 'styled-components';
 
 export default styled.div`
-  background: #1D212D;
+  background: #1d212d;
   display: flex;
-  flex-direction: column;
+  flex-direction: ${({ size }) => (size === 'small' ? 'row' : 'column')};
   flex: 1;
   padding: 40px;
   flex-wrap: wrap;
+  overflow: scroll;
 `;
diff --git a/app/components/DoubleBox.js b/app/components/DoubleBox.js
index e6bc399..fa233da 100644
--- a/app/components/DoubleBox.js
+++ b/app/components/DoubleBox.js
@@ -6,7 +6,11 @@ const zoomInAnimation = keyframes`${zoomIn}`;
 export default styled.div`
   background: #2a2e3b;
   display: flex;
-  flex: 2 1 132px;
+  flex: ${({ size }) =>
+    size === 'large'
+      ? '2 1 132px'
+      : size === 'small' ? '1 1 100%' : '1 1 60px'};
+  height: ${({ size }) => (size === 'small' ? '350px' : '')};
   margin: 6px;
   word-wrap: break-word;
   overflow: auto;
diff --git a/app/components/Row.js b/app/components/Row.js
index 7802691..1786206 100644
--- a/app/components/Row.js
+++ b/app/components/Row.js
@@ -4,4 +4,5 @@ export default styled.div`
   display: flex;
   flex: 1;
   justify-content: space-around;
+  flex-direction: ${({ size }) => (size === 'small' ? 'column' : 'row')};
 `;
diff --git a/app/containers/Body.js b/app/containers/Body.js
index 1352044..2d69e65 100644
--- a/app/containers/Body.js
+++ b/app/containers/Body.js
@@ -92,10 +92,8 @@ class Body extends React.PureComponent {
     shell.openExternal('http://www.formidable.com');
   };
   render() {
-    if (this.props.vizActive) {
-      console.log(this.state);
-      return (
-        <Container>
+    return this.props.vizActive
+      ? <Container>
           <Row>
             <Box style={{ display: 'flex' }} key="viz">
               <Visualization
@@ -120,151 +118,12 @@ class Body extends React.PureComponent {
           </BoxHeader>
           <ReactTooltip place="top" type="error" effect="solid" />
         </Container>
-      );
-    }
-    switch (this.state.breakpoint) {
-      case 'large':
-        return (
-          <Container>
-            <Row>
-              <DoubleBox>
-                <Log log={this.state.log} />
-              </DoubleBox>
-              <Box style={{ display: 'flex' }}>
-                <Operations
-                  stats={this.state.stats}
-                  status={this.state.status}
-                  progress={this.state.progress}
-                  operations={this.state.operations}
-                  totalAssetSizes={this.state.totalAssetSizes}
-                  totalModuleSizes={this.state.totalModuleSizes}
-                  totalAssetMinSizes={this.state.totalAssetMinSizes}
-                  totalModuleMinSizes={this.state.totalModuleMinSizes}
-                />
-              </Box>
-            </Row>
-            <Row>
-              <Box>
-                <BoxHeader>Modules</BoxHeader>
-                <Modules
-                  modules={this.state.modules}
-                  moduleSizes={this.state.moduleSizes}
-                  loading={this.state.modulesLoading}
-                  sizesError={this.state.sizesError}
-                />
-              </Box>
-              <Box>
-                <BoxHeader>Assets</BoxHeader>
-                <Assets
-                  assets={this.state.assets}
-                  assetSizes={this.state.assetSizes}
-                  loading={this.state.assetsLoading}
-                  sizesError={this.state.sizesError}
-                />
-              </Box>
-              <Box>
-                <BoxHeader>Problems</BoxHeader>
-                <Problems
-                  problems={this.state.problems}
-                  problemsError={this.state.problemsError}
-                  loading={this.state.problemsLoading}
-                />
-              </Box>
-            </Row>
-            <BoxHeader
-              style={{ margin: '20px auto 0px', animation: 'none', opacity: 1 }}
-            >
-              Artisanally hand-crafted at{' '}
-              <a
-                style={{ color: '#00bdff' }}
-                href="javascript:void(0)"
-                onClick={this.openUrl}
-              >
-                Formidable
-              </a>
-            </BoxHeader>
-            <ReactTooltip place="top" type="error" effect="solid" />
-          </Container>
-        );
-      case 'medium':
-        return (
-          <Container>
-            <Row>
-              <Box style={{ display: 'flex', padding: 0, flex: '1 1 60px' }}>
-                <Log log={this.state.log} />
-              </Box>
-              <Box style={{ display: 'flex' }}>
-                <Operations
-                  stats={this.state.stats}
-                  status={this.state.status}
-                  progress={this.state.progress}
-                  operations={this.state.operations}
-                  totalAssetSizes={this.state.totalAssetSizes}
-                  totalModuleSizes={this.state.totalModuleSizes}
-                  totalAssetMinSizes={this.state.totalAssetMinSizes}
-                  totalModuleMinSizes={this.state.totalModuleMinSizes}
-                />
-              </Box>
-            </Row>
-            <Row>
-              <Box>
-                <BoxHeader>Modules</BoxHeader>
-                <Modules
-                  modules={this.state.modules}
-                  moduleSizes={this.state.moduleSizes}
-                  loading={this.state.modulesLoading}
-                  sizesError={this.state.sizesError}
-                />
-              </Box>
-              <Box>
-                <BoxHeader>Assets</BoxHeader>
-                <Assets
-                  assets={this.state.assets}
-                  assetSizes={this.state.assetSizes}
-                  loading={this.state.assetsLoading}
-                  sizesError={this.state.sizesError}
-                />
-              </Box>
-              <Box>
-                <BoxHeader>Problems</BoxHeader>
-                <Problems
-                  problems={this.state.problems}
-                  problemsError={this.state.problemsError}
-                  loading={this.state.problemsLoading}
-                />
-              </Box>
-            </Row>
-            <BoxHeader
-              style={{ margin: '20px auto 0px', animation: 'none', opacity: 1 }}
-            >
-              Artisanally hand-crafted at{' '}
-              <a
-                style={{ color: '#00bdff' }}
-                href="javascript:void(0)"
-                onClick={this.openUrl}
-              >
-                Formidable
-              </a>
-            </BoxHeader>
-            <ReactTooltip place="top" type="error" effect="solid" />
-          </Container>
-        );
-      default:
-        return (
-          <Container
-            style={{ flexDirection: 'row', padding: 10, overflow: 'scroll' }}
-          >
-            <Box
-              style={{
-                display: 'flex',
-                padding: 0,
-                flex: '1 1 100%',
-                height: 350,
-              }}
-            >
+      : <Container size={this.state.breakpoint}>
+          <Row size={this.state.breakpoint}>
+            <DoubleBox size={this.state.breakpoint}>
               <Log log={this.state.log} />
-            </Box>
-            <Box style={{ display: 'flex', flex: '1 1 100%', height: 350 }}>
+            </DoubleBox>
+            <Box style={{ display: 'flex' }} size={this.state.breakpoint}>
               <Operations
                 stats={this.state.stats}
                 status={this.state.status}
@@ -276,7 +135,9 @@ class Body extends React.PureComponent {
                 totalModuleMinSizes={this.state.totalModuleMinSizes}
               />
             </Box>
-            <Box style={{ flex: '1 1 100%', height: 350 }}>
+          </Row>
+          <Row size={this.state.breakpoint}>
+            <Box size={this.state.breakpoint}>
               <BoxHeader>Modules</BoxHeader>
               <Modules
                 modules={this.state.modules}
@@ -285,7 +146,7 @@ class Body extends React.PureComponent {
                 sizesError={this.state.sizesError}
               />
             </Box>
-            <Box style={{ flex: '1 1 100%', height: 350 }}>
+            <Box size={this.state.breakpoint}>
               <BoxHeader>Assets</BoxHeader>
               <Assets
                 assets={this.state.assets}
@@ -294,7 +155,7 @@ class Body extends React.PureComponent {
                 sizesError={this.state.sizesError}
               />
             </Box>
-            <Box style={{ flex: '1 1 100%', height: 350 }}>
+            <Box size={this.state.breakpoint}>
               <BoxHeader>Problems</BoxHeader>
               <Problems
                 problems={this.state.problems}
@@ -302,22 +163,21 @@ class Body extends React.PureComponent {
                 loading={this.state.problemsLoading}
               />
             </Box>
-            <BoxHeader
-              style={{ margin: '20px auto 0px', animation: 'none', opacity: 1 }}
+          </Row>
+          <BoxHeader
+            style={{ margin: '20px auto 0px', animation: 'none', opacity: 1 }}
+          >
+            Artisanally hand-crafted at{' '}
+            <a
+              style={{ color: '#00bdff' }}
+              href="javascript:void(0)"
+              onClick={this.openUrl}
             >
-              Artisanally hand-crafted at{' '}
-              <a
-                style={{ color: '#00bdff' }}
-                href="javascript:void(0)"
-                onClick={this.openUrl}
-              >
-                Formidable
-              </a>
-            </BoxHeader>
-            <ReactTooltip place="top" type="error" effect="solid" />
-          </Container>
-        );
-    }
+              Formidable
+            </a>
+          </BoxHeader>
+          <ReactTooltip place="top" type="error" effect="solid" />
+        </Container>;
   }
 }
 export default Body;