UI Fixes: refactor elements layout
This commit is contained in:
Chika
parent
d7f04ac8e5
commit
ffa65e9a04
@ -1,23 +1,12 @@
|
||||
import { Tabs } from 'antd';
|
||||
import { Divider as AntDivider, Tabs } from 'antd';
|
||||
import Background from 'client/Elements/Background';
|
||||
import Divider from 'client/Elements/Divider';
|
||||
import { Box, Flex } from 'client/UIKit/grid';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import { SecondaryText } from 'client/Elements/Text';
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import SectionsList from './list';
|
||||
import sectionsList from './list';
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
const InputWrapper = styled(Box)`
|
||||
width: 100%;
|
||||
${mq.desktop`
|
||||
flex: ${props => (props.size === 'min' ? '1 0' : '2 0 23%')};
|
||||
width:${props => props.size === 'max' && '100%'};
|
||||
`}
|
||||
margin: 8px 8px;
|
||||
`;
|
||||
const Title = styled.h5`
|
||||
const ElementTitle = styled.h5`
|
||||
color: rgba(0, 0, 0, 0.75);
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
@ -25,43 +14,72 @@ const Title = styled.h5`
|
||||
margin: 0 8px 3px 0;
|
||||
`;
|
||||
|
||||
const BreakLine = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const renderElements = ({ elements }) => {
|
||||
return elements.map((element, ie) => {
|
||||
const { title: elementTitle, Component, props: elementProps } = element;
|
||||
return (
|
||||
<Flex flexDirection="column" key={ie} my="5px">
|
||||
<ElementTitle>{elementTitle}</ElementTitle>
|
||||
<Component {...elementProps} />
|
||||
</Flex>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const renderBlocks = ({ blocks }) => {
|
||||
return blocks.map((block, ib) => {
|
||||
const { elements, title: blockTitle, layout } = block;
|
||||
const breakLine = layout ? layout.breakLine : true;
|
||||
|
||||
return (
|
||||
<>
|
||||
{elements.length <= 1 && breakLine && <BreakLine />}
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
key={ib}
|
||||
flex={['1 1 100%', '1 1 100%', '2 1 45%', '3 1 30%']}
|
||||
mx="10px"
|
||||
my="5px"
|
||||
>
|
||||
{blockTitle && <SecondaryText>{blockTitle}</SecondaryText>}
|
||||
{renderElements({ elements })}
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const renderGroups = ({ groups }) => {
|
||||
return groups.map((group, ig) => {
|
||||
const { title: blocksTitle, blocks } = group;
|
||||
return (
|
||||
<React.Fragment key={ig}>
|
||||
{blocksTitle && (
|
||||
<AntDivider style={{ margin: '8px 0' }}>{blocksTitle}</AntDivider>
|
||||
)}
|
||||
<Flex flexDirection="row" flexWrap="wrap">
|
||||
{renderBlocks({ blocks })}
|
||||
</Flex>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const Sections = props => (
|
||||
<Background {...props}>
|
||||
<Tabs type="line">
|
||||
{SectionsList.map(({ title, elements }, i) => (
|
||||
<TabPane tab={title} key={i}>
|
||||
<Flex
|
||||
justifyContent="flex-start"
|
||||
alignItems="flex-end"
|
||||
flexWrap="wrap"
|
||||
>
|
||||
{elements.map(
|
||||
({ title, Component, props, layout, divider }, ie) => {
|
||||
if (divider) {
|
||||
return <Divider key={ie} {...divider} />;
|
||||
}
|
||||
return (
|
||||
<InputWrapper
|
||||
key={ie}
|
||||
newLine={layout && layout.newLine}
|
||||
width={layout && layout.width}
|
||||
size={layout && layout.size}
|
||||
>
|
||||
<Flex
|
||||
flexDirection={
|
||||
(layout && layout.flexDirection) || 'column'
|
||||
}
|
||||
>
|
||||
<Title level={5}>{title}</Title>
|
||||
<Component {...props} />
|
||||
</Flex>
|
||||
</InputWrapper>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</Flex>
|
||||
</TabPane>
|
||||
))}
|
||||
{sectionsList.map((section, is) => {
|
||||
const { title: tabTitle, groups } = section;
|
||||
return (
|
||||
<Tabs.TabPane tab={tabTitle} key={is}>
|
||||
{renderGroups({ groups })}
|
||||
</Tabs.TabPane>
|
||||
);
|
||||
})}
|
||||
</Tabs>
|
||||
</Background>
|
||||
);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -5,11 +5,11 @@ import Sections from './Sections';
|
||||
|
||||
const Calculation = () => {
|
||||
return (
|
||||
<Box mx={['0', '1%', '1%', '1.5%', '10%']}>
|
||||
<Box mx={['0', '1%', '1%', '1.5%', '2%', '10%']}>
|
||||
<Flex flexWrap="wrap" mb="50px">
|
||||
<Sections flex="3 0 65%" />
|
||||
<Sections flex={['1 0 100%', '1 0 100%', '1 0 100%', '1 0 60%']} />
|
||||
<Results
|
||||
flex="1 0 20%"
|
||||
flex={['1 0 100%', '1 0 100%', '1 0 100%', '1 0 30%']}
|
||||
justifyContent="center"
|
||||
// position={['sticky', 'sticky', 'sticky', 'relative']}
|
||||
// bottom={[0, 0, 0, null]}
|
||||
|
||||
@ -5,13 +5,18 @@ import mq from 'client/UIKit/mq';
|
||||
|
||||
const Background = styled(Box)`
|
||||
background: ${colors.white[0]};
|
||||
|
||||
padding: 4px 10px;
|
||||
${mq.desktop`
|
||||
padding: 10px 18px;
|
||||
margin: 7px 0 10px;
|
||||
`}
|
||||
|
||||
margin: 0 0 10px;
|
||||
${mq.desktop`
|
||||
margin: 10px 10px;
|
||||
`}
|
||||
box-shadow: 4px 5px 17px -11px rgba(0, 0, 0, 0.75);
|
||||
flex: ${(props) => props.flex};
|
||||
flex: ${props => props.flex};
|
||||
max-width: 100%;
|
||||
`;
|
||||
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { Tabs, Divider as AntDivider } from 'antd';
|
||||
|
||||
const EmptyDivider = styled.div`
|
||||
width: 100%;
|
||||
margin: 3px 0;
|
||||
`;
|
||||
|
||||
const Divider = ({ title, empty }) => {
|
||||
if (empty) {
|
||||
return <EmptyDivider />;
|
||||
}
|
||||
return <AntDivider>{title}</AntDivider>;
|
||||
};
|
||||
|
||||
export default Divider;
|
||||
@ -6,17 +6,19 @@ import React from 'react';
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
|
||||
const Header = () => (
|
||||
<Flex style={styles.header}>
|
||||
{/* {paths.map(
|
||||
<header style={styles.header}>
|
||||
<Flex style={styles.headerContent}>
|
||||
{/* {paths.map(
|
||||
(path, i) =>
|
||||
path.route && (
|
||||
<Link to={path.route}>
|
||||
<MenuButton key={i}>{path.name}</MenuButton>
|
||||
</Link>
|
||||
path.route && (
|
||||
<Link to={path.route}>
|
||||
<MenuButton key={i}>{path.name}</MenuButton>
|
||||
</Link>
|
||||
)
|
||||
)} */}
|
||||
<LogoText>EVO Calculator</LogoText>
|
||||
</Flex>
|
||||
)} */}
|
||||
<LogoText>EVO Calculator</LogoText>
|
||||
</Flex>
|
||||
</header>
|
||||
);
|
||||
|
||||
const Content = () => (
|
||||
@ -35,7 +37,7 @@ const Content = () => (
|
||||
);
|
||||
|
||||
const Layout = () => (
|
||||
<Flex flexDirection="column" style={styles.flex}>
|
||||
<Flex flexDirection="column">
|
||||
<Header />
|
||||
<Content />
|
||||
</Flex>
|
||||
@ -43,12 +45,14 @@ const Layout = () => (
|
||||
|
||||
const styles = {
|
||||
root: {
|
||||
height: '100%'
|
||||
height: '100%',
|
||||
},
|
||||
flex: { width: '100%' },
|
||||
header: {
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 999999,
|
||||
},
|
||||
headerContent: {
|
||||
background: `linear-gradient(90deg,
|
||||
${colors.blueTemp[0]} 0%,
|
||||
${colors.blueTemp[300]} 50%,
|
||||
@ -57,8 +61,7 @@ const styles = {
|
||||
padding: '10px 12px',
|
||||
paddingLeft: '20px',
|
||||
// borderRadius: "0 0 10px 10px",
|
||||
zIndex: 999999
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
|
||||
@ -4,11 +4,14 @@ const ALLOWED_BREAKPOINTS = [
|
||||
//'less'
|
||||
'tablet',
|
||||
'desktop',
|
||||
'desktop1280',
|
||||
'desktop1440',
|
||||
'desktop1920',
|
||||
'desktop2560'
|
||||
'desktop2560',
|
||||
];
|
||||
|
||||
export default {
|
||||
breakpoints: ALLOWED_BREAKPOINTS.map(breakpoint => screens[breakpoint] + 'px')
|
||||
breakpoints: ALLOWED_BREAKPOINTS.map(
|
||||
breakpoint => screens[breakpoint] + 'px',
|
||||
),
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user