Added media query for demo video to make it as png facebook#407

code-reaper08 · Jul 23, 2021 · 519c75b · 519c75b
1 parent 3e0045b
commit 519c75b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/assets/launch_page.css b/assets/launch_page.css
@@ -283,3 +283,20 @@ hr {
     padding-right: 0px;
   }
 }
+/* Regarding video demo missing */
+.mobile-show{
+  display: none;
+}
+.mobile-show img {
+  width:300px;
+  height: auto;
+}
+
+@media only screen
+    and (min-device-width : 320px)
+    and (max-device-width : 480px){ 
+      .mobile-show {display: inline;
+                    width: 50pxpx;
+                    height: 50px;}
+      .mobile-hide {display: none;}
+  }
diff --git a/index.html b/index.html
@@ -106,8 +106,12 @@ <h2>Any Input</h2>
           <p><a class="btn btn-success" href="https://github.com/facebook/pathpicker/" role="button">More on GitHub</a></p>
         </div>
         <div class="asciiDemo col-md-6">
-          <script type="text/javascript" src="https://asciinema.org/a/19519.js" id="asciicast-19519" async>
-          </script>
+          <!-- <script type="text/javascript" src="https://asciinema.org/a/19519.js" id="asciicast-19519" async>
+          </script> -->
+          <a class="mobile-show" href="https://asciinema.org/a/19519" target="_blank"><img src="https://asciinema.org/a/19519.png" /></a>
+          <div class="mobile-hide">
+          <script id="asciicast-19519" src="https://asciinema.org/a/19519.js" async></script>
+          </div>
         </div>
       </div>
       <hr>
@@ -125,7 +129,11 @@ <h2>Arbitrary Commands</h2>
           <a class="btn btn-success" href="https://github.com/facebook/pathpicker/" role="button">More on GitHub</a>
         </div>
         <div class="asciiDemo col-md-6">
-          <script type="text/javascript" src="https://asciinema.org/a/19520.js" id="asciicast-19520" async></script>
+          <!-- <script type="text/javascript" src="https://asciinema.org/a/19520.js" id="asciicast-19520" async></script> -->
+          <a class="mobile-show" href="https://asciinema.org/a/19520" target="_blank"><img src="https://asciinema.org/a/19520.png" /></a>
+          <div class="mobile-hide">
+          <script id="asciicast-19520" src="https://asciinema.org/a/19520.js" async></script>
+          </div>
         </div>
       </div>
     </div>