docbrown/app/views/users/_comments_section.html.erb
Dan Ott 544fa8d33e
Fixing gap property for all occurrences of flex to work in Safari (#12667)
* 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.
2021-02-17 11:40:38 +01:00

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 %>