studio-variable/index-main
4
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

masonry grid on home
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-26 15:36:51 +01:00
parent 69e0b3527e
commit 4c34b3c398
2 changed files with 26 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

44
assets/js/script.js
View file

@ -34,25 +34,29 @@ window.onload = async function () {
scrollBack(); scrollBack();
navInvestigation(); navInvestigation();
var elem = document.querySelector('.grid-masonry'); var elems = document.querySelectorAll('.grid-masonry');
var msnry = null; var msnries = [];
function initMasonry() { function initMasonry() {
if (!elem) return; if (!elems.length) return;
if (window.innerWidth >= responsiveSmall) { if (window.innerWidth >= responsiveSmall) {
if (!msnry) { elems.forEach(function(elem, i) {
msnry = new Masonry(elem, { if (!msnries[i]) {
itemSelector: '.card--block:not(.is-sort-hidden)', msnries[i] = new Masonry(elem, {
columnWidth: '.grid-sizer', itemSelector: '.card--block:not(.is-sort-hidden)',
percentPosition: true, columnWidth: '.grid-sizer',
gutter: 26 percentPosition: true,
}); gutter: 26
} });
}
});
} else { } else {
if (msnry) { msnries.forEach(function(msnry, i) {
msnry.destroy(); if (msnry) {
msnry = null; msnry.destroy();
} msnries[i] = null;
}
});
} }
} }
@ -60,10 +64,12 @@ window.onload = async function () {
window.addEventListener('resize', initMasonry); window.addEventListener('resize', initMasonry);
initSort(() => { initSort(() => {
if (msnry) { msnries.forEach(function(msnry) {
msnry.reloadItems(); if (msnry) {
msnry.layout(); msnry.reloadItems();
} msnry.layout();
}
});
}); });

4
site/templates/home.php
View file

@ -185,7 +185,6 @@ $count = max(4, (int)$section->count()->value());
<?php elseif ($type === 'packages'): ?> <?php elseif ($type === 'packages'): ?>
<div class="container-cards">
<?php foreach (page('packages')->children()->listed()->limit($count) as $package): <?php foreach (page('packages')->children()->listed()->limit($count) as $package):
$cover = $package->cover()->toFile(); $cover = $package->cover()->toFile();
$investigationsCount = $package->linkedContent()->toPages()->count(); $investigationsCount = $package->linkedContent()->toPages()->count();
@ -223,9 +222,8 @@ $count = max(4, (int)$section->count()->value());
<a class="link-block" href="<?= $package->url() ?>" aria-hidden="true"></a> <a class="link-block" href="<?= $package->url() ?>" aria-hidden="true"></a>
</article> </article>
<?php endforeach ?> <?php endforeach ?>
</div>
<?php elseif ($type === 'projects'): ?> <?php elseif ($type === 'projects'): ?>
<div class="grid-masonry"> <div class="grid-masonry">
<div class="grid-sizer"></div> <div class="grid-sizer"></div>