evo/EvoCalculator
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout styles

Browse Source
This commit is contained in:
Chika 2020-09-01 21:47:11 +03:00
parent 86b9fcb474
commit 948c38d68b
2 changed files with 27 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/client/Containers/Calculation/index.jsx
View File

@ -1,30 +1,33 @@
import { Tabs } from 'antd';
import Background from 'client/Elements/Background';
import React, { useState } from 'react';
import { Box, Flex } from 'client/UIKit/grid';
import React from 'react';
import Sections from './Sections';
import { Tabs } from 'antd';
import { Box, Flex } from 'client/UIKit/grid';
const { TabPane } = Tabs;
const Calculation = () => {
return (
<Background>
<Tabs type="line">
{Sections.map(({ title, elements }, i) => (
<TabPane tab={title} key={i}>
<Flex>
{elements.map(({ Component, props }, ie) => {
return (
<Box width="250px" my="10px" key={ie}>
<Component {...props} />
</Box>
);
})}
</Flex>
</TabPane>
))}
</Tabs>
</Background>
<Flex flexWrap="wrap">
<Background flex="3 0 25em">
<Tabs type="line">
{Sections.map(({ title, elements }, i) => (
<TabPane tab={title} key={i}>
<Flex>
{elements.map(({ Component, props }, ie) => {
return (
<Box width="250px" my="10px" key={ie}>
<Component {...props} />
</Box>
);
})}
</Flex>
</TabPane>
))}
</Tabs>
</Background>
<Background flex="0.5 0 25em">Results</Background>
</Flex>
);
};

7
src/client/Elements/Background.jsx
View File

@ -1,12 +1,13 @@
import colors from "client/UIKit/colors";
import { Box, Flex } from "client/UIKit/grid";
import styled from "styled-components";
import colors from 'client/UIKit/colors';
import { Box, Flex } from 'client/UIKit/grid';
import styled from 'styled-components';
const Background = styled(Box)`
background: ${colors.white[0]};
margin: 10px 10px;
padding: 10px 18px;
box-shadow: 4px 5px 17px -11px rgba(0, 0, 0, 0.75);
flex: ${props => props.flex};
`;
export default Background;