mirror of
https://github.com/ivabus/www
synced 2024-11-24 01:55:06 +03:00
118 lines
2.8 KiB
HTML
118 lines
2.8 KiB
HTML
<!-- Package Grid -->
|
||
|
||
<section>
|
||
|
||
<!-- Package Grid Header -->
|
||
<hr>
|
||
<div class="container package-grid-header">
|
||
<h3>packages</h3>
|
||
<p>There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here.</p>
|
||
</div>
|
||
<hr>
|
||
<div class="container package-grid">
|
||
|
||
<!-- Start Package Grid -->
|
||
|
||
<div class="row package-row black-bg g-0">
|
||
<div class="package-grid">
|
||
{{ range $.Site.Data.packages }}
|
||
{{- partial "package-thumbnail.html" .}}
|
||
{{ end }}
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<div id="loadMoreSection" class="container small">
|
||
<div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
|
||
</div>
|
||
</section>
|
||
|
||
<style>
|
||
.container.small {
|
||
padding-top: 1em;
|
||
padding-bottom: 1em;
|
||
}
|
||
.package-grid {
|
||
display: grid;
|
||
grid-template-columns: auto auto;
|
||
}
|
||
#loadMorePackagesBtn {
|
||
cursor: pointer;
|
||
font-size: 2rem;
|
||
font-family: "pp-neue-machina", sans-serif;
|
||
background-color: #1a1a1a;
|
||
color: #fff;
|
||
padding-top: 0.279vw;
|
||
text-decoration: none;
|
||
text-transform: uppercase;
|
||
transition: 0.1s linear;
|
||
}
|
||
#loadMorePackagesBtn .icon-enter-arrow {
|
||
display: inline-block;
|
||
position: relaitve;
|
||
transition: all 0.2s ease-in-out;
|
||
}
|
||
#loadMorePackagesBtn:hover .icon-enter-arrow{
|
||
display: inline-block;
|
||
transform: rotate(-45deg) !important;
|
||
}
|
||
#loadMoreSection.hidden {
|
||
display: none;
|
||
}
|
||
@media only screen and (max-width: 576px) {
|
||
#loadMoreSection {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 576px) {
|
||
.package-grid {
|
||
/* changes to 3 column thumbs */
|
||
grid-template-columns: auto auto auto;
|
||
}
|
||
}
|
||
|
||
@media only screen and (min-width: 992px) {
|
||
.package-grid {
|
||
/* changes to 4 column thumbs */
|
||
grid-template-columns: auto auto auto auto;
|
||
}
|
||
}
|
||
|
||
.card-thumbnail.hidden {
|
||
height: 0px;
|
||
padding: 0px;
|
||
margin: 0px;
|
||
border: 0px;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
|
||
<script language="javascript" type="text/javascript">
|
||
let limit = 16;
|
||
const packages = document.querySelectorAll('.card-thumbnail');
|
||
const packagesCount = packages.length;
|
||
|
||
function refreshDisplayedPackages() {
|
||
for(let i = 0; i < packagesCount; i++) {
|
||
if (i >= limit) {
|
||
packages[i].classList.add('hidden');
|
||
} else {
|
||
packages[i].classList.remove('hidden');
|
||
}
|
||
}
|
||
}
|
||
|
||
const loadMoreButton = document.getElementById('loadMorePackagesBtn');
|
||
loadMoreButton.addEventListener('click',() => {
|
||
limit += 16;
|
||
refreshDisplayedPackages();
|
||
if (limit >= packagesCount) {
|
||
const loadMoreSection = document.getElementById('loadMoreSection');
|
||
loadMoreSection.classList.add('hidden');
|
||
}
|
||
},false);
|
||
|
||
refreshDisplayedPackages();
|
||
</script>
|