From a5eae4954e6173a7c667a8533d2d66abe3295a3a Mon Sep 17 00:00:00 2001 From: Chika Date: Fri, 23 Apr 2021 09:39:52 +0300 Subject: [PATCH] merge refactor/layout-fixes-grid --- package.json | 6 +- src/client/Components/Spinner.jsx | 2 +- .../Containers/Calculation/Info/infoList.ts | 18 +-- .../Calculation/Results/resultsList.ts | 1 + .../ResultsTable/resultsTableList.ts | 4 +- .../Calculation/Sections/sectionsList.ts | 62 +++++---- src/client/Containers/Calculation/index.jsx | 66 +++++----- .../Calculation/lib/renderSections.js | 82 ++++++------ src/client/Elements/Background.jsx | 14 +- src/client/Elements/Table.jsx | 14 +- src/client/Layout/Auth.jsx | 4 +- src/client/Layout/Header.jsx | 6 +- src/client/Layout/Logo.jsx | 8 +- src/client/Layout/index.jsx | 20 ++- src/client/UIKit/colors.js | 85 +++++------- src/client/UIKit/grid.js | 123 +----------------- src/client/UIKit/lib/createColorProxy.js | 25 ---- src/client/UIKit/lib/customStyleProps.js | 46 ------- src/client/UIKit/mq.js | 15 +-- src/client/UIKit/theme.js | 7 +- src/client/logo.svg | 7 - src/core/types/Calculation/components.ts | 4 +- 22 files changed, 204 insertions(+), 415 deletions(-) delete mode 100644 src/client/UIKit/lib/createColorProxy.js delete mode 100644 src/client/UIKit/lib/customStyleProps.js delete mode 100644 src/client/logo.svg diff --git a/package.json b/package.json index a9f0e3f..396122d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/client/Components/Spinner.jsx b/src/client/Components/Spinner.jsx index 28e712f..99b50c6 100644 --- a/src/client/Components/Spinner.jsx +++ b/src/client/Components/Spinner.jsx @@ -1,5 +1,5 @@ -import { Box, Flex } from 'client/UIKit/grid'; import { Spin } from 'antd'; +import { Box, Flex } from 'rebass/styled-components'; export default () => ( diff --git a/src/client/Containers/Calculation/Info/infoList.ts b/src/client/Containers/Calculation/Info/infoList.ts index 571b49d..1ec5bbe 100644 --- a/src/client/Containers/Calculation/Info/infoList.ts +++ b/src/client/Containers/Calculation/Info/infoList.ts @@ -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: [ { diff --git a/src/client/Containers/Calculation/Results/resultsList.ts b/src/client/Containers/Calculation/Results/resultsList.ts index 67be8d1..3818e48 100644 --- a/src/client/Containers/Calculation/Results/resultsList.ts +++ b/src/client/Containers/Calculation/Results/resultsList.ts @@ -2,6 +2,7 @@ import { IGroup } from 'core/types/Calculation/components'; export const calculationResults: IGroup[] = [ { + style: { columnsNumber: 1 }, blocks: [ { title: 'Результаты', diff --git a/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts b/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts index aa0f220..c3f84fb 100644 --- a/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts +++ b/src/client/Containers/Calculation/ResultsTable/resultsTableList.ts @@ -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'], }, ], diff --git a/src/client/Containers/Calculation/Sections/sectionsList.ts b/src/client/Containers/Calculation/Sections/sectionsList.ts index 34c35f1..cb5c3a2 100644 --- a/src/client/Containers/Calculation/Sections/sectionsList.ts +++ b/src/client/Containers/Calculation/Sections/sectionsList.ts @@ -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'], diff --git a/src/client/Containers/Calculation/index.jsx b/src/client/Containers/Calculation/index.jsx index cfbe520..e7d530d 100644 --- a/src/client/Containers/Calculation/index.jsx +++ b/src/client/Containers/Calculation/index.jsx @@ -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 = () => ( + + + + +); + const Calculation = () => { const { isLoading, error } = useFetch({ fetchData }); @@ -25,41 +48,14 @@ const Calculation = () => { const ModalComponent = withModal(Modal); return ( - - - - - - - - - + <> + + + + + - + ); }; diff --git a/src/client/Containers/Calculation/lib/renderSections.js b/src/client/Containers/Calculation/lib/renderSections.js index e785758..b3cc79c 100644 --- a/src/client/Containers/Calculation/lib/renderSections.js +++ b/src/client/Containers/Calculation/lib/renderSections.js @@ -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 ( - + {elementTitle} @@ -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 ( - {newLine && } - + {blockTitle && ( {blockTitle} )} {renderElements({ elements })} - {/* {!isSingleElement && blocks.length > 1 && ib < blocks.length - 2 && ( - - )} */} ); }); }; +const BlocksTitle = ({ text }) => + text ? ( + + {text} + + ) : 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 ( - - {blocksTitle && ( - - {blocksTitle} - - )} - - {renderBlocks({ blocks })} - - + + + {renderBlocks({ blocks })} + ); }); }; diff --git a/src/client/Elements/Background.jsx b/src/client/Elements/Background.jsx index 40c58b5..50be663 100644 --- a/src/client/Elements/Background.jsx +++ b/src/client/Elements/Background.jsx @@ -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; diff --git a/src/client/Elements/Table.jsx b/src/client/Elements/Table.jsx index 042c944..386ea3b 100644 --- a/src/client/Elements/Table.jsx +++ b/src/client/Elements/Table.jsx @@ -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]}; } diff --git a/src/client/Layout/Auth.jsx b/src/client/Layout/Auth.jsx index 23c31c4..d6760da 100644 --- a/src/client/Layout/Auth.jsx +++ b/src/client/Layout/Auth.jsx @@ -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; `} `; diff --git a/src/client/Layout/Header.jsx b/src/client/Layout/Header.jsx index 5b7bb61..db4138a 100644 --- a/src/client/Layout/Header.jsx +++ b/src/client/Layout/Header.jsx @@ -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; `} diff --git a/src/client/Layout/Logo.jsx b/src/client/Layout/Logo.jsx index b513ab2..876ad06 100644 --- a/src/client/Layout/Logo.jsx +++ b/src/client/Layout/Logo.jsx @@ -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; `} diff --git a/src/client/Layout/index.jsx b/src/client/Layout/index.jsx index d60448e..4d45bf3 100644 --- a/src/client/Layout/index.jsx +++ b/src/client/Layout/index.jsx @@ -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 = () => (
- +
+ +
); diff --git a/src/client/UIKit/colors.js b/src/client/UIKit/colors.js index 367b4f3..429d011 100644 --- a/src/client/UIKit/colors.js +++ b/src/client/UIKit/colors.js @@ -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 = { diff --git a/src/client/UIKit/grid.js b/src/client/UIKit/grid.js index 982f2ea..406aa45 100644 --- a/src/client/UIKit/grid.js +++ b/src/client/UIKit/grid.js @@ -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 }; diff --git a/src/client/UIKit/lib/createColorProxy.js b/src/client/UIKit/lib/createColorProxy.js deleted file mode 100644 index d6d5b4f..0000000 --- a/src/client/UIKit/lib/createColorProxy.js +++ /dev/null @@ -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; diff --git a/src/client/UIKit/lib/customStyleProps.js b/src/client/UIKit/lib/customStyleProps.js deleted file mode 100644 index 95b5511..0000000 --- a/src/client/UIKit/lib/customStyleProps.js +++ /dev/null @@ -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', -}); diff --git a/src/client/UIKit/mq.js b/src/client/UIKit/mq.js index 0e7fed2..828ba24 100644 --- a/src/client/UIKit/mq.js +++ b/src/client/UIKit/mq.js @@ -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) => { diff --git a/src/client/UIKit/theme.js b/src/client/UIKit/theme.js index 0e55b42..aeb4fe2 100644 --- a/src/client/UIKit/theme.js +++ b/src/client/UIKit/theme.js @@ -3,11 +3,10 @@ import { screens } from './mq'; const ALLOWED_BREAKPOINTS = [ //'less' 'tablet', + 'laptop', + 'laptopHD', 'desktop', - 'desktop1280', - 'desktop1440', - 'desktop1920', - 'desktop2560', + 'extra', ]; export default { diff --git a/src/client/logo.svg b/src/client/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/src/client/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/core/types/Calculation/components.ts b/src/core/types/Calculation/components.ts index 051c0cb..4a80912 100644 --- a/src/core/types/Calculation/components.ts +++ b/src/core/types/Calculation/components.ts @@ -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 {