Show trix / rhino always_show variation

[pjmuller]

Feature

Show a part of the content with a click to see more
See loom: https://www.loom.com/share/d95cfc272bb84e1797870265c9a710fb

to be discussed how we introduce this without creating regressions for users that really want to hide everything.
introduce an extra boolean? partial_show ?

Current workarounds

Define a custom partial for the show action -> copying the app/components/avo/fields/trix_field/show_component.html.erb and using our own styles?

or overwriting the hidden CSS class within this wrapper?

[pjmuller]

FYI: we 80/20 fixed this withi this css, #sharing-is-caring ;)
This works for both trix as rhino.
Would still be cool to have this feature more natively embedded

.trix-content.hidden {
  display: block !important;
}

.trix-content.hidden {
  clip-path: inset(0 0 calc(100% - 50px) 0);
  -webkit-mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
  mask-image: linear-gradient(to bottom, black 30px, transparent 50px);
  max-height: 50px;
  min-height: 0px;
}

.trix-content:not(.hidden) {
  clip-path: none;
  -webkit-mask-image: none;
  mask-image: none;
}

a[data-action="click->hidden-input#showContent"].hidden {
  display: none !important;
}

[github-actions]

This issue has been marked as stale because there was no activity for the past 15 days.

[adrianthedev]

Yup!
Awesome recommendation!

We should have a few junior folks that want to contribute to OSS soon so maybe we can get some help on it.

Approach

• tweak the field component Avo::Fields::TrixField::ShowComponent to show a bit of the body
• this body would be in a div
• the div would have overflow: hidden and a fixed height
• create a new stimulus controller to remove the overflow and height classes

Nice to have:

• the bottom part of the div would have a gradient that passes from transparent (top) to white (bottom) so the user peeks that there is more content below (see how we did it on this PR)