noisymime
/
hyper-tuner-cloud
mirror of https://github.com/noisymime/hyper-tuner-cloud.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix for mobile (#379)

This commit is contained in:
Piotr Rogowski 2022-01-16 18:53:36 +01:00 committed by GitHub
parent c53cd0dcc3
commit f637e073bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/TopBar.tsx
View File

@ -107,7 +107,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
}); });
const tabs = ( const tabs = (
<Col span={10} md={10} sm={16} style={{ textAlign: 'center' }}> <Col span={14} md={12} sm={16} style={{ textAlign: 'center' }}>
<Radio.Group <Radio.Group
key={pathname} key={pathname}
defaultValue={matchedTabPath?.url || matchedTuneRootPath?.url} defaultValue={matchedTabPath?.url || matchedTuneRootPath?.url}
@ -146,11 +146,11 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
return ( return (
<Header className="app-top-bar"> <Header className="app-top-bar">
<Row> <Row>
<Col span={0} md={6} sm={0} /> <Col span={0} md={4} sm={0} />
{tuneId ? tabs : <Col span={10} md={10} sm={16} />} {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> <Space>
<Tooltip visible={false} title={ {sm && <Tooltip visible={false} title={
<> <>
<Typography.Text keyboard>{isMac ? '⌘' : 'CTRL'}</Typography.Text> <Typography.Text keyboard>{isMac ? '⌘' : 'CTRL'}</Typography.Text>
<Typography.Text keyboard>SHIFT</Typography.Text> <Typography.Text keyboard>SHIFT</Typography.Text>
@ -158,7 +158,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
</> </>
}> }>
<Button disabled icon={<SearchOutlined />} ref={searchInput} /> <Button disabled icon={<SearchOutlined />} ref={searchInput} />
</Tooltip> </Tooltip>}
<Link to={Routes.UPLOAD}> <Link to={Routes.UPLOAD}>
<Button icon={<CloudUploadOutlined />} type={matchedTabPath?.url === Routes.UPLOAD ? 'primary' : 'default'}> <Button icon={<CloudUploadOutlined />} type={matchedTabPath?.url === Routes.UPLOAD ? 'primary' : 'default'}>
{lg && 'Upload'} {lg && 'Upload'}
@ -195,7 +195,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
> >
<Button icon={<CloudDownloadOutlined />}> <Button icon={<CloudDownloadOutlined />}>
{lg && 'Download'} {lg && 'Download'}
<DownOutlined /> {sm && <DownOutlined />}
</Button> </Button>
</Dropdown> </Dropdown>
<Dropdown <Dropdown
@ -224,7 +224,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
trigger={['click']} trigger={['click']}
> >
<Button icon={<UserOutlined />}> <Button icon={<UserOutlined />}>
<DownOutlined /> {sm && <DownOutlined />}
</Button> </Button>
</Dropdown> </Dropdown>
</Space> </Space>

25
src/pages/Info.tsx
View File

@ -21,6 +21,7 @@ const containerStyle = {
margin: '0 auto', margin: '0 auto',
}; };
const rowProps = { gutter: 10 }; const rowProps = { gutter: 10 };
const colProps = { span: 24, sm: 12 };
const mapStateToProps = (state: AppState) => ({ const mapStateToProps = (state: AppState) => ({
tuneData: state.tuneData, tuneData: state.tuneData,
@ -40,55 +41,55 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
<Divider>Details</Divider> <Divider>Details</Divider>
<Form> <Form>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.make!} addonBefore="Make" /> <Input value={tuneData.details.make!} addonBefore="Make" />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.model!} addonBefore="Model" /> <Input value={tuneData.details.model!} addonBefore="Model" />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.year!} addonBefore="Year" style={{ width: '100%' }} /> <Input value={tuneData.details.year!} addonBefore="Year" style={{ width: '100%' }} />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.displacement!} addonBefore="Displacement" addonAfter="l" /> <Input value={tuneData.details.displacement!} addonBefore="Displacement" addonAfter="l" />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.hp!} addonBefore="HP" style={{ width: '100%' }} /> <Input value={tuneData.details.hp!} addonBefore="HP" style={{ width: '100%' }} />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.stockHp!} addonBefore="Stock HP" style={{ width: '100%' }} /> <Input value={tuneData.details.stockHp!} addonBefore="Stock HP" style={{ width: '100%' }} />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.engineCode!} addonBefore="Engine code" /> <Input value={tuneData.details.engineCode!} addonBefore="Engine code" />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.cylindersCount!} addonBefore="No of cylinders" style={{ width: '100%' }} /> <Input value={tuneData.details.cylindersCount!} addonBefore="No of cylinders" style={{ width: '100%' }} />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Select placeholder="Aspiration" style={{ width: '100%' }} value={tuneData.details.aspiration}> <Select placeholder="Aspiration" style={{ width: '100%' }} value={tuneData.details.aspiration}>
<Select.Option value="na">Naturally aspirated</Select.Option> <Select.Option value="na">Naturally aspirated</Select.Option>
@ -97,19 +98,19 @@ const Info = ({ tuneData }: { tuneData: TuneDataState }) => {
</Select> </Select>
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.fuel!} addonBefore="Fuel" /> <Input value={tuneData.details.fuel!} addonBefore="Fuel" />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.injectorsSize!} addonBefore="Injectors size" addonAfter="cc" /> <Input value={tuneData.details.injectorsSize!} addonBefore="Injectors size" addonAfter="cc" />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item> <Item>
<Input value={tuneData.details.coils!} addonBefore="Coils" /> <Input value={tuneData.details.coils!} addonBefore="Coils" />
</Item> </Item>

