From 4c809a5f5fcd8b60ccd26e18b3497df371be4c63 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Fri, 19 Jan 2024 04:29:43 -0800
Subject: [PATCH] Put back the show more / show less behavior for item page
 trades
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I guess I deleted this a while ago without really noticing… I think I'd
at some point like to replace this with like, the DTI 2020 improved
table layout thing, but I figured this would be pretty quick to throw
in and make the page not feel like a pain to use lmao
---
 app/assets/stylesheets/items/_show.sass | 11 +++++++----
 app/javascript/item-page.js             | 26 +++++++++++++++++++++++++
 app/views/items/show.html.haml          |  4 ++--
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index b8dd1fda..34c368d9 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -116,11 +116,12 @@ body.items-show
         &:first-child
           margin-bottom: .5em
 
-        &.overflows
+        &[data-overflows]
+          overflow: hidden
           .toggle
             display: block
 
-        &.showing-more
+        &[data-showing-more]
           .toggle
             .less
               display: block
@@ -138,8 +139,10 @@ body.items-show
         position: absolute
         right: 0
 
-        &:hover
-          text-decoration: underline
+        button
+          +reset-awesome-button
+          &:hover
+            text-decoration: underline
 
         .less
           display: none
diff --git a/app/javascript/item-page.js b/app/javascript/item-page.js
index 5d8d56b0..6cf63a88 100644
--- a/app/javascript/item-page.js
+++ b/app/javascript/item-page.js
@@ -13,3 +13,29 @@ ReactDOM.render(
   </AppProvider>,
   rootNode,
 );
+
+try {
+  const tradeHangers = document.querySelector("#trade-hangers");
+  const tradeSections = document.querySelectorAll("#trade-hangers p");
+  for (const section of tradeSections) {
+    const oneLine = parseFloat(getComputedStyle(section)['line-height']);
+    const maxHeight = oneLine * 2;
+
+    if (section.offsetHeight > maxHeight) {
+      section.style.maxHeight = `${maxHeight}px`;
+      section.setAttribute("data-overflows", "");
+    }
+
+    section.querySelector(".more")?.addEventListener("click", (event) => {
+      section.setAttribute("data-showing-more", "");
+      section.style.maxHeight = "none";
+    });
+
+    section.querySelector(".less")?.addEventListener("click", (event) => {
+      section.removeAttribute("data-showing-more");
+      section.style.maxHeight = `${maxHeight}px`;
+    });
+  }
+} catch (error) {
+  console.error("Error applying trade list more/less toggle", error);
+}
diff --git a/app/views/items/show.html.haml b/app/views/items/show.html.haml
index c03c742b..c536fbc3 100644
--- a/app/views/items/show.html.haml
+++ b/app/views/items/show.html.haml
@@ -46,8 +46,8 @@
             = trading_users_header(owned, @trading_users_by_owned[owned].size)
           = render_trading_users(owned)
           %span.toggle
-            %span.more= t '.trading_users.show_more'
-            %span.less= t '.trading_users.show_less'
+            %button.more= t '.trading_users.show_more'
+            %button.less= t '.trading_users.show_less'
 
   - if user_signed_in?
     #your-items-form