From 630be8d0488284aa5f9c30f63708d0d151b86e44 Mon Sep 17 00:00:00 2001
From: Lova Andriarimalala <43842786+Xpirix@users.noreply.github.com>
Date: Thu, 3 Oct 2024 11:11:36 +0300
Subject: [PATCH] Improve UI of search page

---
 .../templates/plugins/plugin_list.html        | 114 +----------------
 .../plugins/plugin_list_grid_card.html        | 114 +++++++++++++++++
 qgis-app/templates/search/search.html         | 120 +++++++-----------
 3 files changed, 162 insertions(+), 186 deletions(-)
 create mode 100644 qgis-app/plugins/templates/plugins/plugin_list_grid_card.html

diff --git a/qgis-app/plugins/templates/plugins/plugin_list.html b/qgis-app/plugins/templates/plugins/plugin_list.html
index 97fb32fd..7ccaa15b 100644
--- a/qgis-app/plugins/templates/plugins/plugin_list.html
+++ b/qgis-app/plugins/templates/plugins/plugin_list.html
@@ -1,4 +1,4 @@
-{% extends 'plugins/plugin_base.html' %}{% load i18n bootstrap_pagination humanize static sort_anchor range_filter thumbnail %}
+{% extends 'plugins/plugin_base.html' %}{% load i18n humanize static sort_anchor range_filter thumbnail %}
 {% load local_timezone %}
 {% load plugin_utils %}
 {% block extrajs %}
@@ -77,117 +77,7 @@ <h2>{% if title %}{{title}}{% else %}{% trans "All plugins" %}{% endif %}</h2>
 
     <div id="grid-view" class="columns is-multiline plugins-list-grid">
         {% for object in object_list %}
-        <div class="
-        column
-        is-medium     
-        is-half-tablet
-        is-half-desktop
-        is-one-quarter-widescreen
-        is-one-third-fullhd">
-            <div 
-                class="
-                    card 
-                    is-flex 
-                    is-flex-direction-column 
-                    is-justify-content-space-between
-                "
-                onclick="window.location.href='{% url "plugin_detail" object.package_name %}';"
-                >
-
-                {% if object|is_new and not object.featured and not object.deprecated %}
-                    <div class="right-ribbon">
-                        <span class="new">
-                            <i class="fas fa-bolt mr-1"></i> New
-                        </span>
-                    </div>
-                {% endif %}
-                {% if object.featured and not object.deprecated %}
-                    <div class="right-ribbon">
-                        <span class="featured">
-                            <i class="fas fa-star mr-1"></i> Featured
-                        </span>
-                    </div>
-                {% endif %}
-                {% if object.deprecated %}
-                    <div class="right-ribbon">
-                        <span class="deprecated">
-                            Deprecated
-                        </span>
-                    </div>
-                {% endif %}
-                <div class="card-content is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
-                    <div class="media">
-                        <div class="media-left">
-                            {% if object.icon and object.icon.file and object.icon|is_image_valid %}
-                                {% with image_extension=object.icon.name|file_extension %}
-                                    {% if image_extension == 'svg' %}
-                                        <figure class="image is-48x48 m-0">
-                                            <img alt="{% trans "Plugin icon" %}" src="{{ object.icon.url }}" />
-                                        </figure>
-                                    {% else %}
-                                        {% thumbnail object.icon "256x256" format="PNG" as im %}
-                                            <figure class="image is-48x48 m-0">
-                                                <img alt="{% trans "Plugin icon" %}" src="{{ im.url }}" />
-                                            </figure>
-                                        {% endthumbnail %}
-                                    {% endif %}
-                                {% endwith %}
-                            {% else %}
-                                <figure class="image is-48x48 m-0">
-                                    <img src="{% static "images/large-logo.svg" %}" alt="{% trans "Plugin icon" %}" />
-                                </figure>
-                            {% endif %}
-                        </div>
-                        <div class="media-content">
-                            <p class="title is-5">{{ object.name }}</p>
-                            <p class="subtitle is-7 author">{% trans "by" %} 
-                                <a title="{% trans "See all plugins by"%} {{ object.author }}" href="{% url "author_plugins" object.author %}">
-                                    {{ object.author }}
-                                </a>
-                            </p>
-                        </div>
-                    </div>
-                    <div class="content mb-0">
-                        <p>{{ object.description|truncatewords:20 }}</p>
-
-                    </div>
-                    <p style="height: 100%;"></p>
-                    <div class="content mb-0">
-
-                        <div class="columns mt-3">
-                            <p class="column p-1">
-                                <span class="icon-text">
-                                    <span class="icon">
-                                        <i class="fas fa-calendar-alt"></i>
-                                    </span>
-                                    <span>{{ object.latest_version_date|local_timezone:"SHORT_NATURAL_DAY" }}</span>
-                                </span>
-                            </p>
-                            <div class="column p-1">
-                                <div class="star-ratings">
-                                    <span style="width:{% widthratio object.average_vote 5 100 %}%" class="rating"></span>
-                                </div> ({{ object.rating_votes }})
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <footer class="card-footer">
-                    <a href="{% if object.stable %}{{ object.stable.get_download_url }}{% else %}{{ object.experimental.get_download_url }}{% endif %}" class="card-footer-item">
-                        <span class="icon">
-                            <i class="fas fa-download"></i>
-                        </span>
-                        <span>Download</span>
-                    </a>
-                    <p class="card-footer-item m-0">
-                        <span class="icon">
-                            <i class="fas fa-download"></i>
-                        </span>
-                        <span>{{ object.downloads|intcomma }}</span>
-                    </p>
-                </footer>
-            </div>
-        </div>
+            {% include "plugins/plugin_list_grid_card.html" %}
         {% endfor %}
     </div>
 
