Skip to content

Issue #3318685 by ronaldtebrake: add a new line clamp class which allows us to...

Ronald te Brake requested to merge issue/socialbase-3318685:3318685-allow-line-climps into 2.4.x

In #3272694 we have added a short description in full teasers.

For that we use either the summary, which is a text field, formatted as text area, maxed at 140 characters of input. If that isn't filled in, we try to render the introduction field, which is a text area without any max characters.

This could mean we end up in a scenario as shown in the screenshot below.

Screenshot_2022-11-07_at_13.15.49

For that we want to introduce line clamp - https://css-tricks.com/line-clampin/#aa-the-standardized-way This is an intermediate solution, so we can ensure we only show maximum of 1 line and the rest isn't rendered anymore, this means everything below the summary or introduction has enough space to be rendered. In the meantime our design team can redesign the teaser to show the correct data with correct size in mind.

We did not make this in to a setting, because both the summary and introduction field are different widgets and formatters. We also believe this a very theme based decision, those with other teasers will likely not have this issue. Nor do they have to render the same data as we do, as we do it hardcoded in the profile teaser see profile--profile--teaser.html.twig

        {% if content.field_profile_summary|render %}
          {{ content.field_profile_summary }}
        {% else %}
          {{ content.field_profile_self_introduction }}
        {% endif %}

Therefor we have decided to ensure, on the teaser, we add the class to these two fields, so whichever renders gets the line-height clamp fix.

Closes #3318685

Merge request reports