feat: adapt Forms for mobile

5 files changed, 24 insertions, 33 deletions

diff --git a/src/containers/ContractorForm.tsx b/src/containers/ContractorForm.tsx
index c78ed9b..56d38be 100644
--- a/src/containers/ContractorForm.tsx
+++ b/src/containers/ContractorForm.tsx
@@ -5,10 +5,8 @@ import Input from '../components/Input';
 const ContractorForm: React.FC = () => {
   return (
     <Form id="form">
-      <div className="max-w-lg">
-        <Input name="name" label="Название" />
-        <Input name="vatId" label="УНП" />
-      </div>
+      <Input name="name" label="Название" />
+      <Input name="vatId" label="УНП" />
     </Form>
   );
 };
diff --git a/src/containers/ProductForm.tsx b/src/containers/ProductForm.tsx
index d99d3c6..060fbbb 100644
--- a/src/containers/ProductForm.tsx
+++ b/src/containers/ProductForm.tsx
@@ -6,10 +6,8 @@ import Input from '../components/Input';
 const ProductForm: React.FC = () => {
   return (
     <Form id="form">
-      <div className="max-w-lg">
-        <Input name="name" label="Название" />
-        <Input name="price" type="number" label="Цена ($)" />
-      </div>
+      <Input name="name" label="Название" />
+      <Input name="price" type="number" label="Цена ($)" />
     </Form>
   );
 };
diff --git a/src/containers/Service/ServiceItem.tsx b/src/containers/Service/ServiceItem.tsx
index 585f609..c1f5446 100644
--- a/src/containers/Service/ServiceItem.tsx
+++ b/src/containers/Service/ServiceItem.tsx
@@ -40,16 +40,14 @@ const ServiceItem: React.FC = () => {
     <Page
       title={id ? item?.name : `Новый ${service.nameSingular}`}
       actions={actions}
-      className="flex"
+      className="grid lg:grid-cols-2"
     >
       {(!id || item) && (
-        <div className="w-1/3">
-          <Formik
-            initialValues={_.defaults(item, service.default)}
-            onSubmit={onSubmit}
-            children={service.Form}
-          />
-        </div>
+        <Formik
+          initialValues={_.defaults(item, service.default)}
+          onSubmit={onSubmit}
+          children={service.Form}
+        />
       )}
       {item && service.Panel && <service.Panel item={item} mutate={mutate} />}
     </Page>
diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx
index 4b2e3fa..bd326d2 100644
--- a/src/containers/WaybillForm.tsx
+++ b/src/containers/WaybillForm.tsx
@@ -34,7 +34,7 @@ const WaybillForm: React.FC<FormikProps> = ({ setFieldValue, values }) => {
         ]}
       />
       {_.times(recordsNumber).map(index => (
-        <Paper variant="outlined" className="m-4">
+        <Paper variant="outlined" className="my-4 md:mx-4">
           <Select
             name={`records.${index}.productId`}
             label="Товар"
diff --git a/src/containers/WaybillPanel.tsx b/src/containers/WaybillPanel.tsx
index 386d8bb..d74ef1e 100644
--- a/src/containers/WaybillPanel.tsx
+++ b/src/containers/WaybillPanel.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import Input from '../components/Input';
 import Button from '../components/Button';
-import Paper from '../components/Paper';
 import { patch, get, baseURL } from '../requests';
 import { PanelProps } from './Service/ServiceContext';
 
@@ -24,21 +23,19 @@ const WaybillPanel: React.FC<PanelProps> = ({ item, mutate }) => {
   const executed = item.status === 'executed';
 
   return (
-    <div className="m-4 p-4 pl-16 border-l flex flex-col">
-      <p className="text-lg">
-        Итоговая сумма: ${item.total}
-      </p>
-      <Button route={`/contractors/${item.contractorId}`} variant="outlined">
-        Перейти к контрагенту
-      </Button>
-      <Button onClick={handlePrint}>
-        Печать
-      </Button>
-      {
-        executed
-          ? <Button onClick={handleCancel}>Откатить</Button>
-          : <Button onClick={handleExecute}>Провести</Button>
-      }
+    <div className="lg:m-4 p-4 flex flex-col lg:pl-16 lg:border-l">
+      <div className="grid lg:grid-cols-2">
+        <Button route={`/contractors/${item.contractorId}`} variant="outlined">
+          Перейти к контрагенту
+        </Button>
+        <Button onClick={handlePrint} variant="outlined">
+          Печать
+        </Button>
+        <span className="text-lg text-center mt-4">Итоговая сумма: ${item.total}</span>
+        <Button onClick={executed ? handleCancel : handleExecute} size="lg">
+          {executed ? 'Откатить' : 'Провести'}
+        </Button>
+      </div>
     </div>
   );
 };