From f637e073bd8cbc0b41410f21bd39604f9ecac6d5 Mon Sep 17 00:00:00 2001
From: Piotr Rogowski <piotr.rogowski0@gmail.com>
Date: Sun, 16 Jan 2022 18:53:36 +0100
Subject: [PATCH] Fix for mobile (#379)

---
 src/components/TopBar.tsx | 14 +++++++-------
 src/pages/Info.tsx        | 25 +++++++++++++------------
 src/pages/Upload.tsx      | 25 +++++++++++++------------
 src/themes/common.less    |  2 +-
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index eff4ddd..1b4fd07 100644
--- a/src/components/TopBar.tsx
+++ b/src/components/TopBar.tsx
@@ -107,7 +107,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
   });
 
   const tabs = (
-    <Col span={10} md={10} sm={16} style={{ textAlign: 'center' }}>
+    <Col span={14} md={12} sm={16} style={{ textAlign: 'center' }}>
       <Radio.Group
         key={pathname}
         defaultValue={matchedTabPath?.url || matchedTuneRootPath?.url}
@@ -146,11 +146,11 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
   return (
     <Header className="app-top-bar">
       <Row>
-        <Col span={0} md={6} sm={0} />
+        <Col span={0} md={4} sm={0} />
         {tuneId ? tabs : <Col span={10} md={10} sm={16} />}
-        <Col span={12} md={8} sm={8} style={{ textAlign: 'right' }}>
+        <Col span={10} md={8} sm={8} style={{ textAlign: 'right' }}>
           <Space>
-            <Tooltip visible={false} title={
+            {sm && <Tooltip visible={false} title={
               <>
                 <Typography.Text keyboard>{isMac ? '⌘' : 'CTRL'}</Typography.Text>
                 <Typography.Text keyboard>SHIFT</Typography.Text>
@@ -158,7 +158,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
               </>
             }>
               <Button disabled icon={<SearchOutlined />} ref={searchInput} />
-            </Tooltip>
+            </Tooltip>}
             <Link to={Routes.UPLOAD}>
               <Button icon={<CloudUploadOutlined />} type={matchedTabPath?.url === Routes.UPLOAD ? 'primary' : 'default'}>
                 {lg && 'Upload'}
@@ -195,7 +195,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
             >
               <Button icon={<CloudDownloadOutlined />}>
                 {lg && 'Download'}
-                <DownOutlined />
+                {sm && <DownOutlined />}
               </Button>
             </Dropdown>
             <Dropdown
@@ -224,7 +224,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
               trigger={['click']}
             >
               <Button icon={<UserOutlined />}>
-                <DownOutlined />
+                {sm && <DownOutlined />}
               </Button>
             </Dropdown>
           </Space>
diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx
index c3c9bf3..0bdf02c 100644
--- a/src/pages/Info.tsx
+++ b/src/pages/Info.tsx
@@ -21,6 +21,7 @@ const containerStyle = {
   margin: '0 auto',
 };
 const rowProps = { gutter: 10 };
+const colProps = { span: 24, sm: 12 };
 
 const mapStateToProps = (state: AppState) => ({
   tuneData: state.tuneData,
@@ -40,55 +41,55 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
       <Divider>Details</Divider>
       <Form>
         <Row {...rowProps}>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.make!} addonBefore="Make" />
             </Item>
           </Col>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.model!} addonBefore="Model" />
             </Item>
           </Col>
         </Row>
         <Row {...rowProps}>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.year!} addonBefore="Year" style={{ width: '100%' }} />
             </Item>
           </Col>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.displacement!} addonBefore="Displacement" addonAfter="l" />
             </Item>
           </Col>
         </Row>
         <Row {...rowProps}>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.hp!} addonBefore="HP" style={{ width: '100%' }} />
             </Item>
           </Col>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.stockHp!} addonBefore="Stock HP" style={{ width: '100%' }} />
             </Item>
           </Col>
         </Row>
         <Row {...rowProps}>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.engineCode!} addonBefore="Engine code" />
             </Item>
           </Col>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.cylindersCount!} addonBefore="No of cylinders" style={{ width: '100%' }} />
             </Item>
           </Col>
         </Row>
         <Row {...rowProps}>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Select placeholder="Aspiration" style={{ width: '100%' }} value={tuneData.details.aspiration}>
                 <Select.Option value="na">Naturally aspirated</Select.Option>
