0c6f4113f2
* Fix irregular comment count buttons * Fix irregular comments button on tag and user page * Add regression tests for irregular comment buttons
105 lines
6.1 KiB
Text
105 lines
6.1 KiB
Text
<div class="crayons-story <% if featured == true %>crayons-story--featured<% end %>" data-content-user-id="<%= story.user_id %>">
|
|
<a href="<%= story.path %>" aria-labelledby="article-link-<%= story.id %>" class="crayons-story__hidden-navigation-link"><%= story.title %></a>
|
|
<% if featured == true %>
|
|
<div id="featured-story-marker" data-featured-article="articles-<%= story.id %>"></div>
|
|
<% end %>
|
|
<% if featured == true || (feed_style_preference == "rich" && story.main_image.present?) %>
|
|
<a href="<%= story.path %>" title="<%= story.title %>" class="crayons-story__cover" aria-label="article"
|
|
style="background-color: <%= story.main_image_background_hex_color %>; background-image: url(<%= cloud_cover_url(story.main_image) %>);" class="crayons-story__cover__image">
|
|
<span class="hidden"><%= story.title %></span>
|
|
</a>
|
|
<% end %>
|
|
|
|
<% if story.video.present? && story.video_thumbnail_url.present? %>
|
|
<a href="<%= story.path %>" class="crayons-story__video" style="background-image:url(<%= story.cloudinary_video_url %>)">
|
|
<span class="crayons-story__video__time">
|
|
<%= story.video_duration_in_minutes %>
|
|
</span>
|
|
</a>
|
|
<% end %>
|
|
|
|
<div class="crayons-story__body">
|
|
<div class="crayons-story__top">
|
|
<div class="crayons-story__meta">
|
|
<div class="crayons-story__author-pic">
|
|
<% if story.cached_organization && !@organization_article_index %>
|
|
<a class="crayons-logo crayons-logo--l" href="/<%= story.cached_organization.slug %>">
|
|
<img alt="<%= story.cached_organization.name %> logo" src="<%= story.cached_organization.profile_image_90 %>" class="crayons-logo__image">
|
|
</a>
|
|
<% end %>
|
|
|
|
<a href="/<%= story.cached_user.username %>" class="crayons-avatar <% if story.cached_organization && !@organization_article_index %> crayons-avatar--s absolute -right-2 -bottom-2 border-solid border-2 border-base-inverted <% else %> crayons-avatar--l <% end %> ">
|
|
<img src="<%= Images::Profile.call(story.cached_user.profile_image_url, length: 90) %>" alt="<%= story.cached_user.username %> profile" class="crayons-avatar__image" />
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<p>
|
|
<a href="/<%= story.cached_user.username %>" class="crayons-story__secondary fw-medium">
|
|
<%= story.cached_user.name %>
|
|
</a>
|
|
<% if story.cached_organization && !@organization_article_index %>
|
|
<span>
|
|
<span class="crayons-story__tertiary fw-normal"> for </span>
|
|
<a href="/<%= story.cached_organization.slug %>" class="crayons-story__secondary fw-medium"><%= story.cached_organization.name %></a>
|
|
</span>
|
|
<% end %>
|
|
</p>
|
|
<a href="<%= story.path %>" class="crayons-story__tertiary fs-xs"><time datetime="<%= story.published_timestamp %>"><%= story.readable_publish_date %></time><span class="time-ago-indicator-initial-placeholder" data-seconds="<%= story.published_at_int %>"></span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="crayons-story__indention">
|
|
<h2 class="crayons-story__title">
|
|
<a href="<%= story.path %>" data-preload-image="<%= cloud_cover_url(story.main_image) %>" id="article-link-<%= story.id %>">
|
|
<%= story.title %>
|
|
</a>
|
|
</h2>
|
|
<div class="crayons-story__tags">
|
|
<% flare_tag = FlareTag.new(story, @tag).tag %>
|
|
<% if flare_tag %>
|
|
<a href="/t/<%= flare_tag.name %>" class="crayons-tag" style="background:<%= flare_tag.bg_color_hex %>;color:<%= flare_tag.text_color_hex %>"><span className="crayons-tag__prefix">#</span><%= flare_tag.name %></a>
|
|
<% end %>
|
|
<% tags_to_display = story.cached_tag_list_array
|
|
if flare_tag
|
|
tags_to_display = tags_to_display.reject { |tag| tag == flare_tag.name }
|
|
end %>
|
|
<% tags_to_display.each do |tag| %>
|
|
<a href="/t/<%= tag %>" class="crayons-tag"><span class="crayons-tag__prefix">#</span><%= tag %></a>
|
|
<% end %>
|
|
</div>
|
|
<div class="crayons-story__bottom">
|
|
<div class="crayons-story__details">
|
|
<% if story.public_reactions_count > 0 %>
|
|
<a href="<%= story.path %>" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left" data-reaction-count data-reactable-id="<%= story.id %>">
|
|
<%= inline_svg_tag("small-heart.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Reactions") %>
|
|
<%= story.public_reactions_count %>
|
|
<span class="hidden s:inline"> <%= story.public_reactions_count == 1 ? "reaction" : "reactions" %></span>
|
|
</a>
|
|
<% end %>
|
|
<% if story.comments_count > 0 %>
|
|
<a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left">
|
|
<%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Comments") %>
|
|
<%= story.comments_count %>
|
|
<span class="hidden s:inline"> <%= story.comments_count == 1 ? "comment" : "comments" %></span>
|
|
</a>
|
|
<% else %>
|
|
<a href="<%= story.path %>#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left">
|
|
<%= inline_svg_tag("small-comment.svg", aria: true, width: 24, height: 24, class: "crayons-icon", title: "Comments") %>
|
|
<span class="hidden s:inline">Add Comment</span>
|
|
</a>
|
|
<% end %>
|
|
</div>
|
|
<div class="crayons-story__save">
|
|
<small class="crayons-story__tertiary fs-xs mr-2">
|
|
<%= story.reading_time < 1 ? 1 : story.reading_time %> min read
|
|
</small>
|
|
<button type="button" id="article-save-button-<%= story.id %>" class="crayons-btn crayons-btn--secondary crayons-btn--s bookmark-button" data-reactable-id="<%= story.id %>" aria-label="Save to reading list" title="Save to reading list">
|
|
<span class="bm-initial">Save</span>
|
|
<span class="bm-success">Saved</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|