diff --git a/frontend/src/components/App.css b/frontend/src/components/App.css index 48003a6..25580d4 100644 --- a/frontend/src/components/App.css +++ b/frontend/src/components/App.css @@ -69,32 +69,10 @@ img { } @media screen and (max-width: 500px) { - .github { - width: 24px; - position: absolute; - top: 8px; - right: 8px; - } - body { font-size: 14px; } - .contentBlock { - padding: 18px; - margin: 0 0 18px 0; - } - - .centerBlockInner { - width: 650px; - margin: 12px 0 0 0; - } - - .logo { - width: 185px; - margin: 0 0 8px 0; - } - h1 { font-size: 16px; } @@ -103,22 +81,4 @@ img { margin: 0 0 3px 0; font-size: 15px; } - - .contentIcon { - flex: none; - margin: 0 18px 0 0; - width: 28px !important; - } - - td:first-child { - width: 70px; - } - - .boxWrap { - padding: 8px; - } - - input[type='text'] { - width: calc(100% - 65px); - } } diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css index f2b0e75..f4891a2 100644 --- a/frontend/src/components/Blocks.css +++ b/frontend/src/components/Blocks.css @@ -24,6 +24,15 @@ .centerBlockMobile { display: block; - max-width: 600px; + max-width: 650px; + padding: 0 12px; + } + + .contentBlock { + min-width: 0; + padding: 18px; } } + +@media screen and (max-width: 500px) { +} diff --git a/frontend/src/components/FingerprintBlock.css b/frontend/src/components/FingerprintBlock.css index 33e01c0..fc22102 100644 --- a/frontend/src/components/FingerprintBlock.css +++ b/frontend/src/components/FingerprintBlock.css @@ -1,7 +1,6 @@ .fingerprintTable td:first-child { width: 80px; font-weight: 600; - word-break: normal; } .boxWrap { @@ -40,3 +39,12 @@ input[type='text'] { width: 200px; outline: none; } +@media screen and (max-width: 500px) { + .boxWrap { + padding: 8px; + } + + input[type='text'] { + width: calc(100% - 70px); + } +} diff --git a/frontend/src/components/Logo.css b/frontend/src/components/Logo.css index 7700579..23bebe7 100644 --- a/frontend/src/components/Logo.css +++ b/frontend/src/components/Logo.css @@ -2,9 +2,17 @@ display: flex; align-items: center; justify-content: center; - margin: 20px 0; } .logo { + margin: 20px 0; width: 250px; + display: flex; +} + +@media screen and (max-width: 500px) { + .logo { + width: 160px; + margin: 12px 0; + } } diff --git a/frontend/src/components/TableRow.css b/frontend/src/components/TableRow.css index 414dc02..839ad9f 100644 --- a/frontend/src/components/TableRow.css +++ b/frontend/src/components/TableRow.css @@ -1,5 +1,6 @@ td { padding: 12px; + word-break: break-all; } td:first-child { @@ -11,7 +12,6 @@ td:first-child { td:nth-child(3) { width: 40px; font-weight: 600; - word-break: normal; } .circleButton { @@ -54,3 +54,19 @@ ul { padding-left: 20px; margin: 0px; } + +@media screen and (max-width: 500px) { + td { + padding: 8px; + } + + td:first-child { + width: 70px; + } + + td:nth-child(3) { + width: 20px; + font-weight: 600; + word-break: normal; + } +} diff --git a/frontend/src/utils/navigator.js b/frontend/src/utils/navigator.js index 6c36c5b..f22b3d1 100644 --- a/frontend/src/utils/navigator.js +++ b/frontend/src/utils/navigator.js @@ -1,7 +1,8 @@ import { checkWebWorker } from './common'; const getDeviceMemory = (key, worker) => ({ - key, + key: 'Device memory', + code: `navigator.${key}`, value: navigator[key], issues: [ checkNavigatorProperties(key), @@ -12,8 +13,9 @@ const getDeviceMemory = (key, worker) => ({ }); const getHardwareConcurrency = (key, worker) => ({ - key, - value: navigator.hardwareConcurrency, + key: 'Hardware concurrency', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -23,8 +25,9 @@ const getHardwareConcurrency = (key, worker) => ({ }); const getMaxTouchPoints = (key) => ({ - key, - value: navigator.maxTouchPoints, + key: 'Max touch points', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -33,8 +36,9 @@ const getMaxTouchPoints = (key) => ({ }); const getPlatform = (key, worker) => ({ - key, - value: navigator.platform, + key: 'Platform', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -44,8 +48,9 @@ const getPlatform = (key, worker) => ({ }); const getUserAgent = (key, worker) => ({ - key, - value: navigator.userAgent, + key: 'User agent', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -55,8 +60,9 @@ const getUserAgent = (key, worker) => ({ }); const getAppVersion = (key, worker) => ({ - key, - value: navigator.appVersion, + key: 'App version', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -66,8 +72,9 @@ const getAppVersion = (key, worker) => ({ }); const getLanguage = (key, worker) => ({ - key, - value: navigator.language, + key: 'Language', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -77,8 +84,9 @@ const getLanguage = (key, worker) => ({ }); const getLanguages = (key, worker) => ({ - key, - value: navigator.languages, + key: 'Languages', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -88,8 +96,9 @@ const getLanguages = (key, worker) => ({ }); const getCookieEnabled = (key) => ({ - key, - value: navigator.cookieEnabled ? 'True' : 'False', + key: 'Cookie enabled', + code: `navigator.${key}`, + value: navigator[key] ? 'True' : 'False', issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -98,8 +107,9 @@ const getCookieEnabled = (key) => ({ }); const getDoNotTrack = (key) => ({ - key, - value: navigator.doNotTrack ? 'True' : 'False', + key: 'Do not track', + code: `navigator.${key}`, + value: navigator[key] ? 'True' : 'False', issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -108,8 +118,9 @@ const getDoNotTrack = (key) => ({ }); const getWebDriver = (key) => ({ - key, - value: navigator.webdriver ? 'True' : 'False', + key: 'Web driver', + code: `navigator.${key}`, + value: navigator[key] ? 'True' : 'False', issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -118,8 +129,9 @@ const getWebDriver = (key) => ({ }); const getPlugins = (key) => ({ - key, - value: sortPlugins(navigator.plugins), + key: 'Plugins', + code: `navigator.${key}`, + value: sortPlugins(navigator[key]), issues: [ checkNavigatorProperties(key), checkNavigatorValue(key), @@ -128,8 +140,9 @@ const getPlugins = (key) => ({ }); const getVendor = (key) => ({ - key, - value: navigator.vendor, + key: 'Vendor', + code: `navigator.${key}`, + value: navigator[key], issues: [ checkNavigatorProperties(key), checkNavigatorValue(key),