Implement mobile friendly UI

calebj0seph · Mar 3, 2020 · a6805b7 · a6805b7
1 parent 39abcc9
commit a6805b7
Show file tree

Hide file tree

Showing 4 changed files with 252 additions and 142 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>Spectro</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="description"
         content="Real-time audio visualizer that generates spectrograms in your browser using WebGL. Visualise sound either from a microphone or an audio file on your device. Supports different color schemes and other customization options.">
     <meta property="og:type" content="website">
@@ -12,6 +12,7 @@
     <meta property="og:description"
         content="Real-time audio visualizer that generates spectrograms in your browser using WebGL. Visualise sound either from a microphone or an audio file on your device.">
     <meta name="twitter:card" content="summary">
+    <title>Spectro</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap" rel="stylesheet">
     <style>
         body {
@@ -94,6 +95,23 @@
             overflow-x: hidden;
             overflow-y: auto;
         }
+
+        @media (max-width: 800px) {
+            .spectrograms .separator {
+                display: none;
+            }
+
+            .controls {
+                border-top-left-radius: 16px;
+                border-top-right-radius: 16px;
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                bottom: 0;
+                width: auto;
+                padding: 0;
+            }
+        }
     </style>
 </head>
 <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "@types/lodash.debounce": "^4.0.6",
     "@types/react-dom": "^16.9.5",
     "@types/webpack": "^4.41.6",
-    "clsx": "^1.1.0",
     "jsfft": "0.0.4",
     "lodash.debounce": "^4.0.8",
     "react": "^16.12.0",
@@ -44,7 +43,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-prettier": "^3.1.2",
     "eslint-plugin-react": "^7.18.3",
-    "eslint-plugin-react-hooks": "^2.4.0",
+    "eslint-plugin-react-hooks": "^1.7.0",
     "eslint-restricted-globals": "^0.2.0",
     "prettier": "^1.19.1",
     "typescript": "^3.7.5",