[openstreetmap/openstreetmap-website] Add recent diaries partial to profile page (PR #6010)

[rkoeze]

@rkoeze commented on this pull request.

Looks great. Left a couple of comments.

I wonder if there's an opportunity to use some of these design elements on the `/diaries` page.

> @@ -0,0 +1,27 @@
+<% if diary_entries.present? %>
+  <h5 class="mt-4 mb-3"><%= t(".recent_diaries") %></h5>

Would it make sense to style the "Recent Diaries" string so that it's consistent with the "x contributions in the last year" string?

> @@ -0,0 +1,27 @@
+<% if diary_entries.present? %>
+  <h5 class="mt-4 mb-3"><%= t(".recent_diaries") %></h5>
+  <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
+    <% diary_entries.each do |entry| %>
+      <div class="col profile-diary-card">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <p class="card-title">
+              <%= image_tag "note.svg", :class => "card-icon", :alt => "Note" %>
+              <%= link_to entry.title, diary_entry_path(@user, entry) %>
+            </p>
+            <p class="card-text flex-grow-1"><%= truncate(strip_tags(entry.body.to_html), :length => 150) %></p>
+
+            <div class="card-text d-flex justify-content-between align-items-center mt-auto">
+              <small class="text-body-secondary">

On the `/diary` page we make the `x comments` string a clickable link that takes the user to the comment section of the post. We could also do that here.

> +    <% diary_entries.each do |entry| %>
+      <div class="col profile-diary-card">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <p class="card-title">
+              <%= image_tag "note.svg", :class => "card-icon", :alt => "Note" %>
+              <%= link_to entry.title, diary_entry_path(@user, entry) %>
+            </p>
+            <p class="card-text flex-grow-1"><%= truncate(strip_tags(entry.body.to_html), :length => 150) %></p>
+
+            <div class="card-text d-flex justify-content-between align-items-center mt-auto">
+              <small class="text-body-secondary">
+                <%= image_tag "comment.svg", :class => "card-icon", :alt => "Comments" %> <%= entry.comments.size %> <%= "comment".pluralize(entry.comments.size) %>
+              </small>
+              <small class="text-body-secondary">
+                <%= image_tag "calendar.svg", :class => "card-icon", :alt => "Date" %> <%= l(entry.created_at.to_date, :format => :long) %>

The date string and icon don't look like they're aligned vertically. Same thing for the comments. Maybe they're not intended to be. If so ignore!

> @@ -0,0 +1,27 @@
+<% if diary_entries.present? %>
+  <h5 class="mt-4 mb-3"><%= t(".recent_diaries") %></h5>
+  <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
+    <% diary_entries.each do |entry| %>
+      <div class="col profile-diary-card">
+        <div class="card h-100">
+          <div class="card-body d-flex flex-column">
+            <p class="card-title">
+              <%= image_tag "note.svg", :class => "card-icon", :alt => "Note" %>
+              <%= link_to entry.title, diary_entry_path(@user, entry) %>
+            </p>
+            <p class="card-text flex-grow-1"><%= truncate(strip_tags(entry.body.to_html), :length => 150) %></p>
+
+            <div class="card-text d-flex justify-content-between align-items-center mt-auto">
+              <small class="text-body-secondary">

Although on second thought we don't show very much of the message so that would very much mean we are enabling people to comment before reading!

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6010#pullrequestreview-2841715448
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6010/review/2841715448 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250514/f0f49b4e/attachment.htm>