8829/fix/redesign sort UI (#9489)

* Redesigned UI of sort options into dropdown menu in /search * Reimplemented dropdown menu closer to cta-btn and added CSS component * Create sort-dropper.less * Added i18n internationalization support for dropdown text and CSS changes * Added CSS style revisions to better understand sort option selection * Swapped dropdown menu caret icons to stay consistent with Want to Read dropdown --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: rebecca shoptaw <[email protected]> Co-authored-by: Mek <[email protected]>
internetarchive · Sep 29, 2024 · 8bc0338 · 8bc0338
1 parent 77c16d5
commit 8bc0338
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 45 deletions.
diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -99,7 +99,7 @@
     },
     {
       "path": "static/build/page-user.css",
-      "maxSize": "28KB"
+      "maxSize": "30KB"
     }
   ]
 }
diff --git a/openlibrary/i18n/messages.pot b/openlibrary/i18n/messages.pot
@@ -6075,18 +6075,10 @@ msgstr ""
 msgid "On leaf number %(page_num)d:"
 msgstr ""
 
-#: search/sort_options.html
-msgid "Sorted by"
-msgstr ""
-
 #: search/sort_options.html
 msgid "Relevance"
 msgstr ""
 
-#: search/sort_options.html
-msgid "Work Count"
-msgstr ""
-
 #: search/sort_options.html
 msgid "Random"
 msgstr ""
@@ -6116,11 +6108,15 @@ msgid "Top Rated"
 msgstr ""
 
 #: search/sort_options.html
-msgid "Any"
+msgid "Work Title (beta: Librarian only)"
 msgstr ""
 
 #: search/sort_options.html
-msgid "Work Title (beta: Librarian only)"
+msgid "Work Count"
+msgstr ""
+
+#: search/sort_options.html
+msgid "Any"
 msgstr ""
 
 #: search/sort_options.html

diff --git a/openlibrary/templates/search/sort_options.html b/openlibrary/templates/search/sort_options.html
@@ -1,9 +1,30 @@
 $def with (selected_sort, exclude=None, default_sort='relevance', search_scheme='works')
 
-<span class="tools">
-    <img src="/images/icons/icon_sort.png" class="" alt="$_('Sorting by')" width="9" height="11" class="sorter" />
-    $_('Sorted by'):
+<span class="sort">
 $code:
+     sort_option_names = {
+      'relevance': _("Relevance"),
+      'random': _("Random"),
+      'index': _("List Order"),
+      'last_modified': _("Last Modified"),
+      'editions': _("Most Editions"),
+      'old': _("First Published"),
+      'new': _("Most Recent"),
+      'rating': _("Top Rated"),
+      'readinglog': _("Reading Log"),
+      'want_to_read': _("Want to Read"),
+      'currently_reading': _("Currently Reading"),
+      'already_read': _("Already Read"),
+      'title': _("Work Title (beta: Librarian only)")
+     }
+
+     def get_selected_sort_name(selected_sort, default_sort, sort_option_names):
+        if selected_sort and selected_sort.startswith('random'):
+            return sort_option_names['random']
+        return sort_option_names.get(selected_sort, sort_option_names.get(default_sort, _("Sorting by")))
+
+     selected_sort_name = get_selected_sort_name(selected_sort, default_sort, sort_option_names)
+
      if search_scheme == 'authors':
        sort_options = [
          { 'sort': 'relevance', 'name': _("Relevance"), 'ga_key': 'Relevance' },
@@ -38,34 +59,49 @@
        ]
        if ctx.user and (ctx.user.is_admin() or ctx.user.is_librarian()):
          sort_options.append({ 'sort': 'title', 'name': _("Work Title (beta: Librarian only)"), 'ga_key': 'Title' })
-    $for sort_option in sort_options:
-      $if exclude and sort_option['sort'] in exclude:
-        $continue
-      $ is_selected = sort_option.get('selected') or sort_option['sort'] == selected_sort or (selected_sort is None and sort_option['sort'] == default_sort)
-      $if is_selected:
-          <a><strong>$sort_option['name']</strong></a>
-      $else:
-          <a href="$changequery(page=None, sort=cond(sort_option['sort'] == default_sort, None, sort_option['sort']))"
-             data-ol-link-track="SearchSort|$sort_option['ga_key']"
-             rel="nofollow"
-          >$sort_option['name']</a>
-      $if sort_option.get('sub_sorts') and is_selected:
-        <select
-          data-ol-link-track="SearchSort|$sort_option['ga_key']SubSort"
-          onchange="window.location.href = this.value"
-        >
-          $for sub_sort in sort_option['sub_sorts']:
-            $ is_selected = sub_sort['sort'] == selected_sort
-            <option
-              value="$changequery(page=None, sort=cond(sub_sort['sort'] == default_sort, None, sub_sort['sort']))"
-              $cond(is_selected, 'selected')
-            >$sub_sort['name']</option>
-        </select>
-      $if not loop.last:
-        |
+    <span class="sort-dropper">
+      <details>
+        <summary>
+          <img src="/images/icons/icon_sort.png" alt="$_('Sorting by')" width="9" height="11" />
+          <p>$selected_sort_name</p>
+        </summary>
+        <span class="sort-content">
+          <span class="sort-content-inner">
+            $for sort_option in sort_options:
+              $if exclude and sort_option['sort'] in exclude:
+                $continue
+              $ is_selected = sort_option.get('selected') or sort_option['sort'] == selected_sort or (selected_sort is None and sort_option['sort'] == default_sort)
+              $if is_selected:
+                <a class="sort-selected">$sort_option['name']</a>
+              $else:
+                <a href="$changequery(page=None, sort=cond(sort_option['sort'] == default_sort, None, sort_option['sort']))"
+                   data-ol-link-track="SearchSort|$sort_option['ga_key']"
+                   rel="nofollow"
+                >
+                  $sort_option['name']
+                </a>
+              $if sort_option.get('sub_sorts') and is_selected:
+                $for sub_sort in sort_option['sub_sorts']:
+                  $ is_selected = sub_sort['sort'] == selected_sort
+                  $if is_selected:
+                    <a class="sort-subsort-selected">$sub_sort['name']</a>
+                  $else:
+                    <a class="sort-subsort"
+                       href="$changequery(page=None, sort=cond(sub_sort['sort'] == default_sort, None, sub_sort['sort']))"
+                       data-ol-link-track="SearchSort|$sort_option['ga_key']SubSort"
+                    >
+                      $sub_sort['name']
+                    </a>
+          </span>
+        </span>
+      </details>
+    </span>
     $if selected_sort and selected_sort.startswith('random') and not is_bot():
