Hide assets/examples filters to non-JS users (#1901)

bevyengine · Dec 10, 2024 · 4e9f048 · 4e9f048
1 parent 7c3c6b7
commit 4e9f048
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/static/assets.js b/static/assets.js
@@ -142,6 +142,8 @@ if (versionsSelect) {
 
 }
 
+document.querySelector('[data-assets-filters]').classList.remove('hidden');
+
 document
     .querySelector('#assets-filter')
     .addEventListener("change", (item) => {

diff --git a/templates/assets.html b/templates/assets.html
@@ -6,17 +6,19 @@
 {% block page_content %}
   <div class="assets">
     {{ assets_macros::init_svg() }}
-    <div class="assets-search">
-      <input class="assets-search__input"
-              type="text"
-              id="assets-search"
-              placeholder="Search (ie: 0.11 MIT)">
-    </div>
-    <div class="assets-filters">
-      <label>Bevy last supported version</label>
-      <select class="asset-version-select" id="assets-filter">
-        <option value="all_versions">All</option>
-      </select>
+    <div class="hidden" data-assets-filters>
+      <div class="assets-search">
+        <input class="assets-search__input"
+                type="text"
+                id="assets-search"
+                placeholder="Search (ie: 0.15 MIT)">
+      </div>
+      <div class="assets-filters">
+        <label>Bevy last supported version</label>
+        <select class="asset-version-select" id="assets-filter">
+          <option value="all_versions">All</option>
+        </select>
+      </div>
     </div>
     <div class="assets-intro media-content">
       A collection of third-party Bevy assets, plugins, learning resources, and apps made by the community. If you

diff --git a/templates/layouts/examples.html b/templates/layouts/examples.html
@@ -8,7 +8,7 @@
     <div class="assets-intro media-content">
       {% block intro %}{% endblock intro %}
     </div>
-    <div class="assets-search">
+    <div class="assets-search hidden" data-assets-filters>
       <input class="assets-search__input"
               type="text"
               id="assets-search"
@@ -30,5 +30,5 @@ <h1 class="asset-section" id="{{ section.title | slugify }}">
       {% endif %}
     {% endfor %}
   </div>
-  <script type="module">import '/assets.js'</script>
+  <script type="module">import '/assets.js';</script>
 {% endblock page_content %}