25
src/pages/Upload.tsx
View File

@ -92,6 +92,7 @@ const containerStyle = {
const maxFileSizeMB = 10; const maxFileSizeMB = 10;
const descriptionEditorHeight = 260; const descriptionEditorHeight = 260;
const rowProps = { gutter: 10 }; const rowProps = { gutter: 10 };
const colProps = { span: 24, sm: 12 };
const tuneIcon = () => <ToolOutlined />; const tuneIcon = () => <ToolOutlined />;
const logIcon = () => <FundOutlined />; const logIcon = () => <FundOutlined />;
@ -492,55 +493,55 @@ const UploadPage = () => {
<Space>Details</Space> <Space>Details</Space>
</Divider> </Divider>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item name="make" rules={requiredRules}> <Item name="make" rules={requiredRules}>
<Input addonBefore="Make"/> <Input addonBefore="Make"/>
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item name="model" rules={requiredRules}> <Item name="model" rules={requiredRules}>
<Input addonBefore="Model"/> <Input addonBefore="Model"/>
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item name="year" rules={requiredRules}> <Item name="year" rules={requiredRules}>
<InputNumber addonBefore="Year" style={{ width: '100%' }} min={1886} max={2222} /> <InputNumber addonBefore="Year" style={{ width: '100%' }} min={1886} max={2222} />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item name="displacement" rules={requiredRules}> <Item name="displacement" rules={requiredRules}>
<InputNumber addonBefore="Displacement" addonAfter="l" min={0} max={100} /> <InputNumber addonBefore="Displacement" addonAfter="l" min={0} max={100} />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item name="hp"> <Item name="hp">
<InputNumber addonBefore="HP" style={{ width: '100%' }} min={0} /> <InputNumber addonBefore="HP" style={{ width: '100%' }} min={0} />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item name="stockHp"> <Item name="stockHp">
<InputNumber addonBefore="Stock HP" style={{ width: '100%' }} min={0} /> <InputNumber addonBefore="Stock HP" style={{ width: '100%' }} min={0} />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item name="engineCode"> <Item name="engineCode">
<Input addonBefore="Engine code"/> <Input addonBefore="Engine code"/>
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item name="cylindersCount"> <Item name="cylindersCount">
<InputNumber addonBefore="No of cylinders" style={{ width: '100%' }} min={0} /> <InputNumber addonBefore="No of cylinders" style={{ width: '100%' }} min={0} />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item name="aspiration"> <Item name="aspiration">
<Select placeholder="Aspiration" style={{ width: '100%' }}> <Select placeholder="Aspiration" style={{ width: '100%' }}>
<Select.Option value="na">Naturally aspirated</Select.Option> <Select.Option value="na">Naturally aspirated</Select.Option>
@ -549,19 +550,19 @@ const UploadPage = () => {
</Select> </Select>
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item name="fuel"> <Item name="fuel">
<Input addonBefore="Fuel" /> <Input addonBefore="Fuel" />
</Item> </Item>
</Col> </Col>
</Row> </Row>
<Row {...rowProps}> <Row {...rowProps}>
<Col span={12}> <Col {...colProps}>
<Item name="injectorsSize"> <Item name="injectorsSize">
<InputNumber addonBefore="Injectors size" addonAfter="cc" min={0} /> <InputNumber addonBefore="Injectors size" addonAfter="cc" min={0} />
</Item> </Item>
</Col> </Col>
<Col span={12}> <Col {...colProps}>
<Item name="coils"> <Item name="coils">
<Input addonBefore="Coils" /> <Input addonBefore="Coils" />
</Item> </Item>

2
src/themes/common.less
View File

@ -1,7 +1,7 @@
@primary-color: #126ec3; @primary-color: #126ec3;
@text-light: #fff; @text-light: #fff;
@border-radius-base: 5px; @border-radius-base: 6px;
@layout-header-padding: 0 15px; @layout-header-padding: 0 15px;
@layout-header-height: 45px; @layout-header-height: 45px;