From 08d02d4a53cb2f651775b06e83c603ff8abef3c8 Mon Sep 17 00:00:00 2001 From: laund Date: Wed, 1 Oct 2025 14:23:01 +0200 Subject: [PATCH 1/4] fullscreen button in examples --- sass/components/_bevy-instance.scss | 6 ++++- sass/components/_example.scss | 19 ++++++++++----- sass/components/_icon.scss | 3 ++- static/assets/icon-fullscreen.svg | 36 +++++++++++++++++++++++++++++ templates/layouts/example.html | 34 ++++++++++++++------------- 5 files changed, 74 insertions(+), 24 deletions(-) create mode 100644 static/assets/icon-fullscreen.svg diff --git a/sass/components/_bevy-instance.scss b/sass/components/_bevy-instance.scss index 5450e9ed54..792c5cd1ad 100644 --- a/sass/components/_bevy-instance.scss +++ b/sass/components/_bevy-instance.scss @@ -71,5 +71,9 @@ height: auto !important; border-radius: $border-radius; background: var(--bevy-instance-canvas-color); + + :fullscreen { + border-radius: 0; + } } -} +} \ No newline at end of file diff --git a/sass/components/_example.scss b/sass/components/_example.scss index 8b454406a3..cc3c7fde11 100644 --- a/sass/components/_example.scss +++ b/sass/components/_example.scss @@ -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; } } @@ -26,6 +26,7 @@ } &__back, + &__fullscreen, &__github { font-size: 1rem; @@ -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; @@ -61,4 +68,4 @@ margin-block: 4px 16px !important; font-size: 1rem !important; } -} +} \ No newline at end of file diff --git a/sass/components/_icon.scss b/sass/components/_icon.scss index a1be364d98..e982e35072 100644 --- a/sass/components/_icon.scss +++ b/sass/components/_icon.scss @@ -21,6 +21,7 @@ ("github", 24), ("pencil", 19), ("times", 16), + ("fullscreen", 16), ); @each $icon in $icons { @@ -35,4 +36,4 @@ mask-image: url("/assets/icon-#{nth($icon, 1)}.svg"); } } -} +} \ No newline at end of file diff --git a/static/assets/icon-fullscreen.svg b/static/assets/icon-fullscreen.svg new file mode 100644 index 0000000000..3d8b408b4e --- /dev/null +++ b/static/assets/icon-fullscreen.svg @@ -0,0 +1,36 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/templates/layouts/example.html b/templates/layouts/example.html index 2c1ac59f2e..9aa541b38a 100644 --- a/templates/layouts/example.html +++ b/templates/layouts/example.html @@ -6,9 +6,10 @@ {% set parent_idx = total_ancestors - 1 %} {% set category = get_section(path=page.ancestors | nth(n=parent_idx)) %}

{{ category.title }} / {{ page.title }}

- Back to examples - + Back to examples + + View in GitHub @@ -30,9 +31,9 @@

{{ category.title }} / {{ page.title }}

{% if page.content %} -
- {{ page.content | safe }} -
+
+ {{ page.content | safe }} +
{% endif %}
{% set filename = page.extra.code_path | split(pat="/") | last %} @@ -45,17 +46,17 @@

{{ category.title }} / {{ page.title }}

{{ code_md | markdown(inline=true) | safe }}
- + {% for shader in page.extra.shader_code_paths %} - - -
-
- {% set code = load_data(path="static/assets/examples/" ~ shader) %} - {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %} - {{ code_md | markdown(inline=true) | safe }} -
+ + +
+
+ {% set code = load_data(path="static/assets/examples/" ~ shader) %} + {% set code_md = "```wgsl" ~ newline ~ code ~ "```" %} + {{ code_md | markdown(inline=true) | safe }}
+
{% endfor %}
@@ -134,5 +135,6 @@

{{ category.title }} / {{ page.title }}

