merge refactor/layout-fixes-grid
This commit is contained in:
Chika
parent
aa0c1d89af
commit
a5eae4954e
@ -24,8 +24,8 @@
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.3",
|
||||
"rebass": "^4.0.7",
|
||||
"styled-components": "^5.2.3",
|
||||
"styled-system": "^5.1.5",
|
||||
"typescript": "^4.2.4",
|
||||
"use-debounce": "^6.0.1",
|
||||
"uuid": "^8.3.2",
|
||||
@ -39,8 +39,8 @@
|
||||
"@types/react": "^17.0.3",
|
||||
"@types/react-dom": "^17.0.3",
|
||||
"@types/react-router-dom": "^5.1.7",
|
||||
"@types/styled-components": "^5.1.9",
|
||||
"@types/styled-system": "^5.1.11"
|
||||
"@types/rebass": "^4.0.8",
|
||||
"@types/styled-components": "^5.1.9"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "craco test",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { Box, Flex } from 'client/UIKit/grid';
|
||||
import { Spin } from 'antd';
|
||||
import { Box, Flex } from 'rebass/styled-components';
|
||||
|
||||
export default () => (
|
||||
<Box height="100%" py="10px">
|
||||
|
||||
@ -2,22 +2,22 @@ import { IGroup } from 'core/types/Calculation/components';
|
||||
|
||||
export const controlsList: IGroup[] = [
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
title: 'Выбор Интереса/ЛС',
|
||||
blocks: [
|
||||
{
|
||||
elements: ['selectLead', 'selectOpportunity'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ blocks: [{ elements: ['cbxRecalcWithRevision', 'selectQuote'] }] },
|
||||
{
|
||||
blocks: [
|
||||
{
|
||||
elements: ['btnCalculate'],
|
||||
elements: [
|
||||
'selectLead',
|
||||
'selectOpportunity',
|
||||
'cbxRecalcWithRevision',
|
||||
'selectQuote',
|
||||
'btnCalculate',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
title: 'Параметры расчета',
|
||||
blocks: [
|
||||
{
|
||||
|
||||
@ -2,6 +2,7 @@ import { IGroup } from 'core/types/Calculation/components';
|
||||
|
||||
export const calculationResults: IGroup[] = [
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
title: 'Результаты',
|
||||
|
||||
@ -2,12 +2,10 @@ import { IGroup } from 'core/types/Calculation/components';
|
||||
|
||||
export const resultsTable: IGroup[] = [
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
title: 'График платежей',
|
||||
layout: {
|
||||
newLine: true,
|
||||
},
|
||||
elements: ['tableResults'],
|
||||
},
|
||||
],
|
||||
|
||||
@ -6,6 +6,7 @@ const sections: ISection[] = [
|
||||
// groups: [
|
||||
// {
|
||||
// title: 'Создание нового интереса в CRM',
|
||||
// style: { columnsNumber: 3 },
|
||||
// blocks: [
|
||||
// {
|
||||
// elements: [
|
||||
@ -34,17 +35,21 @@ const sections: ISection[] = [
|
||||
// 'selectDoubleAgent',
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// style: { columnsNumber: 1 },
|
||||
// blocks: [
|
||||
// {
|
||||
// elements: ['tbxCommentLead'],
|
||||
// layout: {
|
||||
// newLine: true,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// style: { columnsNumber: 1 },
|
||||
// blocks: [
|
||||
// {
|
||||
// elements: ['btnCreateLead'],
|
||||
// layout: {
|
||||
// newLine: true,
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
@ -54,6 +59,7 @@ const sections: ISection[] = [
|
||||
title: 'Лизинг',
|
||||
groups: [
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['selectProduct'],
|
||||
@ -69,7 +75,6 @@ const sections: ISection[] = [
|
||||
{
|
||||
blocks: [
|
||||
{
|
||||
// title: 'Стоимость предмета лизинга',
|
||||
elements: [
|
||||
'selectSupplierCurrency',
|
||||
'tbxLeaseObjectPrice',
|
||||
@ -98,9 +103,6 @@ const sections: ISection[] = [
|
||||
'tbxParmentsDecreasePercent',
|
||||
'selectHighSeasonStart',
|
||||
],
|
||||
layout: {
|
||||
newLine: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
// title: 'Параметры расчета',
|
||||
@ -109,12 +111,13 @@ const sections: ISection[] = [
|
||||
// 'tbxComissionRub',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['tablePayments'],
|
||||
layout: {
|
||||
newLine: true,
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -179,19 +182,21 @@ const sections: ISection[] = [
|
||||
groups: [
|
||||
{
|
||||
title: 'Поставщик предмета лизинга',
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['selectDealer'],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
blocks: [
|
||||
{
|
||||
elements: [
|
||||
'selectDealerPerson',
|
||||
'selectDealerRewardCondition',
|
||||
'tbxDealerRewardSumm',
|
||||
],
|
||||
layout: {
|
||||
newLine: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
elements: [
|
||||
@ -225,9 +230,6 @@ const sections: ISection[] = [
|
||||
'selectCalcBrokerRewardCondition',
|
||||
'tbxCalcBrokerRewardSum',
|
||||
],
|
||||
layout: {
|
||||
newLine: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
elements: [
|
||||
@ -244,6 +246,7 @@ const sections: ISection[] = [
|
||||
title: 'Страхование',
|
||||
groups: [
|
||||
{
|
||||
style: { columnsNumber: 3 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['selectBrand', 'selectModel', 'selectConfiguration'],
|
||||
@ -265,6 +268,7 @@ const sections: ISection[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
style: { columnsNumber: 3 },
|
||||
blocks: [
|
||||
{
|
||||
elements: [
|
||||
@ -297,11 +301,13 @@ const sections: ISection[] = [
|
||||
'tbxInsKaskoPriceLeasePeriod',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['tableInsurance'],
|
||||
layout: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -311,6 +317,7 @@ const sections: ISection[] = [
|
||||
title: 'Доп. продукты',
|
||||
groups: [
|
||||
{
|
||||
style: { columnsNumber: 1 },
|
||||
blocks: [
|
||||
{
|
||||
elements: [
|
||||
@ -349,11 +356,13 @@ const sections: ISection[] = [
|
||||
'cbxQuoteRedemptionGraph',
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
style: { columnsNumber: 2 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['tbxQuoteName'],
|
||||
layout: {
|
||||
newLine: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
elements: ['radioQuoteContactGender'],
|
||||
@ -361,6 +370,7 @@ const sections: ISection[] = [
|
||||
],
|
||||
},
|
||||
{
|
||||
style: { columnsNumber: 2 },
|
||||
blocks: [
|
||||
{
|
||||
elements: ['btnCreateKP'],
|
||||
|
||||
@ -3,13 +3,36 @@ import Spinner from 'client/Components/Spinner';
|
||||
import Modal from 'client/Elements/Modal';
|
||||
import withModal from 'client/hocs/Calculation/withModal';
|
||||
import { useFetch } from 'client/hooks/Calculation/useFetch';
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import { Box, Flex } from 'client/UIKit/grid';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import styled from 'styled-components';
|
||||
import Info from './Info';
|
||||
import fetchData from './lib/fetchData';
|
||||
import Results from './Results';
|
||||
import ResultsTable from './ResultsTable';
|
||||
import Sections from './Sections';
|
||||
|
||||
const Grid = styled(Box)`
|
||||
grid-gap: 10px;
|
||||
${mq.laptop`
|
||||
display:grid;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
`}
|
||||
${mq.laptopHD`
|
||||
grid-template-columns: 3.6fr 2fr 2.5fr;
|
||||
`};
|
||||
${mq.extra`
|
||||
grid-template-columns: 4fr 2.5fr 3fr;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Middle = () => (
|
||||
<Flex flexDirection="column" width={['100vw', '100vw', '100%']}>
|
||||
<Info />
|
||||
<Results />
|
||||
</Flex>
|
||||
);
|
||||
|
||||
const Calculation = () => {
|
||||
const { isLoading, error } = useFetch({ fetchData });
|
||||
|
||||
@ -25,41 +48,14 @@ const Calculation = () => {
|
||||
const ModalComponent = withModal(Modal);
|
||||
|
||||
return (
|
||||
<Flex
|
||||
mx={[0, 0, 0, 0, '7%']}
|
||||
mb="50px"
|
||||
flexWrap={['wrap', 'wrap', 'wrap', 'nowrap']}
|
||||
justifyContent="center"
|
||||
minHeight="800px"
|
||||
>
|
||||
<Sections
|
||||
width={['100vw', '100vw', '100vw', '700px', '850px', '1000px']}
|
||||
/>
|
||||
<Flex
|
||||
flexDirection={[
|
||||
'column',
|
||||
'column',
|
||||
'column',
|
||||
'column',
|
||||
'column',
|
||||
'row',
|
||||
]}
|
||||
>
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
minWidth={['100vw', '100vw', '100vw', '450px']}
|
||||
maxWidth={[undefined, undefined, undefined, '450px']}
|
||||
>
|
||||
<Info />
|
||||
<Results />
|
||||
</Flex>
|
||||
<ResultsTable
|
||||
minHeight="500px"
|
||||
width={['100vw', '100vw', '100vw', '540px']}
|
||||
/>
|
||||
</Flex>
|
||||
<>
|
||||
<Grid>
|
||||
<Sections width={['100vw', '100vw', '100%']} />
|
||||
<Middle />
|
||||
<ResultsTable minHeight="500px" width={['100vw', '100vw', '100%']} />
|
||||
</Grid>
|
||||
<ModalComponent />
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { Divider as AntDivider, Tabs } from 'antd';
|
||||
import { SecondaryColoredText } from 'client/Elements/Text';
|
||||
import colors from 'client/UIKit/colors';
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import { Box, Flex } from 'client/UIKit/grid';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import { Fragment } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { buildElement } from '../lib/buildElement';
|
||||
@ -13,10 +14,9 @@ const ElementTitle = styled.h5`
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
margin: 0 8px 3px 0;
|
||||
`;
|
||||
|
||||
const BreakLine = styled.div`
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const renderElements = ({ elements }) => {
|
||||
@ -24,7 +24,7 @@ const renderElements = ({ elements }) => {
|
||||
const elementTitle = elementsTitles[elementName];
|
||||
const Component = buildElement(elementName);
|
||||
return (
|
||||
<Flex flexDirection="column" key={ie} width="100%">
|
||||
<Flex flexDirection="column" key={ie}>
|
||||
<ElementTitle>{elementTitle}</ElementTitle>
|
||||
<Component />
|
||||
</Flex>
|
||||
@ -37,62 +37,56 @@ const renderBlocks = ({ blocks }) => {
|
||||
return null;
|
||||
}
|
||||
return blocks.map((block, ib) => {
|
||||
const { elements, title: blockTitle, layout } = block;
|
||||
const newLine = layout && layout.newLine;
|
||||
const width = (layout && layout.width) || '33%';
|
||||
const { elements, title: blockTitle } = block;
|
||||
return (
|
||||
<Fragment key={ib}>
|
||||
{newLine && <BreakLine />}
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
flexWrap="nowrap"
|
||||
flex={[
|
||||
'1 1 100%',
|
||||
'1 1 100%',
|
||||
`2 0 ${width}`,
|
||||
`2 0 ${width}`,
|
||||
`2 0 ${width}`,
|
||||
'3 0 30%',
|
||||
]}
|
||||
width={['100%', '100%', width]}
|
||||
mx="10px"
|
||||
>
|
||||
<Flex flexDirection="column" flexWrap="nowrap">
|
||||
{blockTitle && (
|
||||
<SecondaryColoredText>{blockTitle}</SecondaryColoredText>
|
||||
)}
|
||||
{renderElements({ elements })}
|
||||
</Flex>
|
||||
{/* {!isSingleElement && blocks.length > 1 && ib < blocks.length - 2 && (
|
||||
<VerticalDivider />
|
||||
)} */}
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const BlocksTitle = ({ text }) =>
|
||||
text ? (
|
||||
<AntDivider
|
||||
style={{
|
||||
margin: '16px 0',
|
||||
color: colors.primary,
|
||||
fontSize: '0.95rem',
|
||||
}}
|
||||
>
|
||||
{text}
|
||||
</AntDivider>
|
||||
) : null;
|
||||
|
||||
const BlocksGrid = styled(Box)`
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
|
||||
grid-template-columns: 1fr;
|
||||
${mq.laptop`
|
||||
grid-template-columns: repeat(${props =>
|
||||
props.columnsNumber || 2}, 1fr);
|
||||
`}
|
||||
`;
|
||||
|
||||
export const renderGroups = ({ groups }) => {
|
||||
if (!groups || groups.length === 0) {
|
||||
return null;
|
||||
}
|
||||
return groups.map((group, ig) => {
|
||||
const { title: blocksTitle, blocks } = group;
|
||||
const { title: blocksTitle, blocks, style } = group;
|
||||
|
||||
return (
|
||||
<Fragment key={ig}>
|
||||
{blocksTitle && (
|
||||
<AntDivider
|
||||
style={{
|
||||
margin: '16px 0',
|
||||
color: colors.primary,
|
||||
fontSize: '0.95rem',
|
||||
}}
|
||||
>
|
||||
{blocksTitle}
|
||||
</AntDivider>
|
||||
)}
|
||||
<Flex flexDirection="row" flexWrap="wrap">
|
||||
{renderBlocks({ blocks })}
|
||||
</Flex>
|
||||
</Fragment>
|
||||
<Box key={ig} my="5px">
|
||||
<BlocksTitle text={blocksTitle} />
|
||||
<BlocksGrid {...style}>{renderBlocks({ blocks })}</BlocksGrid>
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@ -7,17 +7,11 @@ const Background = styled(Box)`
|
||||
background: ${colors.WHITE[0]};
|
||||
|
||||
padding: 4px 10px;
|
||||
${mq.desktop`
|
||||
padding: 10px 18px;
|
||||
margin: 5px 0;
|
||||
${mq.laptop`
|
||||
padding: 10px 18px;
|
||||
box-shadow: 4px 5px 17px -11px rgba(0, 0, 0, 0.75);
|
||||
`}
|
||||
|
||||
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};
|
||||
// max-width: 100%;
|
||||
`;
|
||||
|
||||
export default Background;
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
import { withTableValue } from 'client/hocs/Calculation/withTable';
|
||||
import colors from 'client/UIKit/colors';
|
||||
import { Box } from 'client/UIKit/grid';
|
||||
import styled from 'styled-components';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import styled from 'styled-components';
|
||||
|
||||
// import { Button as AntButton } from 'antd';
|
||||
|
||||
const TableWrapper = styled(Box)`
|
||||
overflow-x: auto;
|
||||
table {
|
||||
${mq.desktop`
|
||||
${mq.laptop`
|
||||
width: 100%;
|
||||
overflow-x: none;
|
||||
`}
|
||||
@ -43,11 +43,13 @@ const TableWrapper = styled(Box)`
|
||||
|
||||
th,
|
||||
td {
|
||||
${mq.desktop`
|
||||
width: 25% !important;
|
||||
`}
|
||||
// ${mq.laptop`
|
||||
// width: 25% !important;
|
||||
// `}
|
||||
position: relative;
|
||||
overflow-wrap: break-word;
|
||||
// overflow-wrap: break-word;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid ${colors.WHITE[50]};
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@ const UserText = styled.span`
|
||||
font-size: 0.5rem;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 500;
|
||||
${mq.desktop`
|
||||
${mq.laptop`
|
||||
font-size: 0.75rem;
|
||||
`}
|
||||
`;
|
||||
@ -38,7 +38,7 @@ const Logout = styled.a`
|
||||
font-size: 0.45rem;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 500;
|
||||
${mq.desktop`
|
||||
${mq.laptop`
|
||||
font-size: 0.55rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
@ -2,8 +2,8 @@ import colors from 'client/UIKit/colors';
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import styled from 'styled-components';
|
||||
import Logo from './Logo';
|
||||
import Auth from './Auth';
|
||||
import Logo from './Logo';
|
||||
|
||||
const HeaderContent = styled(Flex)`
|
||||
flex-direction: column;
|
||||
@ -13,8 +13,8 @@ const HeaderContent = styled(Flex)`
|
||||
${colors.primary} 0%,
|
||||
${colors.secondary} 50%,
|
||||
${colors.tertiary} 100%)`};
|
||||
padding: 10px 12px;
|
||||
${mq.desktop`
|
||||
padding: 10px 12px;
|
||||
${mq.laptop`
|
||||
padding-left: 20px;
|
||||
flex-direction: row;
|
||||
`}
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import colors from 'client/UIKit/colors';
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import styled from 'styled-components';
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import colors from 'client/UIKit/colors';
|
||||
|
||||
const LOGO_NAME = 'logo-1line-AL-white-h100-short.png';
|
||||
|
||||
const Image = styled.img`
|
||||
height: 1.2rem;
|
||||
|
||||
${mq.desktop`
|
||||
${mq.laptop`
|
||||
height: 1.5rem
|
||||
`}
|
||||
`;
|
||||
@ -21,7 +21,7 @@ const LogoText = styled.h3`
|
||||
font-size: 0.95rem;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 500;
|
||||
${mq.desktop`
|
||||
${mq.laptop`
|
||||
font-size: 1.2rem;
|
||||
margin-top: -2px;
|
||||
`}
|
||||
|
||||
@ -1,11 +1,27 @@
|
||||
import { Flex } from 'client/UIKit/grid';
|
||||
import { Box, Flex } from 'client/UIKit/grid';
|
||||
import mq from 'client/UIKit/mq';
|
||||
import styled from 'styled-components';
|
||||
import Header from './Header';
|
||||
import Routes from './routes';
|
||||
|
||||
const Main = styled(Box)`
|
||||
${mq.laptop`
|
||||
margin: 3px 8px;
|
||||
`}
|
||||
${mq.desktop`
|
||||
margin: 3px 7%;
|
||||
`}
|
||||
${mq.extra`
|
||||
margin: 3px 15%;
|
||||
`}
|
||||
`;
|
||||
|
||||
const Layout = () => (
|
||||
<Flex flexDirection="column">
|
||||
<Header />
|
||||
<Routes />
|
||||
<Main>
|
||||
<Routes />
|
||||
</Main>
|
||||
</Flex>
|
||||
);
|
||||
|
||||
|
||||
@ -1,61 +1,44 @@
|
||||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
/* eslint-disable no-undef */
|
||||
const createColorProxy = require('./lib/createColorProxy');
|
||||
|
||||
const colors = {
|
||||
BLACK: createColorProxy(
|
||||
{
|
||||
0: '#000000',
|
||||
100: '#121212',
|
||||
200: '#242424',
|
||||
300: '#373737',
|
||||
400: '#494949',
|
||||
500: '#5B5B5B',
|
||||
},
|
||||
'black',
|
||||
0,
|
||||
),
|
||||
BLACK: {
|
||||
0: '#000000',
|
||||
100: '#121212',
|
||||
200: '#242424',
|
||||
300: '#373737',
|
||||
400: '#494949',
|
||||
500: '#5B5B5B',
|
||||
},
|
||||
|
||||
WHITE: createColorProxy(
|
||||
{
|
||||
0: '#FFFFFF',
|
||||
25: '#FAFAFA',
|
||||
50: '#F0F0F0',
|
||||
100: '#EDEDED',
|
||||
200: '#DBDBDB',
|
||||
300: '#C8C8C8',
|
||||
400: '#B6B6B6',
|
||||
500: '#A4A4A4',
|
||||
},
|
||||
'white',
|
||||
0,
|
||||
),
|
||||
WHITE: {
|
||||
0: '#FFFFFF',
|
||||
25: '#FAFAFA',
|
||||
50: '#F0F0F0',
|
||||
100: '#EDEDED',
|
||||
200: '#DBDBDB',
|
||||
300: '#C8C8C8',
|
||||
400: '#B6B6B6',
|
||||
500: '#A4A4A4',
|
||||
},
|
||||
|
||||
BLUE: createColorProxy(
|
||||
{
|
||||
0: '#1C01A9',
|
||||
100: '#1B019B',
|
||||
200: '#190190',
|
||||
300: '#160184',
|
||||
400: '#140178',
|
||||
500: '#12016C',
|
||||
},
|
||||
'blue',
|
||||
'#1C01A9',
|
||||
),
|
||||
BLUE: {
|
||||
0: '#1C01A9',
|
||||
100: '#1B019B',
|
||||
200: '#190190',
|
||||
300: '#160184',
|
||||
400: '#140178',
|
||||
500: '#12016C',
|
||||
},
|
||||
|
||||
PURPLE: createColorProxy(
|
||||
{
|
||||
0: '#300191',
|
||||
100: '#3A0185',
|
||||
200: '#440179',
|
||||
300: '#4E016D',
|
||||
400: '#580161',
|
||||
500: '#620256',
|
||||
},
|
||||
'blue',
|
||||
'#1C01A9',
|
||||
),
|
||||
PURPLE: {
|
||||
0: '#300191',
|
||||
100: '#3A0185',
|
||||
200: '#440179',
|
||||
300: '#4E016D',
|
||||
400: '#580161',
|
||||
500: '#620256',
|
||||
},
|
||||
};
|
||||
|
||||
const colorTheme = {
|
||||
|
||||
@ -1,121 +1,2 @@
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
position,
|
||||
space,
|
||||
display,
|
||||
width,
|
||||
height,
|
||||
maxWidth,
|
||||
minWidth,
|
||||
minHeight,
|
||||
flex,
|
||||
alignSelf,
|
||||
flexDirection,
|
||||
flexWrap,
|
||||
justifyContent,
|
||||
alignItems,
|
||||
textAlign,
|
||||
lineHeight,
|
||||
fontWeight,
|
||||
letterSpacing,
|
||||
color,
|
||||
zIndex,
|
||||
backgroundImage,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
left,
|
||||
order,
|
||||
maxHeight,
|
||||
borders,
|
||||
borderColor,
|
||||
fontSize,
|
||||
borderRadius,
|
||||
} from 'styled-system';
|
||||
import {
|
||||
overflow,
|
||||
opacity,
|
||||
verticalAlign,
|
||||
userSelect,
|
||||
textTransform,
|
||||
whiteSpace,
|
||||
backgroundColor,
|
||||
flexShrink,
|
||||
fill,
|
||||
} from './lib/customStyleProps';
|
||||
|
||||
export const BOX_STYLED_SYSTEM = [
|
||||
space,
|
||||
width,
|
||||
height,
|
||||
minWidth,
|
||||
maxWidth,
|
||||
minHeight,
|
||||
maxHeight,
|
||||
overflow,
|
||||
opacity,
|
||||
alignSelf,
|
||||
display,
|
||||
textAlign,
|
||||
position,
|
||||
color,
|
||||
flex,
|
||||
order,
|
||||
top,
|
||||
right,
|
||||
bottom,
|
||||
left,
|
||||
zIndex,
|
||||
backgroundColor,
|
||||
backgroundImage,
|
||||
backgroundSize,
|
||||
backgroundPosition,
|
||||
verticalAlign,
|
||||
borders,
|
||||
borderColor,
|
||||
borderRadius,
|
||||
userSelect,
|
||||
whiteSpace,
|
||||
justifyContent,
|
||||
flexShrink,
|
||||
fill,
|
||||
];
|
||||
|
||||
export const TEXT_STYLED_SYSTEM = [
|
||||
lineHeight,
|
||||
fontSize,
|
||||
fontWeight,
|
||||
letterSpacing,
|
||||
textTransform,
|
||||
color,
|
||||
];
|
||||
|
||||
export const Box = styled.div({}, ...BOX_STYLED_SYSTEM, props => props.style);
|
||||
Box.displayName = 'Box';
|
||||
|
||||
export const Flex = styled(Box)(
|
||||
{
|
||||
display: 'flex',
|
||||
},
|
||||
flexDirection,
|
||||
flexWrap,
|
||||
justifyContent,
|
||||
alignItems
|
||||
);
|
||||
Flex.displayName = 'Flex';
|
||||
|
||||
export const Text = styled.span(...BOX_STYLED_SYSTEM, ...TEXT_STYLED_SYSTEM);
|
||||
Text.displayName = 'Text';
|
||||
|
||||
export const Image = styled.img`
|
||||
display: block;
|
||||
${display};
|
||||
${position};
|
||||
${width};
|
||||
${height};
|
||||
${flex};
|
||||
${maxHeight};
|
||||
${maxWidth};
|
||||
`;
|
||||
import { Box, Flex } from 'rebass/styled-components';
|
||||
export { Box, Flex };
|
||||
|
||||
@ -1,25 +0,0 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* eslint-disable indent */
|
||||
const createColorProxy =
|
||||
process.env.NODE_ENV === 'development' && typeof Proxy !== 'undefined'
|
||||
? (obj, colorName) => {
|
||||
return new Proxy(obj, {
|
||||
get(target, name) {
|
||||
if (
|
||||
typeof name === 'number' &&
|
||||
!(name in target) &&
|
||||
process.env.NODE_ENV !== 'production'
|
||||
) {
|
||||
console.error(
|
||||
`You are trying to get color ${colorName}[${name}] that doesn't exist`
|
||||
);
|
||||
}
|
||||
|
||||
return target[name];
|
||||
}
|
||||
});
|
||||
}
|
||||
: x => x;
|
||||
/* eslint-enable indent */
|
||||
|
||||
module.exports = createColorProxy;
|
||||
@ -1,46 +0,0 @@
|
||||
import { style } from 'styled-system';
|
||||
|
||||
export const overflow = style({
|
||||
prop: 'overflow',
|
||||
cssProperty: 'overflow',
|
||||
});
|
||||
|
||||
export const opacity = style({
|
||||
prop: 'opacity',
|
||||
cssProperty: 'opacity',
|
||||
});
|
||||
|
||||
export const verticalAlign = style({
|
||||
prop: 'verticalAlign',
|
||||
cssProperty: 'verticalAlign',
|
||||
});
|
||||
|
||||
export const userSelect = style({
|
||||
prop: 'userSelect',
|
||||
cssProperty: 'userSelect',
|
||||
});
|
||||
|
||||
export const textTransform = style({
|
||||
prop: 'textTransform',
|
||||
cssProperty: 'textTransform',
|
||||
});
|
||||
|
||||
export const whiteSpace = style({
|
||||
prop: 'whiteSpace',
|
||||
cssProperty: 'whiteSpace',
|
||||
});
|
||||
|
||||
export const backgroundColor = style({
|
||||
prop: 'backgroundColor',
|
||||
cssProperty: 'backgroundColor',
|
||||
});
|
||||
|
||||
export const flexShrink = style({
|
||||
prop: 'flexShrink',
|
||||
cssProperty: 'flexShrink',
|
||||
});
|
||||
|
||||
export const fill = style({
|
||||
prop: 'fill',
|
||||
cssProperty: 'fill',
|
||||
});
|
||||
@ -1,18 +1,11 @@
|
||||
import { css } from 'styled-components';
|
||||
|
||||
export const screens = {
|
||||
small: 320,
|
||||
mobile: 480,
|
||||
tablet640: 640,
|
||||
tablet: 768,
|
||||
desktop900: 900,
|
||||
desktop: 1024,
|
||||
desktop1280: 1280,
|
||||
desktop1366: 1366,
|
||||
desktop1440: 1440,
|
||||
desktop1680: 1680,
|
||||
desktop1920: 1920,
|
||||
desktop2560: 2560
|
||||
laptop: 1024,
|
||||
laptopHD: 1366,
|
||||
desktop: 1680,
|
||||
extra: 2560,
|
||||
};
|
||||
|
||||
export const query = Object.keys(screens).reduce((acc, label) => {
|
||||
|
||||
@ -3,11 +3,10 @@ import { screens } from './mq';
|
||||
const ALLOWED_BREAKPOINTS = [
|
||||
//'less'
|
||||
'tablet',
|
||||
'laptop',
|
||||
'laptopHD',
|
||||
'desktop',
|
||||
'desktop1280',
|
||||
'desktop1440',
|
||||
'desktop1920',
|
||||
'desktop2560',
|
||||
'extra',
|
||||
];
|
||||
|
||||
export default {
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||
<g fill="#61DAFB">
|
||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||
<path d="M520.5 78.1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.6 KiB |
@ -1,7 +1,7 @@
|
||||
import {
|
||||
ElementsNames,
|
||||
ResultElementsNames,
|
||||
LinkElementsNames,
|
||||
ResultElementsNames,
|
||||
} from './Store/elements';
|
||||
import { TableNames, TableValuesNames } from './Store/tables';
|
||||
|
||||
@ -33,13 +33,13 @@ interface IBlock {
|
||||
| TableNames
|
||||
| LinkElementsNames
|
||||
)[];
|
||||
layout?: { [key: string]: any };
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface IGroup {
|
||||
title?: string;
|
||||
blocks?: IBlock[];
|
||||
style?: { [key: string]: any };
|
||||
}
|
||||
|
||||
export interface ISection {
|
||||
|
||||
Reference in New Issue
Block a user