diff --git a/qgis-app/plugins/templates/plugins/plugin_list_grid_card.html b/qgis-app/plugins/templates/plugins/plugin_list_grid_card.html
new file mode 100644
index 00000000..9809f81c
--- /dev/null
+++ b/qgis-app/plugins/templates/plugins/plugin_list_grid_card.html
@@ -0,0 +1,114 @@
+{% load i18n plugin_utils plugins_tagcloud thumbnail static%}
+{% load local_timezone humanize %}
+
+<div class="
+column
+is-medium     
+is-half-tablet
+is-half-desktop
+is-one-quarter-widescreen
+is-one-third-fullhd">
+    <div 
+        class="
+            card 
+            is-flex 
+            is-flex-direction-column 
+            is-justify-content-space-between
+        "
+        onclick="window.location.href='{% url "plugin_detail" object.package_name %}';"
+        >
+
+        {% if object|is_new and not object.featured and not object.deprecated %}
+            <div class="right-ribbon">
+                <span class="new">
+                    <i class="fas fa-bolt mr-1"></i> New
+                </span>
+            </div>
+        {% endif %}
+        {% if object.featured and not object.deprecated %}
+            <div class="right-ribbon">
+                <span class="featured">
+                    <i class="fas fa-star mr-1"></i> Featured
+                </span>
+            </div>
+        {% endif %}
+        {% if object.deprecated %}
+            <div class="right-ribbon">
+                <span class="deprecated">
+                    Deprecated
+                </span>
+            </div>
+        {% endif %}
+        <div class="card-content is-flex is-flex-direction-column is-justify-content-space-between" style="height: 100%;">
+            <div class="media">
+                <div class="media-left">
+                    {% if object.icon and object.icon.file and object.icon|is_image_valid %}
+                        {% with image_extension=object.icon.name|file_extension %}
+                            {% if image_extension == 'svg' %}
+                                <figure class="image is-48x48 m-0">
+                                    <img alt="{% trans "Plugin icon" %}" src="{{ object.icon.url }}" />
+                                </figure>
+                            {% else %}
+                                {% thumbnail object.icon "256x256" format="PNG" as im %}
+                                    <figure class="image is-48x48 m-0">
+                                        <img alt="{% trans "Plugin icon" %}" src="{{ im.url }}" />
+                                    </figure>
+                                {% endthumbnail %}
+                            {% endif %}
+                        {% endwith %}
+                    {% else %}
+                        <figure class="image is-48x48 m-0">
+                            <img src="{% static "images/large-logo.svg" %}" alt="{% trans "Plugin icon" %}" />
+                        </figure>
+                    {% endif %}
+                </div>
+                <div class="media-content">
+                    <p class="title is-5">{{ object.name }}</p>
+                    <p class="subtitle is-7 author">{% trans "by" %} 
+                        <a title="{% trans "See all plugins by"%} {{ object.author }}" href="{% url "author_plugins" object.author %}">
+                            {{ object.author }}
+                        </a>
+                    </p>
+                </div>
+            </div>
+            <div class="content mb-0">
+                <p>{{ object.description|truncatewords:20 }}</p>
+
+            </div>
+            <p style="height: 100%;"></p>
+            <div class="content mb-0">
+
+                <div class="columns mt-3">
+                    <p class="column p-1">
+                        <span class="icon-text">
+                            <span class="icon">
+                                <i class="fas fa-calendar-alt"></i>
+                            </span>
+                            <span>{{ object.latest_version_date|local_timezone:"SHORT_NATURAL_DAY" }}</span>
+                        </span>
+                    </p>
+                    <div class="column p-1">
+                        <div class="star-ratings">
+                            <span style="width:{% widthratio object.average_vote 5 100 %}%" class="rating"></span>
+                        </div> ({{ object.rating_votes }})
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <footer class="card-footer">
+            <a href="{% if object.stable %}{{ object.stable.get_download_url }}{% else %}{{ object.experimental.get_download_url }}{% endif %}" class="card-footer-item">
+                <span class="icon">
+                    <i class="fas fa-download"></i>
+                </span>
+                <span>Download</span>
+            </a>
+            <p class="card-footer-item m-0">
+                <span class="icon">
+                    <i class="fas fa-download"></i>
+                </span>
+                <span>{{ object.downloads|intcomma }}</span>
+            </p>
+        </footer>
+    </div>
+</div>
\ No newline at end of file
diff --git a/qgis-app/templates/search/search.html b/qgis-app/templates/search/search.html
index df2bf9a1..47c5ed6c 100644
--- a/qgis-app/templates/search/search.html
+++ b/qgis-app/templates/search/search.html
@@ -1,88 +1,60 @@
 {% extends 'base.html' %}