throw error; } }); + document.getElementById("fullscreen-button").addEventListener("click", () => canvasEl.requestFullscreen()); -{% endblock content %} +{% endblock content %} \ No newline at end of file From b9fdbb54df092e4b4e8f665685cd79cccdf62cda Mon Sep 17 00:00:00 2001 From: laund Date: Wed, 1 Oct 2025 18:05:57 +0200 Subject: [PATCH 2/4] fix icon size/boldness --- sass/components/_icon.scss | 2 +- static/assets/icon-fullscreen.svg | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/sass/components/_icon.scss b/sass/components/_icon.scss index e982e35072..34df2a3be0 100644 --- a/sass/components/_icon.scss +++ b/sass/components/_icon.scss @@ -21,7 +21,7 @@ ("github", 24), ("pencil", 19), ("times", 16), - ("fullscreen", 16), + ("fullscreen", 24), ); @each $icon in $icons { diff --git a/static/assets/icon-fullscreen.svg b/static/assets/icon-fullscreen.svg index 3d8b408b4e..549da5726c 100644 --- a/static/assets/icon-fullscreen.svg +++ b/static/assets/icon-fullscreen.svg @@ -1,36 +1,36 @@ - + - + - + - + - + - + - + - + - + \ No newline at end of file From 42db0c1a6744167087c262e7df7fa3e8ed29f0f9 Mon Sep 17 00:00:00 2001 From: laund Date: Wed, 1 Oct 2025 18:16:33 +0200 Subject: [PATCH 3/4] Fix fullscreen border radius selector --- sass/components/_bevy-instance.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/sass/components/_bevy-instance.scss b/sass/components/_bevy-instance.scss index 792c5cd1ad..420f9f9e80 100644 --- a/sass/components/_bevy-instance.scss +++ b/sass/components/_bevy-instance.scss @@ -71,9 +71,9 @@ height: auto !important; border-radius: $border-radius; background: var(--bevy-instance-canvas-color); + } - :fullscreen { - border-radius: 0; - } + &__canvas:fullscreen { + border-radius: 0; } } \ No newline at end of file From 8adcadb207d97fc438d087578485ff95df8a2c7c Mon Sep 17 00:00:00 2001 From: laund Date: Wed, 1 Oct 2025 18:25:50 +0200 Subject: [PATCH 4/4] Satisfy linter --- sass/components/_bevy-instance.scss | 2 +- sass/components/_example.scss | 2 +- sass/components/_icon.scss | 20 ++++++++++---------- templates/layouts/example.html | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/sass/components/_bevy-instance.scss b/sass/components/_bevy-instance.scss index 420f9f9e80..f009ac04ba 100644 --- a/sass/components/_bevy-instance.scss +++ b/sass/components/_bevy-instance.scss @@ -76,4 +76,4 @@ &__canvas:fullscreen { border-radius: 0; } -} \ No newline at end of file +} diff --git a/sass/components/_example.scss b/sass/components/_example.scss index cc3c7fde11..7c34bb2419 100644 --- a/sass/components/_example.scss +++ b/sass/components/_example.scss @@ -68,4 +68,4 @@ margin-block: 4px 16px !important; font-size: 1rem !important; } -} \ No newline at end of file +} diff --git a/sass/components/_icon.scss b/sass/components/_icon.scss index 34df2a3be0..fbad43d520 100644 --- a/sass/components/_icon.scss +++ b/sass/components/_icon.scss @@ -24,16 +24,16 @@ ("fullscreen", 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); + @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"); + } } } -} \ No newline at end of file diff --git a/templates/layouts/example.html b/templates/layouts/example.html index 9aa541b38a..e12a4d6f45 100644 --- a/templates/layouts/example.html +++ b/templates/layouts/example.html @@ -137,4 +137,4 @@

{{ category.title }} / {{ page.title }}

}); document.getElementById("fullscreen-button").addEventListener("click", () => canvasEl.requestFullscreen()); -{% endblock content %} \ No newline at end of file +{% endblock content %}