mobile responsive

gavinr · gavinr · commit a4c66b80a4aa · 2020-07-27T23:02:30.000-05:00
#4
diff --git a/index.html b/index.html
@@ -67,6 +67,14 @@
 
   <body>
     <div class="wrapper">
+      <select id="mainSelect">
+        <option>Polygon</option>
+        <option>Random Points</option>
+        <option>Cluster the Points (K-Means)</option>
+        <option>Centroids</option>
+        <option>Voronoi</option>
+        <option>Voronoi Clip</option>
+      </select>
       <calcite-stepper icon numbered>
         <calcite-stepper-item
           item-title="Polygon"
diff --git a/main.js b/main.js
@@ -356,6 +356,14 @@ let reRun2 = false;
 let reRun3 = false;
 let reRun = false;
 
+// change handler for mobile-view select
+let selector = document.querySelector("#mainSelect");
+selector.addEventListener("change", (evt) => {
+  let s2 = `calcite-stepper > *:nth-child(${evt.target.selectedIndex + 1})`;
+  document.querySelector(s2).click();
+  selector.click();
+});
+
 // Create click handlers:
 for (let i = 0; i < steps.length; i++) {
   let selector = `calcite-stepper > *:nth-child(${i + 1})`;
@@ -425,6 +433,10 @@ for (let i = 0; i < steps.length; i++) {
       }
     }
 
+    // let selector = document.querySelectorAll("#mainSelect option")[i].value;
+    document.querySelector("#mainSelect").value = document.querySelectorAll(
+      "#mainSelect option"
+    )[i].value;
     runForStep(i);
   });
 }
diff --git a/style.css b/style.css
@@ -39,3 +39,25 @@ calcite-stepper {
 #codeBlock .linkWrapper {
   text-align: right;
 }
+
+#mainSelect {
+  display: none;
+}
+@media (max-width: 1200px) {
+  calcite-stepper {
+    display: none;
+  }
+  #mainSelect {
+    display: block;
+  }
+  #codeBlock {
+    bottom: 0px;
+    right: 0px;
+    left: 0px;
+    height: 143px;
+    overflow-y: auto;
+    top: auto;
+    width: auto;
+    padding-bottom: 20px;
+  }
+}
