91 lines
4.8 KiB
Text
91 lines
4.8 KiB
Text
<div class="crayons-story <% if featured == true %>crayons-story--featured<% end %>" data-content-user-id="<%= story.user_id %>">
|
|
<% if featured == true %>
|
|
<div id="featured-story-marker" data-featured-article="articles-<%= story.id %>"></div>
|
|
<a href="<%= story.path %>" class="crayons-story__cover" data-featured-article="articles-<%= story.id %>">
|
|
<div style="background-color: <%= story.main_image_background_hex_color %>; background-image: url(<%= cloud_cover_url(story.main_image) %>);" class="crayons-story__cover__image"></div>
|
|
</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="<%= ProfileImage.new(story.cached_user).get(width: 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 %>">
|
|
<%= render "articles/tag_identifier", story: story, tag: @tag %>
|
|
</a>
|
|
</h2>
|
|
<div class="crayons-story__tags">
|
|
<% story.cached_tag_list_array.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">
|
|
<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.positive_reactions_count %>
|
|
<span class="hidden s:inline"> reactions</span>
|
|
</a>
|
|
<% 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"> comments</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"
|
|
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>
|