Change examples page menu on smaller screens (#4958)

gfx-rs · Jan 2, 2024 · aa48558 · aa48558
1 parent e26a853
commit aa48558
Show file tree

Hide file tree

Showing 3 changed files with 71 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/src/main.rs b/examples/src/main.rs
@@ -189,6 +189,7 @@ fn print_examples() {
 
             let item = document.create_element("div").unwrap();
             item.append_child(&link).unwrap();
+            item.set_class_name("example-item");
             ul.append_child(&item).unwrap();
         }
     }

diff --git a/examples/static/index.html b/examples/static/index.html
@@ -1,6 +1,7 @@
 <html>
 
 <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
     <style type="text/css">
         :focus {
@@ -22,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 {
@@ -42,6 +54,10 @@
             display: flex;
             flex-direction: row;
             justify-content: space-evenly;
+
+            @media only screen and (max-width: 1000px) {
+                flex-direction: column;
+            }
         }
 
         .backend-list {
@@ -57,6 +73,21 @@
             flex-wrap: wrap;
             align-content: center;
             height: 100px;
+
+            @media only screen and (max-width: 1000px) {
+                flex-direction: row;
+                height: initial;
+            }
+        }
+
+        .example-item {
+            @media only screen and (max-width: 1000px) {
+                width: 33vw;
+            }
+
+            @media only screen and (max-width: 500px) {
+                width: 50vw;
+            }
         }
 
         .example-link {
@@ -75,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">
@@ -116,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>