-{% load i18n plugin_utils plugins_tagcloud %}
+{% load i18n plugin_utils%}
 
 {% block menu %}
 {{ block.super }}
-    <div class="module_menu">
-        <h3>{% trans "Plugin tags" %}</h3>
-        {% include_plugins_tagcloud 'plugins.plugin' %}
-    </div>
-
+    {% include "plugins/plugin_sidebar.html" %}
 {% endblock %}
 
 {% block content %}
-    <h2>Search</h2>
-
-    <form class="horizontal advancedsearch" method="get" action=".">
-        {% for field in form %}
-        <div class="fieldWrapper">
-            {{ field.errors }}
-            {% if field.field.widget|klass == 'CheckboxSelectMultiple' %}
-            {% comment %}
-<!--
-            ABP: does not work!
--->
-            <fieldset>
-            <label for="{{ field.html_name }}">
-                {{ field.label }}
-                {% for x,y in field.field.widget.choices %}
-                {{ field.field.widget.value|pprint }}
-                <div class="fieldWrapper">
-                    <label for="{{ field.html_name }}">{{ y }}
-                    <input type="checkbox" id="{{ field.html_name }}" name="{{ field.html_name }}" value="{{ x }}" {% if field.field.widget.value == x %}checked="checked"{% endif %}/></label>
-                </div>
-                {% endfor %}
-            </label>
-            </fieldset>
-            {% endcomment %}
-            {% else %}
-            {{ field.label_tag }}{{ field }}
-            {% endif %}
-            <div class="help">{{ field.help_text }}</div>
-        </div>
-        {% endfor %}
-        <div class="form-actions has-text-right mt-3">
-            <input type="submit" class="button is-success" value="Search">
-        </div>
-
-        {% if query %}
-            <h3>Search results for "{{query}}" ({{paginator.count}} items found)</h3>
+    {% if query %}
+        <h2>Search results for "{{query}}" ({{paginator.count}} items found)</h2>
 