@@ -97,19 +98,19 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
               </Select>
             </Item>
           </Col>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.fuel!} addonBefore="Fuel" />
             </Item>
           </Col>
         </Row>
         <Row {...rowProps}>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.injectorsSize!} addonBefore="Injectors size" addonAfter="cc" />
             </Item>
           </Col>
-          <Col span={12}>
+          <Col {...colProps}>
             <Item>
               <Input value={tuneData.details.coils!} addonBefore="Coils" />
             </Item>
diff --git a/src/pages/Upload.tsx b/src/pages/Upload.tsx
index bb87405..70e1ed1 100644
--- a/src/pages/Upload.tsx
+++ b/src/pages/Upload.tsx
@@ -92,6 +92,7 @@ const containerStyle = {
 const maxFileSizeMB = 10;
 const descriptionEditorHeight = 260;
 const rowProps = { gutter: 10 };
+const colProps = { span: 24, sm: 12 };
 
 const tuneIcon = () => <ToolOutlined />;
 const logIcon = () => <FundOutlined />;
@@ -492,55 +493,55 @@ const UploadPage = () => {
         <Space>Details</Space>
       </Divider>
       <Row {...rowProps}>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="make" rules={requiredRules}>
             <Input addonBefore="Make"/>
           </Item>
         </Col>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="model" rules={requiredRules}>
             <Input addonBefore="Model"/>
           </Item>
         </Col>
       </Row>
       <Row {...rowProps}>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="year" rules={requiredRules}>
             <InputNumber addonBefore="Year" style={{ width: '100%' }} min={1886} max={2222} />
           </Item>
         </Col>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="displacement" rules={requiredRules}>
             <InputNumber addonBefore="Displacement" addonAfter="l" min={0} max={100} />
           </Item>
         </Col>
       </Row>
       <Row {...rowProps}>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="hp">
             <InputNumber addonBefore="HP" style={{ width: '100%' }} min={0} />
           </Item>
         </Col>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="stockHp">
             <InputNumber addonBefore="Stock HP" style={{ width: '100%' }} min={0} />
           </Item>
         </Col>
       </Row>
       <Row {...rowProps}>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="engineCode">
             <Input addonBefore="Engine code"/>
           </Item>
         </Col>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="cylindersCount">
             <InputNumber addonBefore="No of cylinders" style={{ width: '100%' }} min={0} />
           </Item>
         </Col>
       </Row>
       <Row {...rowProps}>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="aspiration">
             <Select placeholder="Aspiration" style={{ width: '100%' }}>
               <Select.Option value="na">Naturally aspirated</Select.Option>
@@ -549,19 +550,19 @@ const UploadPage = () => {
             </Select>
           </Item>
         </Col>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="fuel">
             <Input addonBefore="Fuel" />
           </Item>
         </Col>
       </Row>
       <Row {...rowProps}>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="injectorsSize">
             <InputNumber addonBefore="Injectors size" addonAfter="cc" min={0} />
           </Item>
         </Col>
-        <Col span={12}>
+        <Col {...colProps}>
           <Item name="coils">
             <Input addonBefore="Coils" />
           </Item>
diff --git a/src/themes/common.less b/src/themes/common.less
index bfb5dc0..27f8eff 100644
--- a/src/themes/common.less
+++ b/src/themes/common.less
@@ -1,7 +1,7 @@
 @primary-color: #126ec3;
 @text-light: #fff;
 
-@border-radius-base: 5px;
+@border-radius-base: 6px;
 
 @layout-header-padding: 0 15px;
 @layout-header-height: 45px;