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 +54 -24
2 changed files with 54 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ffb5c8d9d - Show all commits

9
common/static/common/styles/_forms.sass
View File

@ -10,6 +10,10 @@
+margin(2, left)
.form-control-sm
font-size: var(--fs-sm)
height: calc(var(--spacer) * 2)
+padding(0, y)
&[type="file"]
font-size: var(--fs-xs)
height: calc(var(--spacer) * 2)
@ -22,3 +26,8 @@
.was-validated .form-control:invalid,
.form-control.is-invalid
background-image: none
select
&.form-control
&:hover
cursor: pointer

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

@ -6,33 +6,56 @@
{% block content %}
<div class="row">
<div class="col-md-12 my-4">
{% if author %}
<h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ author }}</em></h2>
{% endif %}
{% if team %}
<h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ team.name }}</em></h2>
{% endif %}
{% if tag %}
<h2 class="d-flex align-items-center">
<span class="me-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
{% include "extensions/components/badge_tag.html" %}
</h2>
{% endif %}
{% if type %}
<h2>{{ type }}</h2>
{% endif %}
{% if request.GET.q %}
<h2>{{ page_obj.paginator.count }} result{{ page_obj.paginator.count | pluralize }} for <em class="search-highlight">{{ request.GET.q }}</em></h2>
<div class="align-items-center d-flex justify-content-between mb-3">
<h2>{{ type }}</h2>
{# TODO: @back-end add sort based on select options #}
<div class="box d-flex p-2">
<label class="align-items-center d-flex fs-sm mb-0 me-3 text-nowrap"><i class="i-repeat me-1"></i>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>
{% else %}
{% if author %}
<h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ author }}</em></h2>
{% endif %}
{% if team %}
<h2>{% blocktranslate %}Extensions by{% endblocktranslate %} <em class="search-highlight">{{ team.name }}</em></h2>
{% endif %}
{% if tag %}
<h2 class="d-flex align-items-center">
<span class="me-3">{% blocktranslate %}Extensions with the tag{% endblocktranslate %}</span>
{% include "extensions/components/badge_tag.html" %}
</h2>
{% endif %}
{% if request.GET.q %}
<h2>{{ page_obj.paginator.count }} result{{ page_obj.paginator.count | pluralize }} for <em class="search-highlight">{{ request.GET.q }}</em></h2>
{% endif %}
{% endif %}
{% if tags %}
<div class="row">
<div class="mb-3 row">
<div class="col-md-12">
<div class="box p-2">
<div class="btn-row">
{# TODO: @back-end add conditional link to either Add-ons or Themes pages #}
<a class="btn btn-sm {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
All
<a class="align-items-center btn btn-sm d-flex {% if not tag %}btn-primary{% endif %}" href="/add-ons" title="All">
<div>
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 %}
<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 }}">
@ -40,11 +63,9 @@
{{ list_tag.name }}
</div>
{# TODO: @back-end add tags count dynamic #}
{% comment %}
<div class="align-items-center bg-primary d-flex h-3 fs-xs justify-content-center ms-2 rounded-circle w-3">
1
</div>
{% endcomment %}
<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>
{% endfor %}
</div>