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 @@ -
{{ .subtitle }}
{{ with .img }} @@ -60,12 +60,14 @@