diff --git a/Components/Calculation/Form/index.jsx b/Components/Calculation/Form/index.jsx index e73f3d3..a4a0c1e 100644 --- a/Components/Calculation/Form/index.jsx +++ b/Components/Calculation/Form/index.jsx @@ -1,5 +1,7 @@ import Background from 'Elements/layout/Background'; -import { Tabs, Wrapper } from 'Elements/layout/Tabs'; +import Tabs from 'Elements/layout/Tabs'; +import styled from 'styled-components'; +import { min } from 'UIKit/mq'; import AddProduct from './AddProduct'; import CreateKP from './CreateKP'; import Insurance from './Insurance'; @@ -10,15 +12,21 @@ import SupplierAgent from './SupplierAgent'; const formTabs = [Leasing, Payments, LeasingObject, SupplierAgent, Insurance, AddProduct, CreateKP]; +const Wrapper = styled(Background)` + padding: 4px 10px; + + ${min('laptop')} { + padding: 4px 18px 10px; + } +`; + function Form() { return ( {formTabs.map(({ id, title, Component }) => ( - - - + ))} diff --git a/Components/Calculation/Settings/index.js b/Components/Calculation/Settings/index.js index 141fc2f..fdcd3a4 100644 --- a/Components/Calculation/Settings/index.js +++ b/Components/Calculation/Settings/index.js @@ -1,7 +1,17 @@ import Background from 'Elements/layout/Background'; +import styled from 'styled-components'; +import { min } from 'UIKit/mq'; import renderFormRows from '../lib/render-rows'; import { rows } from './config'; +const Wrapper = styled(Background)` + padding: 4px 10px; + + ${min('laptop')} { + padding: 10px 18px; + } +`; + export default function Settings() { - return {renderFormRows(rows)}; + return {renderFormRows(rows)}; } diff --git a/Components/Calculation/config/elements-titles.ts b/Components/Calculation/config/elements-titles.ts index b1dcab9..61e3a7d 100644 --- a/Components/Calculation/config/elements-titles.ts +++ b/Components/Calculation/config/elements-titles.ts @@ -7,7 +7,7 @@ const titles: Record selectOpportunity: 'Лизинговая сделка', selectQuote: 'Предложение', selectProduct: 'Продукт', - cbxRecalcWithRevision: 'Пересчёт без пересмотра', + cbxRecalcWithRevision: '', selectClientRisk: 'Риск клиента', selectClientType: 'Тип клиента', tbxLeaseObjectPrice: 'Стоимость ПЛ с НДС', diff --git a/Components/Calculation/index.js b/Components/Calculation/index.js index d203e87..38d914e 100644 --- a/Components/Calculation/index.js +++ b/Components/Calculation/index.js @@ -1,9 +1,28 @@ import styled from 'styled-components'; import { Box } from 'UIKit/grid'; +import { min } from 'UIKit/mq'; import Form from './Form'; import Settings from './Settings'; -const Grid = styled(Box)``; +const Grid = styled(Box)` + display: flex; + flex-direction: column; + gap: 10px; + + ${min('laptop')} { + display: grid; + grid-template-columns: 2fr 1fr; + } + + ${min('desktop')} { + grid-template-columns: 2fr 1fr 1.5fr; + margin: 8px 5%; + } + + ${min('desktop-xl')} { + margin: 8px 10%; + } +`; export default function Calculation() { return ( diff --git a/Elements/layout/Background.jsx b/Elements/layout/Background.jsx index f93333e..bdde6ee 100644 --- a/Elements/layout/Background.jsx +++ b/Elements/layout/Background.jsx @@ -5,10 +5,7 @@ import { min } from 'UIKit/mq'; const Background = styled(Box)` background: #fff; - padding: 4px 10px; - ${min('laptop')} { - padding: 10px 18px; box-shadow: 0px 2px 15px -11px rgba(0, 0, 0, 0.75); } `; diff --git a/Elements/layout/Tabs.js b/Elements/layout/Tabs.js index 8ee2c26..a9ab6a6 100644 --- a/Elements/layout/Tabs.js +++ b/Elements/layout/Tabs.js @@ -1,13 +1,4 @@ /* eslint-disable unicorn/filename-case */ -import styled from 'styled-components'; +/* eslint-disable no-restricted-exports */ -export { Tabs } from 'antd'; - -export const Wrapper = styled.div` - .ant-tabs-top > .ant-tabs-nav { - margin: 0; - } - .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab { - border: none; - } -`; +export { Tabs as default } from 'antd'; diff --git a/UIKit/mq.ts b/UIKit/mq.ts index f697616..27d55b6 100644 --- a/UIKit/mq.ts +++ b/UIKit/mq.ts @@ -1,9 +1,8 @@ const screens = { tablet: 768, laptop: 1024, - laptopHD: 1366, desktop: 1680, - extra: 2560, + 'desktop-xl': 1921, }; const threshold = 0;