fixed sort by dropdown arrow error

Signed-off-by: Darshan Lahamage <[email protected]>
meshery · Jan 2, 2025 · ffdd961 · ffdd961
1 parent 17686b7
commit ffdd961
Showing 1 changed file with 38 additions and 29 deletions.
diff --git a/collections/_pages/catalog.html b/collections/_pages/catalog.html
@@ -8,15 +8,18 @@
   .selected a {
     background-color: #222222;
   }
+
   .sorting-options {
     margin: 0 20px 0 20px;
     display: flex;
     align-items: center;
+
     @media (max-width: 506px) {
       text-align: center;
       margin: auto;
     }
   }
+
   #sort {
     padding: 10px;
     font-size: 16px;
@@ -28,10 +31,17 @@
     background-repeat: no-repeat;
     background-position: right 10px top 50%;
     margin-right: 10px;
+
     @media (max-width: 506px) {
-     display: none;
+      display: none;
     }
   }
+
+  #sort.no-arrow {
+    background-image: none;
+    /* Removes the arrow */
+  }
+
   #search {
     width: 30%;
     flex-grow: 1;
@@ -41,9 +51,11 @@
     box-sizing: border-box;
     top: 0;
   }
+
   .row {
     margin: 10px;
   }
+
   .column.column-lg.patternCard {
     display: block;
   }
@@ -65,45 +77,33 @@ <h2 class="not-found" style="display: none;" id="not-found">
     {% for pattern in catalog %} {% if pattern.patternInfo and pattern.Status !=
     "ComingSoon" %}
     {% assign last = pattern.compatibility | last %}
-    <div
-      class="column column-lg patternCard"
-      filter="{{ pattern.name }}"
-      type="{{ pattern.type }}"
-      technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
-      status="{{ pattern.Status }}"
-      style="display: {% if count < 10 %}block{% else %}none{% endif %};"
-    >
+    <div class="column column-lg patternCard" filter="{{ pattern.name }}" type="{{ pattern.type }}"
+      technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', ' -' }}"{% if item !=last
+      %},{% endif %}{% endfor %}]' status="{{ pattern.Status }}"
+      style="display: {% if count < 10 %}block{% else %}none{% endif %};">
       {% include card.html %}
       <!-- modal included -->
       {% include modal.html %}
     </div>
     {% elsif pattern.filterInfo %}
     {% assign last = pattern.compatibility | last %}
-    <div
-      class="column column-lg patternCard"
-      filter="{{ pattern.name }}"
-      type="{{ pattern.type }}"
-      technology='["wasm-filter"{% for item in pattern.compatibility %}{% if forloop.first %}, {% endif %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
-      status="{{ pattern.Status }}"
-      style="display: {% if count < 10 %}block{% else %}none{% endif %};"
-    >
+    <div class="column column-lg patternCard" filter="{{ pattern.name }}" type="{{ pattern.type }}"
+      technology='["wasm-filter"{% for item in pattern.compatibility %}{% if forloop.first %}, {% endif %}"{{ item | downcase | replace: ' ', '
+      -' }}"{% if item !=last %},{% endif %}{% endfor %}]' status="{{ pattern.Status }}"
+      style="display: {% if count < 10 %}block{% else %}none{% endif %};">
       {% include wasm-card.html %}
       <!-- modal included -->
       {% include modal.html %} {% include card-modal.html %}
     </div>
     {% elsif pattern.patternInfo and pattern.Status == "ComingSoon" %}
     {% assign last = pattern.compatibility | last %}
-     <div
-      class="column column-lg patternCard"
-      filter="{{ pattern.name }}"
-      type="{{ pattern.type }}"
-      technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
-      status="{{ pattern.Status }}"
-      style="display: {% if count < 10 %}block{% else %}none{% endif %};"
-    >
+    <div class="column column-lg patternCard" filter="{{ pattern.name }}" type="{{ pattern.type }}"
+      technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', ' -' }}"{% if item !=last
+      %},{% endif %}{% endfor %}]' status="{{ pattern.Status }}"
+      style="display: {% if count < 10 %}block{% else %}none{% endif %};">
       {% include coming-soon.html %}
     </div>
-    {% endif %} 
+    {% endif %}
     {% assign count = count | plus: 1 %}
     {% endfor %}
   </div>
@@ -117,6 +117,15 @@ <h2 class="not-found" style="display: none;" id="not-found">
 
     var catalog = Array.from(cards);
 
+    var sortElement = this;
+
+    // Check if a valid option is selected
+    if (sortElement.value) {
+      sortElement.classList.add("no-arrow"); // Add the class to hide the arrow
+    } else {
+      sortElement.classList.remove("no-arrow"); // Remove the class to show the arrow
+    }
+
     if (sortValue === "asc") {
       catalog = catalog.sort(function (a, b) {
         if (a.getAttribute("status") === "ComingSoon") {
@@ -186,11 +195,11 @@ <h2 class="not-found" style="display: none;" id="not-found">
   //   });
   // });
 
-  document.addEventListener("themeChange",(e)=> {
+  document.addEventListener("themeChange", (e) => {
     // load the snapshot version based on theme 
     document.querySelectorAll(".pattern-image").forEach(e => {
       e.src = event.detail.value == "dark-mode" ? e.dataset.snapshotDark : e.dataset.snapshotLight;
     });
-  
+
   }) 
-</script>
+</script>