Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create reponsive multicard layout home screen #565

Merged
merged 1 commit into from
Jun 13, 2020
Merged

create reponsive multicard layout home screen #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/components/HomeLayout/HomeLayout.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,7 @@ export const LayoutContainer = styled.div`
flex-direction: row;
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
background: ${props => props.theme.background.default};
`;
3 changes: 2 additions & 1 deletion src/screen/Home/components/InstrumentCard.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ export const CustomCard = styled.div`
display: flex;
width: 48em;
height: 26em;
margin-right:1em;
margin-right: 1em;
margin-bottom: 1em;
transition-timing-function: ease-in-out;
transition-duration: 200ms;
border-radius: 8px;
Expand Down
116 changes: 49 additions & 67 deletions src/screen/Home/components/Tabs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import InstrumentCard from './InstrumentCard';
import { TabsContainer, TabsWrapper, TabsRow } from './Tabs.styles';
import { TabsContainer, TabsContainerInner } from './Tabs.styles';
import {
OscilloscopeIcon,
LogicAnalyzerIcon,
Expand All @@ -13,72 +13,54 @@ import {

const Tabs = () => {
return (
<TabsContainer>
<Scrollbars autoHide autoHideTimeout={1000}>
<TabsRow>
<TabsWrapper>
<InstrumentCard
icon={<OscilloscopeIcon size={'10em'} />}
title={'Oscilloscope'}
description={'Allows observation of varying signal voltages'}
redirectPath={'/oscilloscope'}
/>
<InstrumentCard
icon={<LogicAnalyzerIcon size={'10em'} />}
title={'Logic Analyzer'}
description={'Captures and displays signals from digital systems'}
redirectPath={'/logicanalyzer'}
/>
</TabsWrapper>
</TabsRow>
<TabsRow>
<TabsWrapper>
<InstrumentCard
icon={<WaveGeneratorIcon size={'10em'} />}
title={'Wave Generator'}
description={'Generates arbitrary analog and digital waveforms'}
redirectPath={'/wavegenerator'}
/>
<InstrumentCard
icon={<PowerSourceIcon size={'10em'} />}
title={'Power Source'}
description={'Generates programmable voltage and currents'}
redirectPath={'/powersource'}
/>
</TabsWrapper>
</TabsRow>
<TabsRow>
<TabsWrapper>
<InstrumentCard
icon={<MultimeterIcon size={'10em'} />}
title={'Multimeter'}
description={
'Measure voltage, current, resistance and capacitance.'
}
redirectPath={'/multimeter'}
/>
<InstrumentCard
icon={<SensorsIcon size={'10em'} />}
title={'Sensors'}
description={
'Allows logging of data returned by sensor connected.'
}
redirectPath={'/sensors'}
/>
</TabsWrapper>
</TabsRow>
<TabsRow>
<TabsWrapper>
<InstrumentCard
icon={<MultimeterIcon size={'10em'} />}
title={'Robotic Arm'}
description={'To control servo motors using a timeline.'}
redirectPath={'/robotarm'}
/>
</TabsWrapper>
</TabsRow>
</Scrollbars>
</TabsContainer>
<Scrollbars autoHide autoHideTimeout={1000}>
<TabsContainer>
<TabsContainerInner>
<InstrumentCard
icon={<OscilloscopeIcon size={'10em'} />}
title={'Oscilloscope'}
description={'Allows observation of varying signal voltages'}
redirectPath={'/oscilloscope'}
/>
<InstrumentCard
icon={<LogicAnalyzerIcon size={'10em'} />}
title={'Logic Analyzer'}
description={'Captures and displays signals from digital systems'}
redirectPath={'/logicanalyzer'}
/>
<InstrumentCard
icon={<WaveGeneratorIcon size={'10em'} />}
title={'Wave Generator'}
description={'Generates arbitrary analog and digital waveforms'}
redirectPath={'/wavegenerator'}
/>
<InstrumentCard
icon={<PowerSourceIcon size={'10em'} />}
title={'Power Source'}
description={'Generates programmable voltage and currents'}
redirectPath={'/powersource'}
/>
<InstrumentCard
icon={<MultimeterIcon size={'10em'} />}
title={'Multimeter'}
description={'Measure voltage, current, resistance and capacitance.'}
redirectPath={'/multimeter'}
/>
<InstrumentCard
icon={<SensorsIcon size={'10em'} />}
title={'Sensors'}
description={'Allows logging of data returned by sensor connected.'}
redirectPath={'/sensors'}
/>
<InstrumentCard
icon={<MultimeterIcon size={'10em'} />}
title={'Robotic Arm'}
description={'To control servo motors using a timeline.'}
redirectPath={'/robotarm'}
/>
</TabsContainerInner>
</TabsContainer>
</Scrollbars>
);
};

Expand Down
13 changes: 10 additions & 3 deletions src/screen/Home/components/Tabs.styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,18 @@ import styled from 'styled-components';
export const TabsContainer = styled.div`
height: calc(100% - 16px);
width: 100%;
`;
export const TabsContainerInner = styled.div`
width: 100%;
display: flex;
flex-direction: column;
margin: 0px 0px 16px 0px;
flex-wrap: wrap;
margin: 1em auto;
justify-content: center;
padding-left: 1em;
@media only screen and (min-width: 1176px) {
justify-content: start;
}
`;

export const TabsWrapper = styled.div`
margin: 16px 16px 0px 0px;
width: 98em;
Expand Down