Fix feedback comments not being expandable

[david-venhoff]

Short description

This pr fixes a bug where feedback comments were not expandable in some cases. This bug existed because the responsible event handlers were (depending on page load order) set up on the <i> elements, which got later replaced by <svg> elements.

Proposed changes

• Make sure that the image elements are already converted when setting up the event handlers

Resolved issues

Fixes: #1503

I also noticed that the feedback text only gets collapsed when it has more than one line or when it has more than 20 words.
I don't know if this is a problem in practice, but a text with few but long words would break the layout:

[timobrembeck]

Thanks a lot! 👍

This fixes the issue, however I think there might be a more efficient solution...
Also, could you add a note to the changelog?

I also noticed that the feedback text only gets collapsed when it has more than one line or when it has more than 20 words. I don't know if this is a problem in practice, but a text with few but long words would break the layout

Good point, maybe it makes sense to include this block as last elif case before printing the whole comment?

{% elif feedback.comment|length > 120 %}
    <span>
        {{ feedback.comment|truncatechars:120 }} <i data-feather="chevron-down"
        class="toggle-feedback-comment transform cursor-pointer hover:scale-125"></i>
    </span>
    <span class="hidden">
        {{ feedback.comment }} <i data-feather="chevron-up"
        class="toggle-feedback-comment transform cursor-pointer hover:scale-125"></i>
    </span>
{% else %}
    {{ feedback.comment }}
{% endif %}

[david-venhoff]

I have now removed the call to feather.replace and added your suggestions for truncating too long feedback. On my screen the limit of 120 character was quite high, so I went for 60 instead.

[codeclimate]

Code Climate has analyzed commit e59330c and detected 0 issues on this pull request.

The test coverage on the diff in this pull request is 100.0% (50% is the threshold).

This pull request will bring the total coverage in the repository to 73.9% (0.0% change).

View more on Code Climate.

[timobrembeck]

@david-venhoff I think my initial solution with truncating the feedback in the django template doesn't work well for all edge cases (e.g. comments with multiple lines that contain very long words or less than 20 words but very long ones etc.), so I tried to do the truncation in css + js...
The solution was a bit too complex for regular GitHub-suggestions, so I directly pushed a commit. Could you have a look at it and check if everything works for you and whether you're ok with my changes? Thanks a lot!

[david-venhoff]

Looks good to me. 👍

[timobrembeck]

🎉