Skip to content
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

Improve styling of the example/s graphics API callout #1918

Merged
merged 11 commits into from
Jan 29, 2025
Merged

Improve styling of the example/s graphics API callout #1918

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
9c4f974
Add `wgsl` syntax highlighting
doup Dec 10, 2024
68c8c37
Add "tabs" BEM component
doup Dec 10, 2024
dceda53
Add tabs for the code in examples
doup Dec 10, 2024
294766b
Fix typo
doup Dec 10, 2024
e730ef4
Fix lint errors
doup Dec 10, 2024
f5691e8
Improve example web graphics API callout styling
doup Dec 11, 2024
66edbc9
Link example pages directly between them without going through the index
doup Dec 11, 2024
6464723
Merge branch 'main' into example-callout
doup Dec 14, 2024
f5b5e45
Revert Cargo.lock
doup Dec 14, 2024
0e4bc2a
Use callout in example listings
doup Dec 14, 2024
541e88e
Tweak code format
doup Dec 14, 2024
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
6 changes: 5 additions & 1 deletion sass/components/_callout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.callout {
margin-block: 32px;
padding: 16px;
padding: 12px 16px;
border-radius: 4px;
background-color: var(--callout-bg-color);
border-top: 4px solid var(--callout-accent-color);
Expand All @@ -14,6 +14,10 @@
margin-bottom: 0;
}

&--plain {
border-top: 0;
}

&,
&--info {
--callout-accent-color: #5944e0;
Expand Down
13 changes: 9 additions & 4 deletions sass/components/_example.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,15 @@
&__header {
display: grid;
gap: 8px;
margin: 16px 0 8px;
margin: 16px 0 16px;
align-items: baseline;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"title title"
"back github"
;
"back github";

@media #{$bp-tablet-portrait-up} {
margin: 24px 0 8px;
margin: 32px 0 16px;
grid-template-areas: "back title github";
grid-template-columns: 150px 1fr 150px;
}
Expand Down Expand Up @@ -51,4 +50,10 @@
&__code-tabs {
margin-top: 16px;
}

&__callout {
margin-top: 2px;
margin-block: 4px 16px !important;
font-size: 1rem !important;
}
}
7 changes: 4 additions & 3 deletions templates/example-webgpu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@

{% block examples_url %}/examples-webgpu{% endblock examples_url %}
{% block wasm_base_url %}https://bevy-webgpu-examples.pages.dev{% endblock wasm_base_url %}
{% block intro %}
<h2 class="warning">Support Warning</h2>
{% block callout_modifier %}warning{% endblock callout_modifier %}
{% block callout %}
<strong>Support Warning.</strong>
WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
If the example doesn't work on your configuration, you can check the WebGL2 example <a href="{{ page.path | replace(from="/examples-webgpu/", to="/examples/") }}">here</a>.
{% endblock intro %}
5 changes: 3 additions & 2 deletions templates/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

{% block examples_url %}/examples{% endblock examples_url %}
{% block wasm_base_url %}https://bevy-webgl2-examples.pages.dev{% endblock wasm_base_url %}
{% block intro %}
{% block callout_modifier %}info{% endblock callout_modifier %}
{% block callout %}
This example is running in WebGL2 and should work in most browsers.
You can check the WebGPU examples <a href="/examples-webgpu">here</a>.
You can check the WebGPU example <a href="{{ page.path | replace(from="/examples/", to="/examples-webgpu/") }}">here</a>.
{% endblock intro %}
10 changes: 7 additions & 3 deletions templates/examples-webgpu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
These examples demonstrate how to use Bevy's features in a minimal, easy to understand way.
Click an example below to run it in your browser (using WASM + WebGPU) and view the source code.
You can also view these examples (and others) in the <a href="https://github.com/bevyengine/bevy/tree/main/examples#examples">Bevy repo</a>.
<h2 class="warning">Support Warning</h2>
WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
<aside class="callout callout--warning">
<h3 class="warning">Support Warning</h3>
<p>
WebGPU is currently only supported on Chrome starting with version 113, and only on desktop.
If they don't work on your configuration, you can check the WebGL2 examples <a href="/examples">here</a>.
Comment on lines +10 to +11
Copy link
Member

@mockersf mockersf Jan 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

for a followup PR: this is no longer true, WebGPU also works on some mobile browsers, and on Safari TP, and Firefox Nightly
We should probably link to something like https://caniuse.com/webgpu for a list or https://browserleaks.com/webgpu so that user can test their browser instead of keeping a list ourselves

</p>
</aside>
{% endblock intro %}
4 changes: 3 additions & 1 deletion templates/examples.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,7 @@
These examples demonstrate how to use Bevy's features in a minimal, easy to understand way.
Click an example below to run it in your browser (using WASM + WebGL) and view the source code.
You can also view these examples (and others) in the <a href="https://github.com/bevyengine/bevy/tree/latest/examples#examples">Bevy repo</a>.
<p>If you would like to try WASM + WebGPU, you can explore our <a href="/examples-webgpu">live WebGPU examples</a> page.</p>
<aside class="callout callout--info">
<p>If you would like to try WASM + WebGPU, you can explore our <a href="/examples-webgpu">live WebGPU examples</a> page.</p>
</aside>
{% endblock intro %}
7 changes: 3 additions & 4 deletions templates/layouts/example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
<i class="icon icon--github"></i> View in GitHub
</a>
</div>
<div class="assets-intro media-content">
{% block intro %}{% endblock intro %}
</div>
<br />
<div class="example__canvas bevy-instance">
<div class="bevy-instance__progress-status" data-progress-status>
<div class="bevy-instance__progress-file" data-progress-file></div>
Expand All @@ -24,6 +20,9 @@ <h2 class="example__title">{{ category.title }} / {{ page.title }}</h2>
</div>
</div>
<canvas class="bevy-instance__canvas" id="bevy" width="1280" height="720"></canvas>
<aside class="example__callout media-content callout callout--plain callout--{% block callout_modifier %}{% endblock callout_modifier %}">
{% block callout %}{% endblock callout %}
</aside>
</div>

<div class="example__code-tabs tabs">
Expand Down
Loading