assets/js/script.js

@@ -65,20 +65,15 @@
 
   // filter
   $(document).ready(function () {
-    var containerEl = document.querySelector('.filtr-container');
-    if (containerEl) {
-      new Filterizr(
-        '.filtr-container',
-        {
-          layout: 'sameWidth',
-          gutterPixels: 10
-        }
-      );
-    } 
-    // active changer
+    const shuffleInstance = new Shuffle($('.filter-container'), {
+      itemSelector: '.filter-item',
+      sizer: '.filter-sizer', // could also be a selector: '.js-shuffle-sizer'
+      delimiter: ','
+    });
     $('.filter-controls li').on('click', function () {
       $('.filter-controls li').removeClass('active');
       $(this).addClass('active');
+      shuffleInstance.filter($(this).data('filter'))
     });
   });
 

config.yml

@@ -43,7 +43,7 @@ params:
     head_js:
       - https://assets.cantorgymnasium.de/jquery/v3.7/jquery.min.js
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.js
-      - https://assets.cantorgymnasium.de/filterizr/v2/dist/vanilla.filterizr.min.js
+      - https://assets.cantorgymnasium.de/shuffle/v6/shuffle.min.js
   social:
     - title: YouTube
       icon: youtube

layouts/ganztagsangebote/list.html

@@ -3,12 +3,13 @@
 <section class="section">
   <div class="container">
     {{ partial "filter-controls" . }}
-    <div class="filtr-container">
+    <div class="filter-container row">
     {{ range .Data.Pages }}
-      <div data-category="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filtr-item">
+      <div data-groups="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filter-item">
         {{ partial "ganztag" . }}
       </div>
     {{ end }}
+    <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>

layouts/termine/list.html

@@ -7,12 +7,13 @@
       <li class="list-inline-item m-3 text-uppercase" data-filter="upcoming">Anstehend</li>
       <li class="list-inline-item m-3 text-uppercase" data-filter="past">Vergangen</li>
     </ul>
-    <div class="filtr-container row mx-auto">
+    <div class="filter-container row mx-auto">
       {{ range .Params.events }}
-      <div class="filtr-item col-12" data-category="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
+      <div class="filter-item col-12" data-groups="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
         {{ partial "termin" . }}
       </div>
       {{ end }}
+      <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>

layouts/wettbewerbe/list.html

@@ -3,12 +3,13 @@
 <section class="section">
   <div class="container">
     {{ partial "filter-controls" . }}
-    <div class="row filtr-container">
+    <div class="filter-container row">
       {{ range .Data.Pages }}
-      <div data-category="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filtr-item">
+      <div data-groups="{{ .Params.category | urlize }}" class="col-lg-4 col-sm-6 filter-item">
         {{ partial "card-category" . }}
       </div>
       {{ end }}
+      <div class="filter-sizer col-1"></div>
     </div>
   </div>
 </section>

static/admin/previews/page-previews/event-preview.js

@@ -31,11 +31,11 @@ const EventPreview = ({ widgetsFor, entry }) => {
         ),
         h(
           "div",
-          { className: "filtr-container row" },
+          { className: "filter-container row" },
           widgetsFor("events").map((event) =>
             h(
               "div",
-              { className: "filtr-item col-12" },
+              { className: "filter-item col-12" },
               h(
                 "div",
                 {