Put back the show more / show less behavior for item page trades

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
This commit is contained in:
Emi Matchu 2024-01-19 04:29:43 -08:00
parent f008dff3f4
commit 4c809a5f5f
3 changed files with 35 additions and 6 deletions

View file

@ -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,6 +139,8 @@ body.items-show
position: absolute
right: 0
button
+reset-awesome-button
&:hover
text-decoration: underline

View file

@ -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);
}

View file

@ -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