mobile

voicegardens/static/styles.css

@@ -14,6 +14,41 @@ img.button {
   width: 4%;
 }
 
+/* Button style */
+
+.record {
+  position:fixed;
+  top:20px;
+  left:20px;
+}
+
+.record:hover {
+  top:22px;
+  left:22px;
+}
+
+.stop {
+  position:fixed;
+  top:100px;
+  left:20px;
+}
+
+.stop:hover {
+  top:102px;
+  left:22px;
+}
+
+.leaf {
+  position:fixed;
+  top:180px;
+  left:20px;
+}
+
+.leaf:hover {
+  top:182px;
+  left:22px;
+}
+
 .about {
   width: 3% !important;
   position:fixed;
@@ -47,3 +82,70 @@ h1 {
     padding: 3em 2em 0 10em;
     float: left;
 }
+
+/* Other displays */
+
+@media screen and (max-width: 770px) {
+  img.button {
+    width: 10%;
+}
+
+  .about {
+      width: 7% !important;
+      top: unset;
+      right: 25vw;
+      bottom: 2vh;
+      left: unset;
+    }
+
+  .about:hover {
+      top: unset;
+      right: 25vw;
+      bottom: 4vh;
+      left: unset;
+    }
+
+  .leaf {
+      top: unset;
+      bottom: 3vh;
+      left: 55vw;
+  }
+
+  .leaf:hover {
+      top: unset;
+      bottom: 5vh;
+      left: 55vw;
+  }
+
+  .stop {
+      top: unset;
+      bottom: 3vh;
+      left: 40vw;
+  }
+
+  .record {
+      top: unset;
+      bottom: 3vh;
+      left: 25vw;
+  }
+
+  .record:hover {
+      top: unset;
+      bottom: 5vh;
+      left: 25vw;
+  }
+
+  .about-text {
+    height: 100vh;
+    padding: 1em;
+    width: 100%;
+    font-family: sans-serif;
+    font-size: 1em;
+    line-height: 1.5em;
+    overflow: scroll;
+  }
+
+  h1 {
+    line-height: 1em;
+  }
+}

voicegardens/static/voicegardens.js

@@ -113,28 +113,8 @@ function sendToArchive() {
   });
 }
 
-function record_enlarge() {
-  recordButton.position(22, 22);
-}
-
-function record_minimise() {
-  recordButton.position(20, 20);
-}
-
-function stop_enlarge() {
-  stopButton.position(22, 102);
-}
-
-function stop_minimise() {
-  stopButton.position(20, 100);
-}
-
-function leaf_enlarge() {
-  leafButton.position(22, 182);
-}
-
-function leaf_minimise() {
-  leafButton.position(20, 180);
+function goToAbout() {
+  window.location.href = "/about";
 }
 
 function gardenShapes() {
@@ -190,25 +170,20 @@ function setupRecording() {
   recording = new p5.SoundFile();
 
   recordButton = createImg("../static/images/RECORD-COLOR.png");
-  recordButton.position(20, 20);
   recordButton.mousePressed(record);
-  recordButton.class("button");
-  recordButton.mouseOver(record_enlarge);
-  recordButton.mouseOut(record_minimise);
+  recordButton.class("button record");
 
   stopButton = createImg("../static/images/STOP-BW.png");
-  stopButton.position(20, 100);
   stopButton.mousePressed(stop);
-  stopButton.class("button");
-  stopButton.mouseOver(stop_enlarge);
-  stopButton.mouseOut(stop_minimise);
+  stopButton.class("button stop");
 
   leafButton = createImg("../static/images/GARDEN-BW.png");
-  leafButton.position(20, 180);
-  leafButton.class("button");
-  leafButton.mouseOver(leaf_enlarge);
-  leafButton.mouseOut(leaf_minimise);
+  leafButton.class("button leaf");
   leafButton.mousePressed(gardenShapes);
+
+  aboutButton = createImg("../static/images/ABOUT-BW.png");
+  aboutButton.mousePressed(goToAbout);
+  aboutButton.class("button about");
 }
 
 class GeneratedShape {