+        <div id="grid-view" class="columns is-multiline plugins-list-grid">
             {% for result in page.object_list %}
-                <p class="search-item">
-                    <a href="{{ result.object.get_absolute_url }}">{{ result.object }}</a>
-                </p>
+                {% with object=result.object %}
+                    {% include "plugins/plugin_list_grid_card.html" %}
+                {% endwith %}
             {% empty %}
-                <p>No results found.</p>
+            <div class="notification">
+                <i class="fas fa-info mr-3"></i>
+                {% trans "No results found." %}
+            </div>
             {% endfor %}
+        </div>
 
-            {% if page.has_previous or page.has_next %}
-                <div class="pagination">
-                    {% if page.has_previous %}
-                        <a href="?q={{ query }}&amp;page=1">
-                    {% endif %}&laquo; First
-                    {% if page.has_previous %}</a>{% endif %}
-                    |
-                    {% if page.has_previous %}
-                        <a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">
-                    {% endif %}Previous
-                    {% if page.has_previous %}</a>{% endif %}
-                    |
-                    Page {{ page.number }} of {{ paginator.num_pages }}
-                    |
-                    {% if page.has_next %}
-                        <a href="?q={{ query }}&amp;page={{ page.next_page_number }}">
-                    {% endif %}Next
-                    {% if page.has_next %}</a>{% endif %}
-                    |
-                    {% if page.has_next %}
-                        <a href="?q={{ query }}&amp;page={{ paginator.num_pages }}">
-                    {% endif %}Last &raquo;
-                    {% if page.has_next %}</a>{% endif %}
-                </div>
-            {% endif %}
-        {% else %}
-            {# Show some example queries to run, maybe query syntax, something else? #}
+        {% if page.has_previous or page.has_next %}
+            <nav class="pagination is-centered" role="navigation" aria-label="pagination">
+                <ul class="pagination-list">
+                    <li class="m-0">
+                        <a class="pagination-link" href="?q={{ query }}&amp;page=1" aria-label="Goto page 1" {% if not page.has_previous %}disabled{% endif %}>
+                            <span class="icon"><i class="fas fa-angle-double-left"></i></span> First
+                        </a>
+                    </li>
+                    <li class="m-0">
+                        <a class="pagination-previous" href="?q={{ query }}&amp;{% if page.has_previous %}page={{ page.previous_page_number }}{% endif %}" {% if not page.has_previous %}disabled{% endif %}>
+                            <span class="icon"><i class="fas fa-angle-left"></i></span> Previous
+                        </a>
+                    </li>
+                    <li class="m-0">
+                        <a class="pagination-link is-current" aria-label="Page {{ page.number }}" aria-current="page">
+                            Page {{ page.number }} of {{ paginator.num_pages }}
+                        </a>
+                    </li>
+                    <li class="m-0">
+                        <a class="pagination-next" href="?q={{ query }}&amp;{% if page.has_next %}page={{ page.next_page_number }}{% endif %}" {% if not page.has_next %}disabled{% endif %}>
+                            Next page <span class="icon"><i class="fas fa-angle-right"></i></span>
+                        </a>
+                    </li>
+                    <li class="m-0">
+                        <a class="pagination-link" href="?q={{ query }}&amp;{% if page.has_next %}page={{ paginator.num_pages }}{% endif %}" aria-label="Goto page {{ paginator.num_pages }}" {% if not page.has_next %}disabled{% endif %}>
+                            Last <span class="icon"><i class="fas fa-angle-double-right"></i></span>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
         {% endif %}
-    </form>
+    {% else %}
+        {# Show some example queries to run, maybe query syntax, something else? #}
+    {% endif %}
 {% endblock %}