diff --git a/apps/web/index.html b/apps/web/index.html
index b9a8796..c2d7215 100644
--- a/apps/web/index.html
+++ b/apps/web/index.html
@@ -2,7 +2,7 @@
-
+
WebGL Testing
diff --git a/apps/web/src/style.css b/apps/web/src/style.css
index 4876301..c535609 100644
--- 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
index 11edd42..d872095 100644
--- 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()