show more button for item description

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>

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;