-      (<a href="$changequery(page=None, sort='random_%s' % today().timestamp())"
-         data-ol-link-track="SearchSort|RandomShuffle"
-         rel="nofollow"
-      >$_('Shuffle')</a>)
+          <a class="sort-random-shuffle"
+             href="$changequery(page=None, sort='random_%s' % today().timestamp())"
+             data-ol-link-track="SearchSort|RandomShuffle"
+             rel="nofollow"
+          >
+            $_('Shuffle')
+          </a>
 </span>
diff --git a/openlibrary/templates/type/author/view.html b/openlibrary/templates/type/author/view.html
@@ -118,10 +118,10 @@ <h2 class="collapse">
                     $ungettext("%(count)d work", "%(count)d works", books_count, count=books_count)
                     <span class="count smaller"><a href="/books/add?author=$page.key">$_('Add another?')</a></span>
                 </h2>
-                <p id="books">
                 $if books_count > 1:
+                  <div id="books">
                     $:render_template("search/sort_options.html", books.sort, exclude='relevance', default_sort='editions')
-
+                  </div>
                 <p>
                   $if input(mode="everything").mode == "everything":
                     $:_('Showing all works by author. Would you like to see <a href="%(url)s">only ebooks</a>?', url=changequery(mode='ebooks'))

diff --git a/static/css/components/sort-dropper.less b/static/css/components/sort-dropper.less
@@ -0,0 +1,118 @@
+.sort-dropper {
+  display: inline-flex;
+}
+
+.sort-content {
+  display: flex;
+  background: @white;
+}
+
+.sort-content-inner {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  margin-top: 10px;
+  background-color: @lightest-grey;
+  border: 1px solid;
+  border-radius: 5px;
+  border-color: @light-grey;
+  z-index: @z-index-level-1;
+
+  a {
+    text-decoration: none;
+    color: @grey;
+    padding-right: 25px;
+    border: 2px solid transparent;
+
+    &:link,
+    &:visited {
+      color: @black;
+    }
+
+    &:hover {
+      color: @grey;
+      border-color: @primary-blue;
+    }
+
+    &.sort-selected::before {
+      color: @grey;
+      padding-right: 5px;
+    }
+
+    &.sort-subsort-selected::before {
+      color: @grey;
+      padding-right: 5px;
+    }
+  }
+
+  a::before {
+    content: "✓";
+    margin: 5px 10px;
+    color: transparent;
+  }
+
+  a.sort-subsort {
+    padding-left: 20px;
+
+    &::before {
+      content: "✓";
+      margin: 5px 10px;
+      color: transparent;
+    }
+
+    &-selected {
+      padding-left: 20px;
+      padding-right: 10px;
+      color: @grey;
+    }
+  }
+
+}
+
+.sort details {
+  border-radius: 5px;
+  background: @lightest-grey;
+  border: 1px solid;
+  border-color: @mid-grey;
+
+  summary {
+    font-size: 1rem;
+    color: @black;
+    display: inline-flex;
+    list-style-type: none;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+
+  summary p {
+    padding: 2px 10px;
+    margin: 0;
+    border-right: 1px solid;
+    border-color: @gray-d1cfd0;
+  }
+
+  &[open] {
+    background: @lighter-grey;
+  }
+}
+
+.sort details summary img {
+  margin-left: 10px;
+}
+
+.sort details summary::after {
+  content: "▾";
+  color: @dark-grey;
+  padding: 2px 10px;
+}
+
+.sort details[open] summary::after {
+  content: "▴";
+}
+
+.sort-random-shuffle {
+  display: inline-flex;
+  padding: 5px;
+}
diff --git a/static/css/page-user.less b/static/css/page-user.less
@@ -245,3 +245,5 @@ tr.table-row.selected{
 @import (less) "components/mybooks-dropper.less";
 // Import styles for search box
 @import (less) "components/searchbox.less";
+// Import styles for sort options
+@import (less) "components/sort-dropper.less";