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 +42 -21
2 changed files with 42 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0ed83d96b5 - Show all commits

3
common/static/common/styles/_navigation.sass
View File

@ -1,3 +1,6 @@
.dropdown-toggle
height: calc(var(--spacer) * 2)
.navbar-search .navbar-search
input input
min-width: calc(var(--spacer) * 4) min-width: calc(var(--spacer) * 4)

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

@ -30,35 +30,53 @@
<div class="mb-3 row"> <div class="mb-3 row">
<div class="col-md-12"> <div class="col-md-12">
<div class="d-flex flex-column flex-md-row"> <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"> <div class="align-items-center d-flex flex-shrink-0 justify-content-between mb-2 mb-md-0 me-md-3">
<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="box d-flex p-2">
<div class="btn-row flex-nowrap js-box-filter-sort-btns overflow-x-auto"> <div class="align-items-center d-flex fs-sm fw-bold mb-0 me-3 text-nowrap">Filters</div>
<a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="{% url 'extensions:by-type' type_slug=type|slugify %}" title="All"> <div class="dropdown">
<div> <button class="align-items-center d-flex dropdown-toggle js-dropdown-toggle" data-toggle-menu-id="js-nav-example-dropdown">
All All
</div>
<div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
1
</div>
</a>
{% for list_tag in tags %}
{# TODO @back-end: Find a proper way to get the plural tag type to build the URL. #}
<a class="align-items-center btn btn-sm d-flex {% if tag == list_tag %}btn-primary{% endif %}" href="{% url "extensions:by-tag" tag_slug=list_tag.slug %}" title="{{ list_tag.name }}">
<div>
{{ list_tag.name }}
</div>
{# TODO: @back-end add tags count dynamic #} {# TODO: @back-end add tags count dynamic #}
<div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 mw-3 px-1 rounded-2"> <div class="align-items-center bg-secondary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
1 1
</div> </div>
</a> <i class="i-chevron-down"></i>
{% endfor %} </button>
<ul class="dropdown-menu dropdown-menu-right js-dropdown-menu" id="js-nav-example-dropdown">
<li>
{% if tag %}
{# TODO: add tag active display #}
{% else %}
<a class="dropdown-item justify-content-between" href="{% url 'extensions:by-type' type_slug=type|slugify %}">
All
<div class="align-items-center bg-secondary d-flex h-4 fs-xs justify-content-center ms-2 rounded-circle w-4">
1
</div>
</a>
{% endif %}
</li>
{% for list_tag in tags %}
<li>
{% comment %}
{# TODO @back-end: Find a proper way to get the plural tag type to build the URL. #}
<a class="dropdown-item justify-content-between" href="{% url "extensions:by-tag %}" tag_slug={% list_tag.slug %}" title="{{ list_tag.name }}">
{% endcomment %}
<a class="dropdown-item justify-content-between" href="#" 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>
</a>
</li>
{% endfor %}
</ul>
</div>
</div> </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>
<div class="align-items-center d-flex flex-shrink-0 justify-content-between"> <div class="align-items-center d-flex flex-shrink-0 justify-content-between">
{# TODO: @back-end add sort based on select options #} {# TODO: @back-end add sort based on select options #}
<div class="box d-flex p-2 w-100"> <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> <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"> <select class="form-control form-control-sm">
<option value="-date_approved">Newest First</option> <option value="-date_approved">Newest First</option>