Merge pull request #61 from acend/changes

load more > team members
acend · Oct 8, 2024 · 4496121 · 4496121
2 parents bee7b61 + c3a87c0
commit 4496121
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 }}