From c703e2e4fffc8976fa0085b4ff5d5ea5df06452d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Thu, 8 Jun 2023 19:57:10 -0400
Subject: [PATCH] animate the unhide and sort related books

---
 catalog/book/models.py                |  1 +
 catalog/templates/search_results.html |  4 ++--
 common/static/scss/_common.scss       | 12 ++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/catalog/book/models.py b/catalog/book/models.py
index 53ec76c3..2d96776b 100644
--- a/catalog/book/models.py
+++ b/catalog/book/models.py
@@ -171,6 +171,7 @@ class Edition(Item):
             .exclude(pk=self.pk)
             .exclude(is_deleted=True)
             .exclude(merged_to_item__isnull=False)
+            .order_by("title")
         )
 
 
diff --git a/catalog/templates/search_results.html b/catalog/templates/search_results.html
index 7cec4c94..edcad4af 100644
--- a/catalog/templates/search_results.html
+++ b/catalog/templates/search_results.html
@@ -84,9 +84,9 @@
             </div>
             {% if dup_items %}
               <p class="empty">
-                已从结果中略去了来自同一著作或有相同标识号的 {{ dup_items|length }}个条目，<a href="#" _="on click toggle .hidden on #dup">点击这里可重新显示</a>
+                已从结果中略去了来自同一著作或有相同标识号的 {{ dup_items|length }}个条目，<a _="on click toggle .unfold on #dup">点击这里可重新显示</a>
               </p>
-              <div class="item-card-list hidden" id="dup">
+              <div class="item-card-list folded" id="dup">
                 {% for item in dup_items %}
                   {% with "list_item_"|add:item.class_name|add:".html" as template %}
                     {% include template with show_tags=1 %}
diff --git a/common/static/scss/_common.scss b/common/static/scss/_common.scss
index 720f2ce3..25b3cc94 100644
--- a/common/static/scss/_common.scss
+++ b/common/static/scss/_common.scss
@@ -27,6 +27,18 @@
   visibility: hidden;
 }
 
+.folded {
+  max-height: 0;
+  transform: scaleY(0);
+  transform-origin: top;
+  transition: transform 0.2s ease;
+}
+
+.folded.unfold {
+  max-height: max-content;
+  transform: scaleY(1);
+}
+
 a:not(:hover) {
   text-decoration: none;
 }