Add menu item to example pages on small screens

gfx-rs · Jan 2, 2024 · fafa97d · fafa97d
1 parent 9ef05f0
commit fafa97d
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -216,6 +216,7 @@ Passing an owned value `window` to `Surface` will return a `Surface<'static>`. S
 ### Examples
 
 - remove winit dependency from hello-compute example by @psvri in [#4699](https://github.com/gfx-rs/wgpu/pull/4699)
+- Made the examples page not crash on Chrome on Android, and responsive to screen sizes by @Dinnerbone in [#4958](https://github.com/gfx-rs/wgpu/pull/4958)
 
 ## v0.18.1 (2023-11-15)
 

diff --git a/examples/static/index.html b/examples/static/index.html
@@ -23,10 +23,21 @@
             flex-direction: column;
         }
 
-        .banner {
+        #banner {
             background: #dee;
             padding: 0.5em 0;
             border-bottom: 1px solid #abb;
+
+            @media only screen and (max-width: 1000px) {
+                max-height: 0;
+                transition: max-height 0.15s ease;
+                overflow: hidden;
+                padding: 0;
+            }
+        }
+
+        #banner.visible {
+            max-height: 100%;
         }
 
         .banner-prefix {
@@ -95,12 +106,36 @@
             /* This forces CSS to ignore the width/height of the canvas, this is needed for WebGL */
             contain: size;
         }
+
+
+        #menu-button {
+            display: none;
+
+            @media only screen and (max-width: 1000px) {
+                display: block;
+                width: 30px;
+                height: 33px;
+                margin: 0 auto;
+            }
+        }
+
+        #menu-button span {
+            display: block;
+            width: 100%;
+            height: 3px;
+            margin: 6px auto;
+            background-color: #333;
+            transition: all 0.3s ease-in-out;
+        }
+
     </style>
 </head>
 
 <body>
     <div class="root">
-        <div class="banner">
+        <div id="menu-button"><span></span><span></span><span></span></div>
+
+        <div id="banner">
             <div class="banner-prefix">
                 <p>
                     <a href="../index.html">
@@ -136,6 +171,18 @@
                 `${window.location.href}?backend=webgl2&example=hello_triangle`
             );
         }
+
+        const menuButton = document.getElementById("menu-button");
+        const banner = document.getElementById("banner");
+        menuButton.onclick = () => {
+            if (menuButton.classList.contains("active")) {
+                menuButton.classList.remove("active");
+                banner.classList.remove("visible");
+            } else {
+                menuButton.classList.add("active");
+                banner.classList.add("visible");
+            }
+        };
     </script>
 </body>