Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

load more > team members #61

Merged
merged 1 commit into from
Oct 8, 2024
Merged

load more > team members #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions site/assets/js/views/about.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
}
});
}


Expand Down
6 changes: 6 additions & 0 deletions site/assets/scss/common/_global.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
3 changes: 3 additions & 0 deletions site/hugo_stats.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
"btn-outline-light",
"btn-outline-primary",
"btn-primary",
"btn-showmore",
"btn-sm",
"button",
"c-caption",
Expand Down Expand Up @@ -299,6 +300,8 @@
"md",
"me-1",
"me-10",
"me-14",
"me-16",
"me-2",
"me-20",
"me-3",
Expand Down
4 changes: 2 additions & 2 deletions site/layouts/partials/team-member-compact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}") }}
Expand Down
12 changes: 7 additions & 5 deletions site/layouts/ueber-uns/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
Expand Down Expand Up @@ -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 }}
Expand Down
Loading