mobile-friendlier probably

hiddenist · Nov 25, 2023 · 6b6231c · 6b6231c
1 parent fc40279
commit 6b6231c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/apps/web/index.html b/apps/web/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
     <title>WebGL Testing</title>
   </head>
   <body>

diff --git a/apps/web/src/style.css b/apps/web/src/style.css
@@ -45,8 +45,29 @@ aside canvas {
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+.picker-open-button {
+  display: none;
+}
+
 @media (max-width: 800px) {
   body {
     flex-direction: column;
+    overflow: hidden;
+  }
+
+  .picker-open-button {
+    display: inherit;
+  }
+  aside {
+    padding-top: 0;
+  }
+  aside canvas {
+    display: none;
+  }
+  aside canvas.picker-open {
+    display: block;
+    position: fixed;
+    bottom: 1rem;
+    left: calc(50% - 255px / 2);
   }
 }
diff --git a/libs/color-picker/src/lib/ColorPicker.ts b/libs/color-picker/src/lib/ColorPicker.ts
@@ -8,6 +8,16 @@ export class ColorPicker {
     this.onChange = onChange
     const { canvas, gl } = this.createCanvas()
     this.root.appendChild(canvas)
+    const openPickerButton = document.createElement("button")
+    openPickerButton.classList.add("open-picker-button")
+    openPickerButton.innerText = "color picker"
+    openPickerButton.addEventListener("click", () => {
+      canvas.classList.toggle("picker-open")
+    })
+    canvas.addEventListener("click", () => {
+      canvas.classList.remove("picker-open")
+    })
+    this.root.appendChild(openPickerButton)
 
     this.program = new GradientColorProgram(gl)
     this.program.draw()