common/static/common/scripts/app.js

@@ -111,12 +111,32 @@
 
     init();
   }
+
+  // Create function scrollFilters to manage display of box filter sort's start and end gradients
+  function scrollFilters() {
+    const boxFilterSortBtns = document.querySelector('.js-box-filter-sort-btns');
+    const boxFilterSortEnd = document.querySelector('.js-box-filter-sort-end');
+    const boxFilterSortStart = document.querySelector('.js-box-filter-sort-start');
+
+    boxFilterSortBtns.addEventListener('scroll', function() {
+      if (boxFilterSortBtns.scrollLeft == 0) {
+        boxFilterSortStart.classList.add('d-none');
+      } else if (boxFilterSortBtns.scrollLeft + boxFilterSortBtns.clientWidth == boxFilterSortBtns.scrollWidth) {
+        boxFilterSortEnd.classList.add('d-none');
+      } else {
+        boxFilterSortEnd.classList.remove('d-none');
+        boxFilterSortStart.classList.remove('d-none');
+      }
+    });
+  }
+
   // Create function init
   function init() {
     agreeWithTerms();
     btnBack();
     commentForm();
     copyInstallUrl();
+    scrollFilters();
   }
 
   document.addEventListener('DOMContentLoaded', function() {

extensions/templates/extensions/list.html

@@ -31,9 +31,8 @@
         <div class="col-md-12">
           <div class="d-flex flex-column flex-md-row">
             <div class="box box-filter-sort mb-2 mb-md-0 me-md-3 overflow-hidden p-2">
-              {# TODO: add js hide box filter sort end and start before and after scroll #}
+              <div class="box-filter-sort-start d-none h-100 js-box-filter-sort-start position-absolute start-0 top-0 w-5 z-1"></div>
-              <div class="box-filter-sort-start h-100 position-absolute start-0 top-0 w-5 z-1"></div>
+              <div class="btn-row flex-nowrap js-box-filter-sort-btns overflow-x-auto">
-              <div class="btn-row flex-nowrap overflow-x-auto">
                 {# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
                 <a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
                   <div>
@@ -55,7 +54,7 @@
                   </a>
                 {% endfor %}
               </div>
-              <div class="box-filter-sort-end end-0 h-100 position-absolute top-0 w-5"></div>
+              <div class="box-filter-sort-end end-0 h-100 js-box-filter-sort-end position-absolute top-0 w-5"></div>
             </div>
             <div class="align-items-center d-flex flex-shrink-0 justify-content-between">
               {# TODO: @back-end add sort based on select options #}