me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Combine columns for mobile

Browse source
This commit is contained in:
z0ccc 2021-09-29 10:49:46 -04:00
parent b198250fc0
commit 9159590e1e
4 changed files with 50 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/Blocks.css
View file

@ -2,6 +2,10 @@
width: 500px; width: 500px;
} }
.centerBlockMobile {
display: none;
}
.contentBlock { .contentBlock {
color: var(--text); color: var(--text);
background-color: #fff; background-color: #fff;
@ -13,9 +17,13 @@
min-width: 500px; min-width: 500px;
} }
@media screen and (max-width: 500px) { @media screen and (max-width: 1200px) {
.contentBlock { .centerBlockInner {
padding: 18px; display: none;
margin: 0 0 18px 0; }
.centerBlockMobile {
display: block;
max-width: 600px;
} }
} }

24
frontend/src/components/Blocks.js
View file

@ -1,12 +1,6 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import UserAgentBlock from './UserAgentBlock'; import BlocksOne from './BlocksOne';
import IntlBlock from './IntlBlock'; import BlocksTwo from './BlocksTwo';
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 FontsBlock from './FontsBlock'; // import FontsBlock from './FontsBlock';
import { fetchAPI, getWebWorker } from '../utils/common'; import { fetchAPI, getWebWorker } from '../utils/common';
import './Blocks.css'; import './Blocks.css';
@ -26,22 +20,20 @@ const Blocks = () => {
{connectionData ? ( {connectionData ? (
<> <>
<div className="centerBlockInner"> <div className="centerBlockInner">
<FingerprintBlock workerData={workerData} /> <BlocksOne workerData={workerData} />
<NavigatorBlock workerData={workerData} />
<UserAgentBlock workerAgent={workerData.userAgent} />
<IntlBlock workerData={workerData} />
</div> </div>
<div className="centerBlockInner"> <div className="centerBlockInner">
<LocationBlock <BlocksTwo
workerData={workerData} workerData={workerData}
connectionData={connectionData} connectionData={connectionData}
/> />
<ConnectionBlock </div>
<div className="centerBlockMobile">
<BlocksOne workerData={workerData} />
<BlocksTwo
workerData={workerData} workerData={workerData}
connectionData={connectionData} connectionData={connectionData}
/> />
<ScreenBlock />
<OtherBlock workerData={workerData} />
</div> </div>
</> </>
) : ( ) : (

15
frontend/src/components/BlocksOne.js Normal file
View file

@ -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;

15
frontend/src/components/BlocksTwo.js Normal file
View file

@ -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;