* Use grid instead of flex * Use child margin instead of flex gap * use .grid instead of .flex.flex-column * Missed one conditional flex gap * gap-2 safely deleted since there’s only one element * Add class for crayons-btn-actions This pattern occurs pretty often. Easy class addition and easy swap out once flex gap is supported in target browsers * Use crayons-btn-actions * Adjust styling to use negative margins * apply crayons-btn-actions * use margin-right instead of gap * use .grid instead of .flex.flex-column * use margin instead of gap for indicators/tooltips in headings * remove unused class for clarity * use flex and add margin to small element * remove gap from flex container and add margin to figure * crayons-article__main has neither flex nor grid thus gap has no effect * fix typo * use actual grid columns * use gap instead of flex-column * Apply crayons-btn-actions * Fix modal window display * Safari bein a real pain here Apparently Safari uses a different model to calculate height than other browsers. who knew.
58 lines
2.3 KiB
Text
58 lines
2.3 KiB
Text
<% cache("user-profile-comments-#{@user.last_comment_at}-#{@user.id}-#{@comments.size}", expires_in: 2.days) do %>
|
|
<div class="profile-comment-card crayons-card mt-2 m:mt-0 mb-2">
|
|
<% if @comments.present? %>
|
|
<% if params[:view] == "comments" %>
|
|
<div class="crayons-card__header">
|
|
<h3 class="crayons-subtitle-2">
|
|
<% if high_number_of_comments?(@user.comments_count) %>
|
|
Last <%= number_of_comments_to_render %> comments
|
|
<% else %>
|
|
All <%= @user.comments_count %> comments
|
|
<% end %>
|
|
</h3>
|
|
<div class="crayons-card__actions">
|
|
<a href="<%= @user.path %>" class="crayons-link--branded fs-base">
|
|
View all activity
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="crayons-card__header">
|
|
<h3 class="crayons-subtitle-2">
|
|
Recent comments
|
|
</h3>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% @comments.each do |comment| %>
|
|
<% if comment.commentable.present? && comment.commentable.published && !comment.deleted %>
|
|
<a href="<%= comment.path %>" class="profile-comment-row ">
|
|
<h4 class="fw-bold fs-base m-0 mb-1">
|
|
<%= comment.commentable.title %>
|
|
</h4>
|
|
<div class="flex items-center fs-s">
|
|
<p class="color-base-80">
|
|
<%= truncate(strip_tags(comment.processed_html), length: 64).html_safe %>
|
|
<p>
|
|
<small class="ml-2 color-base-60 fs-s comment-date whitespace-nowrap">
|
|
<time datetime="<%= comment.decorate.published_timestamp %>"><%= comment.readable_publish_date %></time>
|
|
</small>
|
|
</div>
|
|
</a>
|
|
<% end %>
|
|
<% end %>
|
|
<% if params[:view] != "comments" && high_number_of_comments?(@user.comments_count) %>
|
|
<div class="pt-3 pl-4 pb-3 pr-4">
|
|
<a href="<%= @user.path %>/comments" class="fs-base">
|
|
View last <%= pluralize(number_of_comments_to_render, "Comment") %>
|
|
</a>
|
|
</div>
|
|
<% elsif params[:view] != "comments" && view_all_comments?(@user.comments_count) %>
|
|
<div class="py-3 px-4">
|
|
<a href="<%= @user.path %>/comments" class="fs-base">
|
|
View all <%= @user.comments_count %> comments
|
|
</a>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|