create reponsive multicard layout home screen

fossasia · Jun 13, 2020 · 4e83482 · 4e83482
1 parent 7e2ff94
commit 4e83482
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 71 deletions.
diff --git a/src/components/HomeLayout/HomeLayout.styles.js b/src/components/HomeLayout/HomeLayout.styles.js
@@ -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};
 `;
diff --git a/src/screen/Home/components/InstrumentCard.styles.js b/src/screen/Home/components/InstrumentCard.styles.js
@@ -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;

diff --git a/src/screen/Home/components/Tabs.js b/src/screen/Home/components/Tabs.js
@@ -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,
@@ -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>
   );
 };
 

diff --git a/src/screen/Home/components/Tabs.styles.js b/src/screen/Home/components/Tabs.styles.js
@@ -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;