Made site responsive

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);
-  }
 }

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) {
+}

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);
+  }
+}

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;
+  }
 }

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;
+  }
+}

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),