nordic-dev.net/wgpu
nordic-dev.net/wgpu
2
0
Fork 0
mirror of https://github.com/gfx-rs/wgpu.git synced 2024-11-21 22:33:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change examples page menu on smaller screens (#4958)

Browse Source
This commit is contained in:
Nathan Adams 2024-01-02 19:27:39 +01:00 committed by GitHub
parent e26a853654
commit aa48558e3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 71 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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)

1
examples/src/main.rs
View File

@ -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();
}
}

71
examples/static/index.html
View File

@ -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>