Skip to content

Add fullscreen button to examples #2274

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+80 −30
Open

Add fullscreen button to examples #2274

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
08d02d4
fullscreen button in examples
laundmo Oct 1, 2025
b9fdbb5
fix icon size/boldness
laundmo Oct 1, 2025
42db0c1
Fix fullscreen border radius selector
laundmo Oct 1, 2025
8adcadb
Satisfy linter
laundmo Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions sass/components/_bevy-instance.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,8 @@
border-radius: $border-radius;
background: var(--bevy-instance-canvas-color);
}

&__canvas:fullscreen {
border-radius: 0;
}
}
17 changes: 12 additions & 5 deletions sass/components/_example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@
gap: 8px;
margin: 16px 0 16px;
align-items: baseline;
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 35px auto;
grid-template-areas:
"title title"
"back github";
"title title title"
"back fullscreen github";

@media #{$bp-tablet-portrait-up} {
margin: 32px 0 16px;
grid-template-areas: "back title github";
grid-template-columns: 150px 1fr 150px;
grid-template-areas: "back title fullscreen github";
grid-template-columns: 150px 1fr 35px 150px;
}
}

Expand All @@ -26,6 +26,7 @@
}

&__back,
&__fullscreen,
&__github {
font-size: 1rem;

Expand All @@ -42,6 +43,12 @@
grid-area: back;
}

&__fullscreen {
grid-area: fullscreen;
text-align: center;
font-size: x-large;
}

&__github {
grid-area: github;
text-align: right;
Expand Down
21 changes: 11 additions & 10 deletions sass/components/_icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,19 @@
("github", 24),
("pencil", 19),
("times", 16),
("fullscreen", 24),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Portrait Mode Phone Screenshot Screen Shot 2025-10-01 at 20 03 30
Widescreen Computer Screenshot image

In the screenshots above, the size of the fullscreen icon seems way to big on mobile, and maybe in an awkward place and or too big as well on PC. Not sure the exact solution, but it did pop out at me.

);

@each $icon in $icons {
// Icons always must have 24px height
// This is just for icon height consistency
$ratio: math.div(nth($icon, 2), 24);
@each $icon in $icons {
// Icons always must have 24px height
// This is just for icon height consistency
$ratio: math.div(nth($icon, 2), 24);

&--#{nth($icon, 1)} {
height: var(--icon-height);
width: calc(var(--icon-height) * #{$ratio});
-webkit-mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
&--#{nth($icon, 1)} {
height: var(--icon-height);
width: calc(var(--icon-height) * #{$ratio});
-webkit-mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
mask-image: url("/assets/icon-#{nth($icon, 1)}.svg");
}
}
}
}
36 changes: 36 additions & 0 deletions static/assets/icon-fullscreen.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
32 changes: 17 additions & 15 deletions templates/layouts/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@
{% set parent_idx = total_ancestors - 1 %}
{% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}
<h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
<a class="example__back" href="{% block examples_url %}{% endblock examples_url %}"><i class="icon icon--chevron-left"></i> Back to examples</a>
<a class="example__github"
href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
<a class="example__back" href="{% block examples_url %}{% endblock examples_url %}"><i
class="icon icon--chevron-left"></i> Back to examples</a>
<a id="fullscreen-button" class="example__fullscreen"><i class="icon icon--fullscreen"></i></a>
Copy link
Member

@TrialDragon TrialDragon Oct 2, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Immediate concern is that this is an improper use of the anchor element. Anchors are meant for navigation to other places, whether they be to files, other web pages, another section in the same page, or even to someones email address. For an action like initializing fullscreen we should be using a button element in an anchor elements stead. Why this matters is accessibility and semantics as text to speech tools will have little context with this anchor that is not an actual anchor, and so any accessibility functions with regards to ARIA and such you get with using the semantic element properly is lost.

  • Should use <button> and not <a>
  • Should have a name to give text to speech readers a description, "Enter fullscreen" […] </i>Enter fullscreen</a>. This can be hidden via CSS (immediate thought is div around text applying the CSS tricks mentioned in the article): https://www.a11yproject.com/posts/how-to-hide-content/ .

See this for more on button accessibility: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#accessibility

<a class="example__github" href="https://github.com/bevyengine/bevy/blob/latest/{{ page.extra.github_code_path }}">
<i class="icon icon--github"></i> View in GitHub
</a>
</div>
Expand All @@ -30,9 +31,9 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
</aside>
</div>
{% if page.content %}
<div class="example__explanation media-content">
{{ page.content | safe }}
</div>
<div class="example__explanation media-content">
{{ page.content | safe }}
</div>
{% endif %}
<div class="example__code-tabs tabs">
{% set filename = page.extra.code_path | split(pat="/") | last %}
Expand All @@ -45,17 +46,17 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
{{ code_md | markdown(inline=true) | safe }}
</div>
</div>

{% for shader in page.extra.shader_code_paths %}
<input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}">
<label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label>
<div class="tabs__panel" tabindex="1">
<div class="example__code media-content">
{% set code = load_data(path="static/assets/examples/" ~ shader) %}
{% set code_md = "```wgsl" ~ newline ~ code ~ "```" %}
{{ code_md | markdown(inline=true) | safe }}
</div>
<input class="tabs__radio" tabindex="1" name="tabs" type="radio" id="tab{{ loop.index }}">
<label class="tabs__label" for="tab{{ loop.index }}"><code>{{ shader }}</code></label>
<div class="tabs__panel" tabindex="1">
<div class="example__code media-content">
{% set code = load_data(path="static/assets/examples/" ~ shader) %}
{% set code_md = "```wgsl" ~ newline ~ code ~ "```" %}
{{ code_md | markdown(inline=true) | safe }}
</div>
</div>
{% endfor %}
</div>
</div>
Expand Down Expand Up @@ -134,5 +135,6 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
throw error;
}
});
document.getElementById("fullscreen-button").addEventListener("click", () => canvasEl.requestFullscreen());
</script>
{% endblock content %}