fix: version filter should be a <select> (#32)

* fix: version filter should be a <select> * fix: change window.location.search instead
electron · Dec 14, 2023 · 3696bba · 3696bba
1 parent e837e20
commit 3696bba
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 8 deletions.
diff --git a/src/static/css/releases.css b/src/static/css/releases.css
@@ -68,6 +68,16 @@
   box-shadow: var(--shadow-elevation-medium);
 }
 
+#version-select {
+  border: 1px solid whitesmoke;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 10px;
+  font-size: 20px;
+  font-weight: bolder;
+  color: var(--electron-color-dark);
+}
+
 .releases__filter--selected {
   border: 1px solid whitesmoke;
   border-left: 6px solid var(--electron-color-light);

diff --git a/src/views/releases.handlebars b/src/views/releases.handlebars
@@ -22,14 +22,14 @@
         </div>
       </a>
     </div>
-  </div>
-  <div class="release-filter">
     <strong>Filter by major release</strong>
-    <div>
-    <a href="?">All</a>
-      {{#each majors}}
-        <a href="?version={{this}}" {{#ifEquals this ../major}}class="selected-release-filter"{{/ifEquals}}>{{this}}.x</a>
-      {{/each}}
+    <div class="release-version-selector-container">
+      <select id="version-select" onchange="showSelectedVersion()">
+        <option value="All">All</option>
+        {{#each majors}}
+        <option value="{{this}}" {{#ifEquals this ../major}}selected{{/ifEquals}}>{{this}}.x</option>
+        {{/each}}
+      </select>
     </div>
   </div>
   </div>
@@ -41,6 +41,13 @@
       </article>
     {{/each}}
   </div>
-
 </div>
+
+<script>
+  function showSelectedVersion() {
+    const { value: version } = document.getElementById("version-select");
+    window.location.search = version === 'All' ? '' : `version=${version}`;
+  }
+</script>
+
 {{{paginate this.pages this.page this.prev this.next this.first this.last}}}