docbrown/app/views/articles/_single_story.html.erb
Mac Siri 9ebd742712
[deploy] Reintroduce sticky_nav changes (ab81f36 & 7f92855) (#10263)
* Revert "[deploy] Revert removal of unneeded eager load (if needed) (#10179)"

This reverts commit 11c7b148da.

* Revert "[deploy] Revert "Migrate ProfileImage to Images::Profile (#10055)" (#10149)"

This reverts commit 5657067e55.
2020-09-09 15:33:13 -04:00

89 lines
4.9 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>
<% 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 %>">
<%= 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.public_reactions_count %>
<span class="hidden s:inline">&nbsp;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">&nbsp;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>