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 +48 -20
1 changed files with 48 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a17d8a149a - Show all commits

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

@ -32,7 +32,7 @@
<div class="d-flex flex-column flex-md-row">
<div class="align-items-center d-flex flex-shrink-0 justify-content-between mb-2 mb-md-0 me-md-3">
<div class="box dropdown p-2 rounded-2">
<button class="align-items-center d-flex dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-nav-example-dropdown">
<button class="align-items-center d-flex dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-dropdown-filter">
{% if tag %}
{{ tag.name }}
{# TODO: @back-end add tags count dynamic #}
@ -46,9 +46,10 @@
1
</div>
{% endif %}
<i class="i-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right js-dropdown-menu" id="js-nav-example-dropdown">
<ul class="dropdown-menu dropdown-menu-right js-dropdown-menu" id="js-dropdown-filter">
<li>
{% if tag %}
{# If tag is active, show button 'All'. #}
@ -62,10 +63,12 @@
{% else %}
{% endif %}
</li>
{% for list_tag in tags %}
<li>
<a class="dropdown-item justify-content-between" href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
{{ list_tag.name }}
<div class="align-items-center bg-secondary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
1
</div>
@ -75,22 +78,47 @@
</ul>
</div>
</div>
<div class="align-items-center d-flex flex-shrink-0 justify-content-between">
{# TODO: @back-end add sort based on select options #}
<div class="box d-flex p-2">
{# TODO: change to web-assets dropdown #}
<label class="align-items-center d-flex fs-sm mb-0 me-3 text-nowrap">Sort by</label>
<select class="form-control form-control-sm">
<option value="-date_approved">Newest First</option>
<option value="date_approved">Oldest First</option>
<option value="-date_modified">Recently Updated</option>
<option value="-total_ratings_count">Most Reviewed</option>
<option value="-average_score">Rating</option>
<option value="-download_count">Downloads</option>
<option value="-name">Title (A-Z)</option>
<option value="name">Title (Z-A)</option>
</select>
</div>
<div class="box dropdown p-2 rounded-2">
<button class="dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-dropdown-sort">
Sort by <i class="i-chevron-down"></i>
</button>
<ul class="dropdown-menu dropdown-menu-right js-dropdown-menu" id="js-dropdown-sort">
<li>
<a class="dropdown-item" href="#">
Newest First
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Recently Updated
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Most Reviewed
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Rating
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Downloads
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Title (A-Z)
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Title (Z-A)
</a>
</li>
</ul>
</div>
</div>
</div>