From 9a1f8caceb31d835f1430bf0b3ff2d1f54a17641 Mon Sep 17 00:00:00 2001
From: Denys Konovalov <kontakt@denyskon.de>
Date: Mon, 3 Apr 2023 15:53:53 +0200
Subject: [PATCH] =?UTF-8?q?Umbau=20Terminliste:=20Filter=20anstehend/verga?=
 =?UTF-8?q?ngen=20(schlie=C3=9Ft=20#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/script.js              |  2 +-
 content/german/termine/_index.md |  2 +-
 layouts/termine/list.html        | 36 ++++++++++++++++++++------------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index bbd77c51..636c03d6 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -66,7 +66,7 @@
     var containerEl = document.querySelector('.filtr-container');
     var filterizd;
     if (containerEl) {
-      filterizd = $('.filtr-container').filterizr({});
+      filterizd = $('.filtr-container').filterizr({layout: 'sameWidth', spinner: {enabled: true}});
     }
     //Active changer
     $('.filter-controls li').on('click', function () {
diff --git a/content/german/termine/_index.md b/content/german/termine/_index.md
index 65c14143..f15e7682 100644
--- a/content/german/termine/_index.md
+++ b/content/german/termine/_index.md
@@ -2,7 +2,7 @@
 title: Termine
 draft: false
 bg_image: media/backgrounds/page-title.webp
-description: Hier sind alle Termine für das laufende Schuljahr aufgelistet.
+description: Hier sind alle Termine für das laufende Schuljahr aufgelistet. Die Liste kann nach anstehenden und vergangenen Terminen gefiltert werden.
 events:
   - date: 2022-08-25T18:29:41.000+02:00
     enddate: ""
diff --git a/layouts/termine/list.html b/layouts/termine/list.html
index b9e05840..1e04d784 100644
--- a/layouts/termine/list.html
+++ b/layouts/termine/list.html
@@ -1,29 +1,39 @@
 {{ define "main" }}
 
-<section class="section">
+<section class="section-sm">
   <div class="container">
     <div class="row">
       <div class="col-12">
-        <ul class="list-unstyled">
+        <div class="row gta-cat">
+          <div class="col-12">
+            <ul class="list-inline text-center filter-controls mb-5">
+              <li class="list-inline-item m-3 text-uppercase active" data-filter="all">{{ i18n "all" }}</li>
+              <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>
+        </div>
+        <noscript>
+          <style>
+            .gta-cat {
+              display: none;
+            }
+          </style>
+        </noscript>
+        <ul class="list-unstyled filtr-container">
           {{ range .Params.events }}
-          <li class="d-md-table mb-4 w-100 border-bottom hover-shadow">
+          <li class="d-md-table mb-4 w-100 hover-shadow filtr-item" 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="d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc">
               <span class="h2 d-block">{{ time.Format "2" .date}}</span>
               <span class="d-block">{{ time.Format "Jan 2006" .date}}</span>
-              {{ with .enddate }}
-                <br>
-                bis {{ time.Format "2 Jan 2006" . }}
-              {{ end }}
+              {{ with .enddate }}<br>bis {{ time.Format "2 Jan 2006" . }}{{ end }}
             </div>
-            <div class="d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2">
+            <div class="d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2 border-bottom">
               <p class="h4 mb-0 d-block">{{ .title }}</p>
             </div>
             {{ with .location }}
-            <div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle">
-              <p>
-                <i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>
-                {{ . | markdownify }}
-              </p>
+            <div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle border-bottom">
+              <p><i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>{{ . | markdownify }}</p>
             </div>
             {{ end }}
           </li>