From e91a61eb851035a1480bbacea5b44ec26e3162c5 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 19 Oct 2024 01:55:00 -0400
Subject: [PATCH] show more button for item description

---
 catalog/templates/item_base.html | 34 ++++++++++++++++++++++++--------
 common/static/scss/_common.scss  | 33 +++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/catalog/templates/item_base.html b/catalog/templates/item_base.html
index 8a4d4655..01700307 100644
--- a/catalog/templates/item_base.html
+++ b/catalog/templates/item_base.html
@@ -223,17 +223,35 @@
           {% endif %}
         </hgroup>
       </div>
+      <style type="text/css"></style>
       <div id="item-detail" class="middle">
         <section id="item-content">
           <h5>{% trans 'overview' %}</h5>
-          {% if item.display_description %}
-            <p class="tldr" _="on click toggle .tldr on me">{{ item.display_description | linebreaksbr }}</p>
-          {% elif item.parent_item.display_description %}
-            <p class="tldr" _="on click toggle .tldr on me">{{ item.parent_item.display_description | linebreaksbr }}</p>
-          {% else %}
-            <p class="empty">{% trans 'nothing so far.' %}</p>
-          {% endif %}
-          {% block content %}{% endblock %}
+          <div class="tldr-box">
+            <input type="checkbox" id="content-expanded">
+            {% if item.display_description %}
+              <p>{{ item.display_description | linebreaksbr }}</p>
+            {% elif item.parent_item.display_description %}
+              <p>{{ item.parent_item.display_description | linebreaksbr }}</p>
+            {% else %}
+              <p class="empty">{% trans 'nothing so far.' %}</p>
+            {% endif %}
+            <label for="content-expanded" role="button" class="outline secondary">{% trans "show more" %}</label>
+          </div>
+          <script type="text/javascript">
+          const ps = document.querySelectorAll('.tldr-box p');
+          const observer = new ResizeObserver(entries => {
+            for (let entry of entries) {
+              entry.target.classList[entry.target.scrollHeight > entry.contentRect.height ? 'add' : 'remove']('truncated');
+            }
+          });
+
+          ps.forEach(p => {
+            observer.observe(p);
+          });
+          </script>
+          {% block content %}
+          {% endblock %}
         </section>
         <section class="solo-hidden">
           <div>
diff --git a/common/static/scss/_common.scss b/common/static/scss/_common.scss
index c512a238..19d0c562 100644
--- a/common/static/scss/_common.scss
+++ b/common/static/scss/_common.scss
@@ -14,6 +14,39 @@
   -webkit-box-orient: vertical;
 }
 
+.tldr-box {
+  input {
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  p {
+    display: -webkit-box;
+    -webkit-line-clamp: 10;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  input:focus ~ label {
+    outline: -webkit-focus-ring-color auto 5px;
+  }
+
+  input:checked + p {
+    -webkit-line-clamp: unset;
+  }
+
+  input:checked ~ label,
+  p:not(.truncated) ~ label{
+    display: none;
+  }
+
+  label {
+    padding: 1px 4px
+  }
+}
+
+
 .longlist {
   max-height: 60vh;
   overflow-y: scroll;