Skip to content
This repository has been archived by the owner on Feb 17, 2022. It is now read-only.

Commit

Permalink
fixing absurd layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenwheeler
kenwheeler committed Aug 22, 2017
1 parent f8d8f34 commit 6afd6bd
Show file tree
Hide file tree
Showing 5 changed files with 37 additions and 170 deletions.
3 changes: 2 additions & 1 deletion app/components/Box.js
View file
Expand Up @@ -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};
Expand Down
5 changes: 3 additions & 2 deletions app/components/Container.js
View file
@@ -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;
`;
6 changes: 5 additions & 1 deletion app/components/DoubleBox.js
View file
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions app/components/Row.js
View file
Expand Up @@ -4,4 +4,5 @@ export default styled.div`
display: flex;
flex: 1;
justify-content: space-around;
flex-direction: ${({ size }) => (size === 'small' ? 'column' : 'row')};
`;
192 changes: 26 additions & 166 deletions app/containers/Body.js
View file
Expand Up @@ -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
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -294,30 +155,29 @@ 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}
problemsError={this.state.problemsError}
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;

0 comments on commit 6afd6bd

Please sign in to comment.