From 9159590e1e36475ae92d560f94387f809b8d9751 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 10:49:46 -0400
Subject: [PATCH] Combine columns for mobile

---
 frontend/src/components/Blocks.css   | 16 ++++++++++++----
 frontend/src/components/Blocks.js    | 24 ++++++++----------------
 frontend/src/components/BlocksOne.js | 15 +++++++++++++++
 frontend/src/components/BlocksTwo.js | 15 +++++++++++++++
 4 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/BlocksOne.js
 create mode 100644 frontend/src/components/BlocksTwo.js

diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css
index ebeefd9..f2b0e75 100644
--- a/frontend/src/components/Blocks.css
+++ b/frontend/src/components/Blocks.css
@@ -2,6 +2,10 @@
   width: 500px;
 }
 
+.centerBlockMobile {
+  display: none;
+}
+
 .contentBlock {
   color: var(--text);
   background-color: #fff;
@@ -13,9 +17,13 @@
   min-width: 500px;
 }
 
-@media screen and (max-width: 500px) {
-  .contentBlock {
-    padding: 18px;
-    margin: 0 0 18px 0;
+@media screen and (max-width: 1200px) {
+  .centerBlockInner {
+    display: none;
+  }
+
+  .centerBlockMobile {
+    display: block;
+    max-width: 600px;
   }
 }
diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index fc20e4b..2148b1d 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -1,12 +1,6 @@
 import { useState, useEffect } from 'react';
-import UserAgentBlock from './UserAgentBlock';
-import IntlBlock from './IntlBlock';
-import OtherBlock from './OtherBlock';
-import NavigatorBlock from './NavigatorBlock';
-import ScreenBlock from './ScreenBlock';
-import FingerprintBlock from './FingerprintBlock';
-import LocationBlock from './LocationBlock';
-import ConnectionBlock from './ConnectionBlock';
+import BlocksOne from './BlocksOne';
+import BlocksTwo from './BlocksTwo';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
 import './Blocks.css';
@@ -26,22 +20,20 @@ const Blocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            <FingerprintBlock workerData={workerData} />
-            <NavigatorBlock workerData={workerData} />
-            <UserAgentBlock workerAgent={workerData.userAgent} />
-            <IntlBlock workerData={workerData} />
+            <BlocksOne workerData={workerData} />
           </div>
           <div className="centerBlockInner">
-            <LocationBlock
+            <BlocksTwo
               workerData={workerData}
               connectionData={connectionData}
             />
-            <ConnectionBlock
+          </div>
+          <div className="centerBlockMobile">
+            <BlocksOne workerData={workerData} />
+            <BlocksTwo
               workerData={workerData}
               connectionData={connectionData}
             />
-            <ScreenBlock />
-            <OtherBlock workerData={workerData} />
           </div>
         </>
       ) : (
diff --git a/frontend/src/components/BlocksOne.js b/frontend/src/components/BlocksOne.js
new file mode 100644
index 0000000..638098f
--- /dev/null
+++ b/frontend/src/components/BlocksOne.js
@@ -0,0 +1,15 @@
+import UserAgentBlock from './UserAgentBlock';
+import IntlBlock from './IntlBlock';
+import NavigatorBlock from './NavigatorBlock';
+import FingerprintBlock from './FingerprintBlock';
+
+const BlocksOne = ({ workerData }) => (
+  <>
+    <FingerprintBlock workerData={workerData} />
+    <NavigatorBlock workerData={workerData} />
+    <UserAgentBlock workerAgent={workerData.userAgent} />
+    <IntlBlock workerData={workerData} />
+  </>
+);
+
+export default BlocksOne;
diff --git a/frontend/src/components/BlocksTwo.js b/frontend/src/components/BlocksTwo.js
new file mode 100644
index 0000000..abbe95b
--- /dev/null
+++ b/frontend/src/components/BlocksTwo.js
@@ -0,0 +1,15 @@
+import OtherBlock from './OtherBlock';
+import ScreenBlock from './ScreenBlock';
+import LocationBlock from './LocationBlock';
+import ConnectionBlock from './ConnectionBlock';
+
+const BlocksTwo = ({ workerData, connectionData }) => (
+  <>
+    <LocationBlock workerData={workerData} connectionData={connectionData} />
+    <ConnectionBlock workerData={workerData} connectionData={connectionData} />
+    <ScreenBlock />
+    <OtherBlock workerData={workerData} />
+  </>
+);
+
+export default BlocksTwo;