mirror of
https://github.com/ivabus/www
synced 2024-11-22 15:15:07 +03:00
add sort dropdown button beside packages header. FIX: duplicate package thumbnail elements
This commit is contained in:
parent
73f79245d8
commit
9bc69989c1
4 changed files with 123 additions and 13 deletions
|
@ -5,7 +5,10 @@
|
|||
<!-- Package Grid Header -->
|
||||
<hr>
|
||||
<div class="container package-grid-header">
|
||||
<h3>packages</h3>
|
||||
<section class="flex">
|
||||
<h3>packages</h3>
|
||||
{{- partial "sort-dropdown.html" -}}
|
||||
</section>
|
||||
<p>There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here.</p>
|
||||
</div>
|
||||
<hr>
|
||||
|
@ -90,17 +93,26 @@
|
|||
</style>
|
||||
|
||||
<script language="javascript" type="text/javascript">
|
||||
const sortOptions = {
|
||||
popularity: 'popularity',
|
||||
last_modified: 'last_modified',
|
||||
}
|
||||
let sortBy = 'popularity'; // last_modified
|
||||
let sortDirection = 'desc'; // asc
|
||||
let limit = 16;
|
||||
const packages = document.querySelectorAll('.card-thumbnail');
|
||||
const packagesCount = packages.length;
|
||||
|
||||
function getPackageThumbs() {
|
||||
const grid = document.getElementById('packageGrid');
|
||||
return Array.from(grid.childNodes).filter((e) => e.dataset && e.dataset.name);
|
||||
}
|
||||
|
||||
const packagesCount = getPackageThumbs().length;
|
||||
|
||||
function sortPackages() {
|
||||
const packages = document.querySelectorAll('.card-thumbnail');
|
||||
const packagesArray = Array.from(packages);
|
||||
const sortedPackages = packagesArray.sort((a, b) => {
|
||||
if (sortBy === 'popularity') {
|
||||
const packages = getPackageThumbs();
|
||||
|
||||
const sortedPackages = packages.sort((a, b) => {
|
||||
if (sortBy === sortOptions.popularity) {
|
||||
const aPop = +a.dataset.popularity;
|
||||
const bPop = +b.dataset.popularity;
|
||||
return sortDirection === 'asc' ? aPop-bPop : bPop - aPop;
|
||||
|
@ -110,10 +122,10 @@
|
|||
return sortDirection === 'asc' ? aDate-bDate : bDate - aDate;
|
||||
}
|
||||
});
|
||||
|
||||
const grid = document.getElementById('packageGrid');
|
||||
for(const op of packages) {
|
||||
op.remove();
|
||||
}
|
||||
grid.textContent = '';
|
||||
|
||||
for(const sp of sortedPackages) {
|
||||
grid.appendChild(sp);
|
||||
}
|
||||
|
@ -121,7 +133,7 @@
|
|||
}
|
||||
|
||||
function refreshDisplayedPackages() {
|
||||
const packages = document.querySelectorAll('.card-thumbnail');
|
||||
const packages = getPackageThumbs();
|
||||
let i = 0;
|
||||
for(const sp of packages) {
|
||||
if (i >= limit) {
|
||||
|
@ -141,6 +153,23 @@
|
|||
const loadMoreSection = document.getElementById('loadMoreSection');
|
||||
loadMoreSection.classList.add('hidden');
|
||||
}
|
||||
},false);
|
||||
}, false);
|
||||
|
||||
const dropdownPopularityBtn = document.getElementById('dropdownPopularityBtn');
|
||||
dropdownPopularityBtn.addEventListener('click',() => {
|
||||
if (sortBy != sortOptions.popularity) {
|
||||
sortBy = sortOptions.popularity;
|
||||
sortPackages();
|
||||
}
|
||||
}, false);
|
||||
|
||||
const dropdownRecentBtn = document.getElementById('dropdownRecentBtn');
|
||||
dropdownRecentBtn.addEventListener('click',() => {
|
||||
if (sortBy != sortOptions.last_modified) {
|
||||
sortBy = sortOptions.last_modified;
|
||||
sortPackages();
|
||||
}
|
||||
}, false);
|
||||
|
||||
sortPackages();
|
||||
</script>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<div class="card card-thumbnail" style="width: 100%" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
|
||||
<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
|
||||
<figure class="card-img-top" >
|
||||
<img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
|
||||
<article class="card-thumb-label">
|
||||
|
|
71
src/layouts/partials/sort-dropdown.html
Normal file
71
src/layouts/partials/sort-dropdown.html
Normal file
|
@ -0,0 +1,71 @@
|
|||
<style>
|
||||
.sorting-container{
|
||||
display:inline-block;
|
||||
font-family: "pp-neue-machina", sans-serif;
|
||||
background-color: #1a1a1a;
|
||||
border: .5px solid #ffffff;
|
||||
color: #fff;
|
||||
padding-top: 0.279vw;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
max-width: 240px;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
min-height: 34px;
|
||||
transition: 0.1s linear;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #1a1a1a;
|
||||
width: 100%;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
|
||||
z-index: 1;
|
||||
color: white;
|
||||
list-style: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-content li {
|
||||
padding: 0px 10px;
|
||||
height: 40px;
|
||||
line-height: 40px;;
|
||||
}
|
||||
|
||||
.dropdown-content li:hover {
|
||||
background: #00ffd0;
|
||||
color: black;
|
||||
|
||||
}
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-title {
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<section class="sorting-container">
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-title">SORT ORDER</div>
|
||||
<ul class="dropdown-content flex column">
|
||||
<li id="dropdownPopularityBtn">POPULARITY</li>
|
||||
<li id="dropdownRecentBtn">MOST RECENT</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -474,3 +474,13 @@ mark{
|
|||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.flex.column {
|
||||
flex-direction: column;
|
||||
}
|
Loading…
Reference in a new issue