infrastructure/extensions-website
4
8
Fork 10
Code Issues 20 Pull Requests 2 Projects Releases Wiki Activity

Extensions list: sort_by parameter #159

Merged
Márton Lente merged 36 commits from filter-sort into main 2024-06-03 12:57:45 +02:00
Conversation 0 Commits 36 Files Changed 6 +23 -4
2 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 64b5ddf944 - Show all commits

20
common/static/common/scripts/app.js
View File

@ -111,12 +111,32 @@
init();
}
// Create function scrollFilters to manage display of box filter sort's start and end gradients
function scrollFilters() {
const boxFilterSortBtns = document.querySelector('.js-box-filter-sort-btns');
const boxFilterSortEnd = document.querySelector('.js-box-filter-sort-end');
const boxFilterSortStart = document.querySelector('.js-box-filter-sort-start');
boxFilterSortBtns.addEventListener('scroll', function() {
if (boxFilterSortBtns.scrollLeft == 0) {
boxFilterSortStart.classList.add('d-none');
} else if (boxFilterSortBtns.scrollLeft + boxFilterSortBtns.clientWidth == boxFilterSortBtns.scrollWidth) {
boxFilterSortEnd.classList.add('d-none');
} else {
boxFilterSortEnd.classList.remove('d-none');
boxFilterSortStart.classList.remove('d-none');
}
});
}
// Create function init
function init() {
agreeWithTerms();
btnBack();
commentForm();
copyInstallUrl();
scrollFilters();
}
document.addEventListener('DOMContentLoaded', function() {

7
extensions/templates/extensions/list.html
View File

@ -31,9 +31,8 @@
<div class="col-md-12">
<div class="d-flex flex-column flex-md-row">
<div class="box box-filter-sort mb-2 mb-md-0 me-md-3 overflow-hidden p-2">
{# TODO: add js hide box filter sort end and start before and after scroll #}
<div class="box-filter-sort-start h-100 position-absolute start-0 top-0 w-5 z-1"></div>
<div class="btn-row flex-nowrap overflow-x-auto">
<div class="box-filter-sort-start d-none h-100 js-box-filter-sort-start position-absolute start-0 top-0 w-5 z-1"></div>
<div class="btn-row flex-nowrap js-box-filter-sort-btns overflow-x-auto">
{# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
<a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
<div>
@ -55,7 +54,7 @@
</a>
{% endfor %}
</div>
<div class="box-filter-sort-end end-0 h-100 position-absolute top-0 w-5"></div>
<div class="box-filter-sort-end end-0 h-100 js-box-filter-sort-end position-absolute top-0 w-5"></div>
</div>
<div class="align-items-center d-flex flex-shrink-0 justify-content-between">
{# TODO: @back-end add sort based on select options #}