Merge pull request #1092 from ecds/feature/search-results-ui

Update search results UI
ecds · Oct 5, 2024 · efdbd8a · efdbd8a
2 parents 9318989 + 6304dc5
commit efdbd8a
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 194 deletions.
diff --git a/apps/readux/forms.py b/apps/readux/forms.py
@@ -111,8 +111,8 @@ class ManifestSearchForm(forms.Form):
             ("created_at", "Date added (oldest first)"),
             ("-date_sort_descending", "Date published (newest first)"),
             ("date_sort_ascending", "Date published (oldest first)"),
-            ("label_alphabetical", "Label (A-Z)"),
-            ("-label_alphabetical", "Label (Z-A)"),
+            ("label_alphabetical", "Title (A-Z)"),
+            ("-label_alphabetical", "Title (Z-A)"),
             ("_score", "Relevance"),
         ),
         widget=forms.Select(

diff --git a/apps/templates/search_results.html b/apps/templates/search_results.html
@@ -48,8 +48,6 @@
 <link type="text/css" href="{% sass_src 'css/readux2/search.scss' %}" rel="stylesheet">
 <link type="text/css" href="{% sass_src 'css/readux2/menu-inverse.scss' %}" rel="stylesheet">
 
-<!-- <link type="text/css" href="{% sass_src 'css/project.scss' %}" rel="stylesheet"> -->
-
 {% include '_home/_nav.html' %}
 
 <div class="uk-container">
@@ -76,10 +74,8 @@
         </div>
         <fieldset class="uk-width-expand">
             <div class="uk-search uk-search-default uk-width-1-1">                
-                <!-- <span uk-search-icon></span> -->
                 <input class="uk-search-input" type="search" value="{{form.q.value|default_if_none:''}}" id="{{form.q.id}}" placeholder="Search volumes by keyword" aria-label="Search volumes by keyword" name="q">
             </div>
-            <!-- <div class="uk-text-small">{{ form.q.label }}</div> -->
         </fieldset>
         <fieldset class="uk-width-auto uk-padding-remove-left">
             <button class="uk-button uk-button-default" style="background-color: #E60000; color: white; padding: 0 9px; border:none; height: 40px;" type="submit">
@@ -88,7 +84,6 @@
         </fieldset>
         <fieldset>
             {{ form.sort }}
-            <!-- <div class="uk-text-small">{{ form.sort.label }}</div> -->
         </fieldset>
     </div>
 
@@ -101,28 +96,28 @@
 
             <fieldset class="uk-margin-remove-top uk-margin-small-bottom">
                 <div class="uk-flex uk-flex-between sui-item-heading">
-                    <label >{{ form.collection.label }}</label>
+                    <label>{{ form.collection.label }}</label>
                 </div>
                 {{ form.collection }}
             </fieldset>
 
             <fieldset class="uk-margin-remove-top uk-margin-small-bottom">
                 <div class="uk-flex uk-flex-between sui-item-heading">
-                    <label >{{ form.author.label }}</label>
+                    <label>{{ form.author.label }}</label>
                 </div>
                 {{ form.author }}
             </fieldset>
 
             <fieldset class="uk-margin-remove-top uk-margin-small-bottom">
                 <div class="uk-flex uk-flex-between sui-item-heading">
-                    <label >{{ form.language.label }}</label>
+                    <label>{{ form.language.label }}</label>
                 </div>
                 {{ form.language }}
             </fieldset>
 
             <fieldset class="uk-margin-remove-top uk-margin-small-bottom">
                 <div class="uk-flex uk-flex-between sui-item-heading">
-                    <label >Filter by Date published</label>
+                    <label>Filter by Date published</label>
                     <input type="checkbox" name="date-filter" id="toggle-date" class="uk-checkbox uk-margin-remove"/>
                 </div>
                 <div id="date-range-slider"></div>

diff --git a/apps/templates/search_results_backup.html b/apps/templates/search_results_backup.html
diff --git a/apps/templates/snippets/volume_result.html b/apps/templates/snippets/volume_result.html
@@ -1,10 +1,7 @@
 {% load readux_extras %}
 
 <li class="uk-width-1-1@m uk-margin-small">
-    <h4 class=""
-        style="margin-top: 10px; margin-bottom: 5px;" 
-    >
-        <!-- <span>{{ forloop.counter0|add:page_obj.start_index }}.</span> -->
+    <h4 style="margin-top: 10px; margin-bottom: 5px;">
         {% if volume.pid %}
             <a
                 class="nav-link uk-text-large sui-item-heading title result-title"
@@ -16,7 +13,7 @@
                         {{ fragment|safe }}
                     {% endfor %}
                 {% else %}
-                    {{ volume.label }}
+                    {{ volume.label|default:"[no title]" }}
                 {% endif %}
             </a>
         {% else %}
@@ -25,31 +22,15 @@
                     {{ fragment|safe }}
                 {% endfor %}
             {% else %}
-                {{ volume.label }}
+                {{ volume.label|default:"[no title]" }}
             {% endif %}
         {% endif %}
     </h4>
     <dl class="uk-margin-remove">
-        <div uk-grid class="">
-            <div class="uk-width-3-4@m">
-                {% if volume.summary %}
-                <div class="sui-item-heading" 
-                    style="">Summary</div> 
-                <div class="result-volume-summary"
-                style="font-weight: 400; font-size: 14px;">
-                    {% if 'highlight' in volume.meta and volume.meta.highlight.summary %}
-                        {% for fragment in volume.meta.highlight.summary %}
-                            {{ fragment|safe }}
-                        {% endfor %}
-                    {% else %}
-                        {{ volume.summary|safe }}
-                    {% endif %}
-                </div>
-                {% endif %}
-            </div>
+        <div uk-grid>
             <div class="uk-width-expand@m">
                 {% if volume.authors and "[no author]" not in volume.authors %}
-                    <div class="sui-item-heading" >Author{{volume.authors|pluralize}}</div>
+                    <div class="sui-item-heading">Author{{volume.authors|pluralize}}</div>
                     <dd>
                         <ul class="uk-margin-remove uk-padding-remove"
                         style="font-weight: 400; font-size: 14px;">
@@ -88,13 +69,8 @@
             <div class="sui-item-heading">Published</div>
             <div style="font-weight: 400; font-size: 14px;">{{volume.published_date}}</div>
         {% endif %}
-
-        {% if volume.created_at %}
-            <div class="sui-item-heading" >Added</div>
-            <div style="font-weight: 400; font-size: 14px;">{{volume.created_at}}</div>
-        {% endif %}
         {% if volume.languages and "[no language]" not in volume.languages %}
-            <div class="sui-item-heading" >Language{{volume.languages|pluralize}}</div>
+            <div class="sui-item-heading">Language{{volume.languages|pluralize}}</div>
             <div>
                 <ul class="uk-margin-remove uk-padding-remove" style="font-weight: 400; font-size: 14px;">
                     {% for lang in volume.languages %}
@@ -103,6 +79,20 @@
                 </ul>
             </div>
         {% endif %}
-
+        {% if volume.collections %}
+            <div class="sui-item-heading">Collection{{volume.collections|pluralize}}</div>
+            <div>
+                <ul class="uk-margin-remove uk-padding-remove" style="font-weight: 400; font-size: 14px;">
+                    {% for collection in volume.collections %}
+                        <li>{{ collection.label }}</li>
+                    {% endfor %}
+                </ul>
+            </div>
+        {% endif %}
+        {# only show date added if it is the sort field #}
+        {% if "created_at" in request.GET.sort and volume.created_at %}
+            <div class="sui-item-heading">Added</div>
+            <div style="font-weight: 400; font-size: 14px;">{{volume.created_at}}</div>
+        {% endif %}
     </dl>
 </li>