diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass index b8dd1fda4..34c368d92 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 5d8d56b0d..6cf63a884 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 c03c742b1..c536fbc32 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