Redesign User Diary Page Grid Using Bootstrap Grid and Cards

[kcne]

Problem

The current user diary page could benefit from a more organized and user-friendly layout. Navigation through diary entries can be cumbersome, and readability might be improved with a different structure.

Description

Description: I propose redesigning the user diary page by using Bootstrap's grid and card components, which are already part of our existing CSS framework. The main idea is to:

• Organize diary entries using a grid layout, allowing users to view more entries at once.
• Display each entry within a Bootstrap card, providing a cleaner and more consistent look.
• Improve overall readability and navigation.

This idea could also work alongside PR #5121, which addresses text truncation for long diary entries. The redesign would focus on the overall user interface and user experience.

Would love to hear what others think about this approach.

Screenshots

Note: This is just initial idea, so I can get feedback what others think about this. If there be some interest i can do mobile view too and enchance this further. Thank you.

[AntonKhorev]

Do you want the entries to look like Open Graph previews, using the same preview images and descriptions?

[kcne]

Thanks for the question, @AntonKhorev

The primary goal is to use Bootstrap grid and cards for better organization and readability. I hadn't considered making entries resemble Open Graph previews, but it's an interesting idea.

Currently, the user diary form includes a subject, markdown body, language, and optional lat/long parameters. Implementing Open Graph style previews would require custom code to either extract images from markdown, or introducing some kind of image link input when creating entries. This would certainly add some complexity but could enhance organization and address some of the Open Graph issues.

[AntonKhorev]

Implementing Open Graph style previews would require custom code to either extract images from markdown

That's what already happening. <meta property="og:image" ...> already has either the first image or the logo if there's none.