mobile fixes

doc22940 · Apr 28, 2019 · 3934566 · 3934566
1 parent 6affd56
commit 3934566
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 59 deletions.
diff --git a/guide/assets/style.css b/guide/assets/style.css
@@ -203,6 +203,67 @@ a:hover > code {
   color: #0ca;
 }
 
+
+pre {
+  border-left: 2px solid #0ca;
+  padding: 5px 0 5px 20px;
+  font-size: 0.9em;
+  margin: 20px 0 40px;
+}
+
+code {
+  font-family: "Menlo", "Consolas", "Monaco", monospace;
+}
+
+code.hljs {
+  overflow: visible;
+}
+
+/* Demo elements */
+p {
+  position: relative;
+  margin-bottom: 1.5em;
+}
+
+.demoOverlay {
+  position: absolute;
+  top: 0; left: 0; bottom: 0; right: 0;
+  /* background: rgba(0,0,0,.2); */
+  box-sizing: border-box;
+}
+
+
+.demoOverlay::after, .demoOverlay .sourceCodeLink {
+  display: block;
+  position: absolute; bottom: 0; right: 0;
+  background: rgba(0,0,0,.7);
+  color: #fff;
+  padding: 10px;
+  font-size: 11px;
+  content: 'Touch to try demo';
+}
+
+.demoOverlay.active {
+  box-shadow: 0 0 0 2px #fff;
+}
+
+.demoOverlay.active::after {
+  display: none;
+}
+
+.demoOverlay .sourceCodeLink {
+  display: none;
+}
+
+.demoOverlay.active .sourceCodeLink {
+  display: block;
+}
+
+.demoOverlay.active .sourceCodeLink::after {
+  content: "↗";
+}
+
+
 /* Mobile and Responsive */
 @media screen and (max-device-width : 768px), screen and (max-width : 768px), print {
 
@@ -346,7 +407,9 @@ a:hover > code {
 
   code { font-size: 0.8em; }
 
-
+  .demoOverlay.active .sourceCodeLink::after {
+    content: "(desktop)"
+  }
 }
 
 /* Print */
@@ -364,64 +427,10 @@ a:hover > code {
     page-break-after: avoid;
     page-break-inside: avoid;
   }
-}
-
-pre {
-  border-left: 2px solid #0ca;
-  padding: 5px 0 5px 20px;
-  font-size: 0.9em;
-  margin: 20px 0 40px;
-}
-
-code {
-  font-family: "Menlo", "Consolas", "Monaco", monospace;
-}
-
-code.hljs {
-  overflow: visible;
-}
-
-/* Demo elements */
-p {
-  position: relative;
-  margin-bottom: 1.5em;
-}
-
-.demoOverlay {
-  position: absolute;
-  top: 0; left: 0; bottom: 0; right: 0;
-  /* background: rgba(0,0,0,.2); */
-  box-sizing: border-box;
-}
-
-.demoOverlay > canvas{
-  /* width: 100% !important; height: 100% !important; */
-}
 
-.demoOverlay::after, .demoOverlay .sourceCodeLink {
-  display: block;
-  position: absolute; bottom: 0; right: 0;
-  background: rgba(0,0,0,.7);
-  color: #fff;
-  padding: 10px;
-  font-size: 11px;
-  content: 'Touch to try demo';
-}
-
-.demoOverlay.active {
-  box-shadow: 0 0 0 2px #fff;
-}
-
-.demoOverlay.active::after {
-  display: none;
-}
-
-.demoOverlay .sourceCodeLink {
-  display: none;
-}
-
-.demoOverlay.active .sourceCodeLink {
-  display: block;
+  h5 {
+    margin: 10px;
+  }
 }
 
 

diff --git a/guide/js/examples/sound_visual.js b/guide/js/examples/sound_visual.js
@@ -50,6 +50,10 @@
 
   // Draw play button
   function playButton() {
+    if (!bufferLoaded) {
+      form.fillOnly("#9ab").text( [20,30], "Loading..." );
+      return;
+    }
     if (!sound || !sound.playing) {
       form.fillOnly("#f06").rect( [[0,0], [50,50]] );
       form.fillOnly('#fff').polygon( Triangle.fromCenter( [25,25], 10 ).rotate2D( Const.half_pi, [25,25] ) );
@@ -181,6 +185,8 @@
   // For use in demo page only
   if (window.registerDemo) window.registerDemo(demoID, space, startFn, null, true);
   function startFn() {
+    radius = space.size.minValue().value/3;
+    ctrls = Create.radialPts( space.center, radius, 10, -Const.pi-Const.quarter_pi  );
     if (sound && !sound.playing) space.replay();
   }
 

diff --git a/guide/js/guide.js b/guide/js/guide.js
@@ -25,7 +25,7 @@ Pts.namespace( this );
     var divID = imgElem.getAttribute("alt").replace(/js\:/gi, "");
 
     var link = document.createElement("a");
-    link.textContent = "Edit live code ↗";
+    link.textContent = "Edit live code ";
     link.classList.add("sourceCodeLink");
     link.setAttribute( "target", "pts_github");
     link.setAttribute( "href", sourceCodePath+divID);