From c3a87c0891f0eefdf404680c36987ba663d05826 Mon Sep 17 00:00:00 2001
From: jan <mail@fint.ch>
Date: Tue, 8 Oct 2024 10:46:04 +0200
Subject: [PATCH] load more > team members

---
 site/assets/js/views/about.js                 | 31 +++++++++++++++++++
 site/assets/scss/common/_global.scss          |  6 ++++
 site/hugo_stats.json                          |  3 ++
 .../layouts/partials/team-member-compact.html |  4 +--
 site/layouts/ueber-uns/list.html              | 12 ++++---
 5 files changed, 49 insertions(+), 7 deletions(-)

diff --git a/site/assets/js/views/about.js b/site/assets/js/views/about.js
index 959db8a..84df5ea 100644
--- a/site/assets/js/views/about.js
+++ b/site/assets/js/views/about.js
@@ -18,6 +18,37 @@ export default function() {
         el.classList.toggle('active');
       });
     });
+
+
+    // Hide more than 6 team members
+    const teamMembers = Array.from(team);
+    const showMore = document.querySelector('.btn-showmore');
+    let visibleCount = window.innerWidth > 768 ?  6 : 3;
+    const counter = visibleCount
+
+
+    teamMembers.slice(visibleCount).forEach(member => {
+      member.classList.add('d-none');
+    });
+
+
+    showMore.addEventListener('click', function() {
+      const hiddenMembers = teamMembers.slice(visibleCount, visibleCount + counter);
+      hiddenMembers.forEach(member => {
+      member.classList.remove('d-none');      
+    });
+
+    window.scrollTo({
+      top: hiddenMembers[0].offsetTop - 100,
+      behavior: 'smooth'
+    });
+
+    visibleCount += counter;
+    
+    if (visibleCount >= teamMembers.length) {
+      showMore.classList.add('d-none');
+      }
+    });
   }
 
  
diff --git a/site/assets/scss/common/_global.scss b/site/assets/scss/common/_global.scss
index 419da7d..d314c99 100644
--- a/site/assets/scss/common/_global.scss
+++ b/site/assets/scss/common/_global.scss
@@ -461,3 +461,9 @@ a {
   padding-right: var(--bs-gutter-x);
   padding-left: var(--bs-gutter-x);
 }
+
+@include media-breakpoint-down(md) {
+  .overflow-x-hidden {
+    overflow-x: scroll !important;
+  }
+}
diff --git a/site/hugo_stats.json b/site/hugo_stats.json
index 7fcb95b..88728ab 100644
--- a/site/hugo_stats.json
+++ b/site/hugo_stats.json
@@ -109,6 +109,7 @@
       "btn-outline-light",
       "btn-outline-primary",
       "btn-primary",
+      "btn-showmore",
       "btn-sm",
       "button",
       "c-caption",
@@ -299,6 +300,8 @@
       "md",
       "me-1",
       "me-10",
+      "me-14",
+      "me-16",
       "me-2",
       "me-20",
       "me-3",
diff --git a/site/layouts/partials/team-member-compact.html b/site/layouts/partials/team-member-compact.html
index 3d12c79..01068cc 100644
--- a/site/layouts/partials/team-member-compact.html
+++ b/site/layouts/partials/team-member-compact.html
@@ -1,5 +1,5 @@
-<div data-scroll class="col person">
-  <div class="inner position-relative">
+<div  class="col person">
+  <div data-scroll class="inner position-relative">
 
     {{ if .image }}
     {{- partial "img" (dict "page" . "src" .image "width" 392 "process" "fill 784x1056" "alt" "{{ .title  }}") }}
diff --git a/site/layouts/ueber-uns/list.html b/site/layouts/ueber-uns/list.html
index ab98fc4..fe7030e 100644
--- a/site/layouts/ueber-uns/list.html
+++ b/site/layouts/ueber-uns/list.html
@@ -11,8 +11,8 @@
       <div class="row flex-nowrap">
 
         {{ range .items}}
-        <div class="col-8 col-md-6">
-          <div data-scroll_ class="timeline-item me-20 me-lg-48">
+        <div class="col-10 col-md-6">
+          <div data-scroll_ class="timeline-item me-14 me-lg-48">
               <h2>{{ .title }}</h2>
               <p>{{ .subtitle }}</p>
               {{ with .img }}
@@ -60,12 +60,14 @@ <h3 data-scroll class="h4">{{ .title }}</h3>
     <h2 id="team" data-scroll class="mb-5">{{ .title | markdownify }}</h2>
   </div>
 
-  <div class="team-list row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-8 mb-16 mb-lg-32">
- 
+  <div class="team-list row row-cols-1 row-cols-md-2 row-cols-lg-3 gy-8 mb-4">
     {{ range .team_member }}
         {{ partial "team-member-compact" . }}
     {{ end }}
- 
+  </div>
+
+  <div data-scroll class="d-flex mb-16 mb-lg-32">
+    <button class="btn btn-sm btn-outline-primary btn-showmore mx-auto">Mehr anzeigen</button>
   </div>
 
   {{ end }}