Provide a summary view of recent diaries

[nertc]

This PR addresses "Provide a summary view of recent diaries" issue mentioned in the #3887

Bootstrap Accordion was added to the diary entries list pages. Now the content of the diary entry will be collapsed until toggle button is clicked. View of the diary entry details (show) page remains the same. Fixes #3887

Screenshots:

[nertc]

Failed test is out of scope of this PR, as there was no change or impact related to the test that was failed.

[nertc]

This PR also partially refers to #3721 (changes HTML view of the diary entries list, but doesn't change RSS)

[mmd-osm]

I haven't tested this code yet, though it seems that toggling a diary entry would either show the whole text, or only the title. I believe #3887 talked about showing the first few n lines of the body, with an option to further expand the body of the diary.

Not seeing any text at all except for the title is hiding a lot of content, and a user needs to click on every single diary entry to see what's behind. This seems to me rather cumbersome.

Would this be possible to implement? If that's already done, that would be even better!

[tomhughes]

Yes this starts with all entries collapsed to just their headings.

It also fails if you have CSP enforcement enabled because bootstrap is using data: urls for the arrow images so they don't appear unless you allow that in the controller with:

content_security_policy(:only => :index) do |policy|
  policy.img_src(*policy.img_src, "data:")
end

[nertc]

@mmd-osm Yes, it is possible. I made this change according to the last screen mentioned in the Issue #3887. I'll change this PR to show part of the content even when it is collapsed.

@tomhughes I'll take a look if there is any way to make it work without custom code.

[nertc]

@mmd-osm I updated PR so that now 10 rem (about 7.5 paragraph lines) of content is shown when the entry is collapsed. If entry is shorter, it doesn't leave any redundant gaps. I needed to add 2 lines of custom CSS as Bootstrap Accordion doesn't support behavior of showing any content when collapsed (it sets display: none). The only downside of the current solution is that when entry is less than 7 lines, accordion button is still shown but clicking it doesn't change anything. The only fix (based on limited functionality of Bootstrap Accordion) can be made by adding custom JS code. From my experience, we try to avoid adding additional JS code. If it is okay to add one for this functionality, I can add it too.

@tomhughes I implemented solution suggested by you. I found some issues opened about Bootstrap CSP errors (twbs/bootstrap#25394), but even Bootstrap 5 mentions that some of their functionality uses data: in image urls. As mentioned in Stackexchange and MDN adding data: as background-image or other image source doesn't raise any risks. Therefore, if we don't have extremely strict CSP policy, we can use solution suggested by you.

Thank you for reviewing

[tomhughes]

I guess the question is do we really want/need the collapse and expand functionality or is it better just to show a truncated post and let people click through if they want to see the whole thing, which I think is a more typical way to handle this sort of thing.

[nertc]

or is it better just to show a truncated post and let people click through

@tomhughes Without a collapse functionality, code will be simpler, there will be no need of additional custom JS and there will be no CSP errors. From the coding point of view, it's much better solution. If we don't sacrifice any important UX, I more than agree with only truncation without collapse-expand button.

[nertc]

I created a separate PR for the truncated version of the entry #5121. If we decide to truncate diary entries instead of showing summary of them, I'll close this PR.