Add sticky sidebar to article show page (#243)
* Add sidebar sticky elements * Add sticky sidebar to article show page * Add saved changes check to user * Fix missing CSS variable in sticky nav file * Add date joined as default summary * Remove accidentally-included file * Add check for published on article sidebar
This commit is contained in:
Ben Halpern
GitHub
parent
b77f8aa4d5
commit
440714d98b
13 changed files with 342 additions and 146 deletions
|
|
@ -55,8 +55,10 @@ header{
|
|||
margin-top:60px;
|
||||
z-index:2;
|
||||
padding-top: 42%;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
@media screen and ( min-width: 880px ){
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
}
|
||||
.category-banner{
|
||||
height:250px;
|
||||
|
|
@ -64,13 +66,20 @@ header{
|
|||
}
|
||||
}
|
||||
|
||||
.home .container{
|
||||
@media screen and ( min-width: 1250px ){
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.container{
|
||||
width:880px;
|
||||
max-width:100%;
|
||||
background:white;
|
||||
box-shadow: $shadow;
|
||||
margin:60px auto 20px;
|
||||
@media screen and ( min-width: 880px ){
|
||||
text-align: left;
|
||||
@media screen and ( min-width: 1250px ){
|
||||
margin-top:80px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
|
@ -839,6 +848,9 @@ header{
|
|||
margin-top:20px;
|
||||
margin-bottom:0px;
|
||||
padding-bottom:20px;
|
||||
a{
|
||||
color: $black;
|
||||
}
|
||||
.inner{
|
||||
width:800px;
|
||||
max-width:calc(100% - 40px);
|
||||
|
|
@ -861,10 +873,10 @@ header{
|
|||
padding-top:5px;
|
||||
padding-right:10px;
|
||||
padding-bottom:8px;
|
||||
font-weight:300;
|
||||
font-weight:400;
|
||||
font-size:0.9em;
|
||||
@media screen and ( min-width: 520px ){
|
||||
font-size:18px;
|
||||
font-size:17px;
|
||||
}
|
||||
}
|
||||
.social{
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
min-height:440px;
|
||||
margin:auto;
|
||||
max-width:1250px;
|
||||
text-align: left;
|
||||
@media screen and ( min-width: 950px ){
|
||||
margin-top:22px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
@import 'delete-confirm';
|
||||
@import 'preact/onboarding-modal';
|
||||
@import 'tag-edit';
|
||||
@import 'sticky-nav';
|
||||
|
||||
@import 'ltags/LiquidTags';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,9 @@
|
|||
text-align:center;
|
||||
font-family: $helvetica;
|
||||
margin:40px auto;
|
||||
@media screen and ( min-width: 1250px ){
|
||||
margin-left: 25px;
|
||||
}
|
||||
a{
|
||||
color:rgb(19, 19, 19);
|
||||
}
|
||||
|
|
@ -86,6 +89,10 @@
|
|||
margin:20px auto;
|
||||
position: relative;
|
||||
overflow:hidden;
|
||||
@media screen and ( min-width: 1250px ){
|
||||
margin-left: 25px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $black;
|
||||
}
|
||||
|
|
|
|||
103
app/assets/stylesheets/sticky-nav.scss
Normal file
103
app/assets/stylesheets/sticky-nav.scss
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
@import 'variables';
|
||||
|
||||
.primary-sticky-nav {
|
||||
display: none;
|
||||
@media screen and ( min-width: 1250px ){
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: calc(50% + 298px);
|
||||
top: 74px;
|
||||
bottom: 30px;
|
||||
width: 310px;
|
||||
display: flex;
|
||||
flex-flow: column wrap;
|
||||
overflow: hidden;
|
||||
z-index: 100;
|
||||
}
|
||||
.primary-sticky-nav-author{
|
||||
a{
|
||||
color: $black;
|
||||
}
|
||||
img{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 360px;
|
||||
margin-right: 5px;
|
||||
vertical-align: -8px;
|
||||
}
|
||||
.primary-sticky-nav-author-name{
|
||||
font-size:1.3em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.primary-sticky-nav-author-summary{
|
||||
font-weight: 400;
|
||||
color: $medium-gray;
|
||||
padding: 10px 0px 5px;
|
||||
font-style: italic;
|
||||
font-size:0.9em;
|
||||
}
|
||||
.primary-sticky-nav-author-follow{
|
||||
padding-top:8px;
|
||||
button{
|
||||
width:135px;
|
||||
font-size:1.1em;
|
||||
border:0px;
|
||||
border-radius:3px;
|
||||
padding: 4px 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.primary-sticky-nav-profile-image{
|
||||
width: 20px;
|
||||
border-radius: 100px;
|
||||
vertical-align: -4px;
|
||||
}
|
||||
.primary-sticky-nav-title{
|
||||
padding-top:25px;
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
font-size:1.1em;
|
||||
}
|
||||
.primary-sticky-nav-element{
|
||||
display: block;
|
||||
padding: 10px 13px;
|
||||
font-size:0.9em;
|
||||
font-weight: bold;
|
||||
background: white;
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
border: 1px solid $light-medium-gray;
|
||||
box-shadow: 3px 4px 0px $light-medium-gray;
|
||||
color: $dark-gray;
|
||||
width: 262px;
|
||||
border-radius: 3px;
|
||||
&.sticky-join-cta{
|
||||
margin-top: 12px;
|
||||
padding: 16px 13px;
|
||||
background: lighten($yellow, 16%);
|
||||
border: 1px solid darken($yellow, 15%);
|
||||
box-shadow: 5px 6px 0px darken($yellow, 15%);
|
||||
img{
|
||||
width: 19px;
|
||||
margin-left: 3px;
|
||||
margin-right: 2px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
&:hover{
|
||||
background: lighten($yellow, 12%);
|
||||
border: 1px solid darken($yellow, 12%);
|
||||
box-shadow: 5px 6px 0px darken($yellow, 12%);
|
||||
}
|
||||
}
|
||||
.primary-sticky-nav-element-details{
|
||||
margin-top:9px;
|
||||
font-size: 0.7em;
|
||||
color: $medium-gray;
|
||||
}
|
||||
&:hover{
|
||||
color: $black;
|
||||
border: 1px solid darken($light-medium-gray, 15%);
|
||||
box-shadow: 3px 4px 0px darken($light-medium-gray, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,11 +131,6 @@ module ApplicationHelper
|
|||
org.bg_color_hex
|
||||
end
|
||||
|
||||
def org_text_or_blue(org)
|
||||
return "#557de8" unless (org && org.text_color_hex)
|
||||
org.text_color_hex
|
||||
end
|
||||
|
||||
def sanitized_article_body(processed_html)
|
||||
ActionController::Base.helpers.sanitize processed_html.html_safe,
|
||||
tags: %w(button strong em a table tbody thead tfoot th tr td col colgroup del p h1 h2 h3 h4 h5 h6 blockquote time div span i em u b ul ol li dd dl dt q code pre img sup sub cite center br small hr video source figcaption add ruby rp rt),
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ class User < ApplicationRecord
|
|||
after_create :send_welcome_notification
|
||||
after_save :bust_cache
|
||||
after_save :subscribe_to_mailchimp_newsletter
|
||||
after_save :conditionally_resave_articles
|
||||
after_create :estimate_default_language!
|
||||
before_validation :set_username
|
||||
before_validation :downcase_email
|
||||
|
|
@ -125,6 +126,10 @@ class User < ApplicationRecord
|
|||
end
|
||||
end
|
||||
|
||||
def tag_line
|
||||
summary
|
||||
end
|
||||
|
||||
def index_id
|
||||
"users-#{id}"
|
||||
end
|
||||
|
|
@ -314,6 +319,9 @@ class User < ApplicationRecord
|
|||
def core_profile_details_changed?
|
||||
saved_change_to_username? ||
|
||||
saved_change_to_name? ||
|
||||
saved_change_to_summary? ||
|
||||
saved_change_to_bg_color_hex? ||
|
||||
saved_change_to_text_color_hex? ||
|
||||
saved_change_to_profile_image? ||
|
||||
saved_change_to_github_username? ||
|
||||
saved_change_to_twitter_username?
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<div style="color:<%=org_text_or_blue(@article.organization) %>">
|
||||
<div>
|
||||
<% if @comments_to_show_count && @article.comments_count > @comments_to_show_count %>
|
||||
<a class="full-discussion-button"
|
||||
href="<%= @article.path %>/comments"
|
||||
style="background:<%=org_text_or_blue(@article.organization) %>;color:<%=org_bg_or_white(@article.organization) %>"
|
||||
>
|
||||
VIEW FULL DISCUSSION (<%= @article.comments_count %> COMMENTS)
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<a href="/code-of-conduct" style="color:<%=org_text_or_blue(@article.organization) if page == "articles_show" %>">code of conduct</a>
|
||||
<a href="/code-of-conduct" >code of conduct</a>
|
||||
-
|
||||
<a href="/report-abuse?url=<%= request.url %>" style="color:<%=org_text_or_blue(@article.organization) if page == "articles_show" %>">report abuse</a>
|
||||
<a href="/report-abuse?url=<%= request.url %>">report abuse</a>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<% if @organization && @organization.bg_color_hex.present? %>
|
||||
<div class="org-branding" style="background:<%= @organization.bg_color_hex %>;color:<%= @organization.text_color_hex %>">
|
||||
<div class="org-branding">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<div class="name"><a href="/<%=@organization.slug%>" style="color:<%= @organization.text_color_hex %>;"><%= @organization.name %></a></div>
|
||||
<div class="name"><a href="/<%=@organization.slug%>"><%= @organization.name %></a></div>
|
||||
<div class="summary"><%= @organization.summary %></div>
|
||||
<p class="social">
|
||||
<% if @organization.twitter_username.present? %>
|
||||
<a href="https://twitter.com/<%= @organization.twitter_username %>" target="_blank" rel="noopener" style="color:<%= @organization.text_color_hex %>;">@<%= @organization.twitter_username %></a>
|
||||
<a href="https://twitter.com/<%= @organization.twitter_username %>" target="_blank" rel="noopener" >@<%= @organization.twitter_username %></a>
|
||||
<% end %>
|
||||
<% if @organization.website_url.present? %>
|
||||
<a href="<%= @organization.website_url %>" target="_blank" rel="noopener" style="color:<%= @organization.text_color_hex %>;"><%= beautified_url @organization.website_url %></a>
|
||||
<a href="<%= @organization.website_url %>" target="_blank" rel="noopener"><%= beautified_url @organization.website_url %></a>
|
||||
<% end %>
|
||||
</p>
|
||||
</div>
|
||||
<div class="profile-image">
|
||||
<a href="/<%=@organization.slug%>">
|
||||
<img src="<%= ProfileImage.new(@organization).get %>" alt="<%= @organization.name %>" style="border-color:<%=user_colors(@organization)[:text] %>;background:<%=user_colors(@organization)[:text] %>"/>
|
||||
<img src="<%= ProfileImage.new(@organization).get %>" alt="<%= @organization.name %>" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
65
app/views/articles/_sticky_nav.html.erb
Normal file
65
app/views/articles/_sticky_nav.html.erb
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<% if @article.published %>
|
||||
<% @actor = @article.organization || @article.user %>
|
||||
<style>
|
||||
.primary-sticky-nav-author{
|
||||
border: 1px solid <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
|
||||
box-shadow: 3px 4px 0px <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
|
||||
}
|
||||
.primary-sticky-nav-author a{
|
||||
color: 1px solid <%= HexComparer.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %> !important;
|
||||
}
|
||||
.primary-sticky-nav-author button{
|
||||
background-color: <%= user_colors(@actor)[:bg] %> !important;
|
||||
color: <%= user_colors(@actor)[:text] %> !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<div class="primary-sticky-nav">
|
||||
<div class="primary-sticky-nav-element primary-sticky-nav-author">
|
||||
<a href="<%= @actor.path %>"><img src="<%= @actor.profile_image %>" /></a>
|
||||
<span class="primary-sticky-nav-author-name">
|
||||
<a href="<%= @actor.path %>">
|
||||
<%= @actor.name %>
|
||||
</a>
|
||||
</span>
|
||||
<div class="primary-sticky-nav-author-summary">
|
||||
<% if @actor.tag_line.present? %>
|
||||
<%= truncate (@actor.tag_line || @actor.summary || "Posts in this tag"), length: 200 %>
|
||||
<% else %>
|
||||
Member since <%= @actor.created_at.strftime("%b %e, %Y") %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="primary-sticky-nav-author-follow">
|
||||
<%= follow_button(@actor) %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="primary-sticky-nav-title">
|
||||
Trending on dev.to
|
||||
</div>
|
||||
<% Article.tagged_with((@article.cached_tag_list_array + ["career","productivity","discuss"]), any: true).
|
||||
includes(:user).
|
||||
where("positive_reactions_count > ? OR comments_count > ?", (Rails.env.production? ? 17 : -1 ), (Rails.env.production? ? 7 : -1 )).
|
||||
where(published: true).
|
||||
where("featured_number > ?", 1449999999).
|
||||
order("published_at DESC").
|
||||
limit(8).
|
||||
each do |article| %>
|
||||
<a class="primary-sticky-nav-element" href="<%= article.path %>">
|
||||
<img src="<%= article.user.profile_image %>" class="primary-sticky-nav-profile-image" />
|
||||
<%= article.title %>
|
||||
<div class="primary-sticky-nav-element-details">
|
||||
<% article.decorate.cached_tag_list_array.each do |tag| %>
|
||||
<span>#<%= tag %></span>
|
||||
<% end %>
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if 1==2 %>
|
||||
<a class="primary-sticky-nav-element sticky-join-cta" href="/enter">
|
||||
<img src="https://emojipedia-us.s3.amazonaws.com/thumbs/240/apple/129/waving-hand-sign_1f44b.png" /> Join the DEV Community
|
||||
</a>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -61,144 +61,148 @@
|
|||
</a>
|
||||
<% end %>
|
||||
|
||||
<div
|
||||
class="container article"
|
||||
id="article-show-container"
|
||||
data-author-id="<%= @article.user_id %>"
|
||||
data-live="<%= @article.live_now %>"
|
||||
data-path="<%= @article.path %>"
|
||||
>
|
||||
<section itemscope itemtype="http://schema.org/Article" itemprop="mainEntityOfPage">
|
||||
<meta itemprop="url" content="https://dev.to<%=@article.path%>">
|
||||
<meta itemprop="image" content="<%= cloud_social_image(@article) %>">
|
||||
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
|
||||
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
|
||||
<meta itemprop="url" content="<%= asset_path "android-icon-192x192.png" %>">
|
||||
<meta itemprop="width" content="192">
|
||||
<meta itemprop="height" content="192">
|
||||
<div class="home">
|
||||
<div
|
||||
class="container article"
|
||||
id="article-show-container"
|
||||
data-author-id="<%= @article.user_id %>"
|
||||
data-live="<%= @article.live_now %>"
|
||||
data-path="<%= @article.path %>"
|
||||
>
|
||||
<section itemscope itemtype="http://schema.org/Article" itemprop="mainEntityOfPage">
|
||||
<meta itemprop="url" content="https://dev.to<%=@article.path%>">
|
||||
<meta itemprop="image" content="<%= cloud_social_image(@article) %>">
|
||||
<div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
|
||||
<div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
|
||||
<meta itemprop="url" content="<%= asset_path "android-icon-192x192.png" %>">
|
||||
<meta itemprop="width" content="192">
|
||||
<meta itemprop="height" content="192">
|
||||
</div>
|
||||
<meta itemprop="name" content="The DEV Community">
|
||||
</div>
|
||||
<meta itemprop="name" content="The DEV Community">
|
||||
</div>
|
||||
<header>
|
||||
<% if @article.video.present? %>
|
||||
<%= render "articles/video_player", meta_tags: true, article: @article %>
|
||||
<% elsif @article.main_image.present? %>
|
||||
<div class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;background-image:url(<%=cloud_cover_url(@article.main_image)%>)">
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="blank-space"></div>
|
||||
<% end %>
|
||||
</header>
|
||||
<div class="title" id="main-title">
|
||||
<% if @organization %>
|
||||
<a href="<%= @organization.path %>" class="org-branded-title-link">
|
||||
<div class="org-branded-title">
|
||||
<img src="<%= ProfileImage.new(@organization).get(50) %>" class="org-pic"/> <%= @organization.name%>
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<h1 class="<%= @article.title_length_classification %>" itemprop="name headline">
|
||||
<%= @article.title %>
|
||||
</h1>
|
||||
<h3>
|
||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||
<meta itemprop="url" content="https://dev.to/<%=@user.username%>">
|
||||
<a href="/<%= @user.username %>" class="author">
|
||||
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(50)%>" alt="<%= @user.username %> profile image"/>
|
||||
<span itemprop="name"><%= @user.name %></span>
|
||||
<header>
|
||||
<% if @article.video.present? %>
|
||||
<%= render "articles/video_player", meta_tags: true, article: @article %>
|
||||
<% elsif @article.main_image.present? %>
|
||||
<div class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;background-image:url(<%=cloud_cover_url(@article.main_image)%>)">
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="blank-space"></div>
|
||||
<% end %>
|
||||
</header>
|
||||
<div class="title" id="main-title">
|
||||
<% if @organization %>
|
||||
<a href="<%= @organization.path %>" class="org-branded-title-link">
|
||||
<div class="org-branded-title">
|
||||
<img src="<%= ProfileImage.new(@organization).get(50) %>" class="org-pic"/> <%= @organization.name%>
|
||||
</div>
|
||||
</a>
|
||||
</span>
|
||||
<% if @user.twitter_username.present? %>
|
||||
<a href="http://twitter.com/<%= @user.twitter_username %>"><%= image_tag_or_inline_svg "twitter" %></a>
|
||||
<% end %>
|
||||
<% if @user.github_username.present? %>
|
||||
<a href="http://github.com/<%= @user.github_username %>"><%= image_tag_or_inline_svg "github" %></a>
|
||||
<% end %>
|
||||
<span class="published-at" itemprop="datePublished"><%= @article.readable_publish_date if @article.published_at %></span>
|
||||
<% if @second_user.present? %>
|
||||
<em>with <b><a href="<%= @second_user.path %>"><%= @second_user.name %></a></b></em>
|
||||
<% end %>
|
||||
<% if @third_user.present? %>
|
||||
<em> and <b><a href="<%= @third_user.path %>"><%= @third_user.name %></a></b></em>
|
||||
<% end %>
|
||||
<% if should_show_updated_on?(@article) %>
|
||||
<span class="published-at updated-at"><em>Updated on <span itemprop="dateModified"><%= @article.edited_at.strftime("%b %d, %Y") if @article.edited_at %></span> </em></span>
|
||||
<% elsif should_show_crossposted_on?(@article) %>
|
||||
<span class="published-at updated-at"><em>Originally published at <a href="<%= @article.feed_source_url %>" style="color:#1395b8"><%= get_host_without_www(@article.feed_source_url) %></a> on <span class="posted-date-inline"><%= @article.published_at.strftime("%b %d, %Y") if @article.crossposted_at %></span></em></span>
|
||||
<% end %>
|
||||
<span class="action-space" id="action-space"></span>
|
||||
</h3>
|
||||
<% if @article.job_opportunity.present? %>
|
||||
<div class="tags" style="margin-bottom: 10px;">
|
||||
<a class="tag" target="_blank" style="color:white;background:#0eb268;" href="https://www.google.com/maps/place/<%= JobOpportunity.last.location_given %>">
|
||||
<%= @article.job_opportunity.location_city %>
|
||||
</a>
|
||||
<span class="tag" style="color:white;background:#0b82c6;">
|
||||
<%= @article.job_opportunity.remoteness_in_words %>
|
||||
<h1 class="<%= @article.title_length_classification %>" itemprop="name headline">
|
||||
<%= @article.title %>
|
||||
</h1>
|
||||
<h3>
|
||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person">
|
||||
<meta itemprop="url" content="https://dev.to/<%=@user.username%>">
|
||||
<a href="/<%= @user.username %>" class="author">
|
||||
<img class="profile-pic" src="<%= ProfileImage.new(@user).get(50)%>" alt="<%= @user.username %> profile image"/>
|
||||
<span itemprop="name"><%= @user.name %></span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
<div class="tags">
|
||||
<% @article.cached_tag_list_array.each do |tag| %>
|
||||
<a class="tag" href="/t/<%= tag %>" style="background-color:<%=tag_colors(tag)[:background] %>;color:<%=tag_colors(tag)[:color] %>">#<%= tag %></a>
|
||||
<% if @user.twitter_username.present? %>
|
||||
<a href="http://twitter.com/<%= @user.twitter_username %>"><%= image_tag_or_inline_svg "twitter" %></a>
|
||||
<% end %>
|
||||
<% if @user.github_username.present? %>
|
||||
<a href="http://github.com/<%= @user.github_username %>"><%= image_tag_or_inline_svg "github" %></a>
|
||||
<% end %>
|
||||
<span class="published-at" itemprop="datePublished"><%= @article.readable_publish_date if @article.published_at %></span>
|
||||
<% if @second_user.present? %>
|
||||
<em>with <b><a href="<%= @second_user.path %>"><%= @second_user.name %></a></b></em>
|
||||
<% end %>
|
||||
<% if @third_user.present? %>
|
||||
<em> and <b><a href="<%= @third_user.path %>"><%= @third_user.name %></a></b></em>
|
||||
<% end %>
|
||||
<% if should_show_updated_on?(@article) %>
|
||||
<span class="published-at updated-at"><em>Updated on <span itemprop="dateModified"><%= @article.edited_at.strftime("%b %d, %Y") if @article.edited_at %></span> </em></span>
|
||||
<% elsif should_show_crossposted_on?(@article) %>
|
||||
<span class="published-at updated-at"><em>Originally published at <a href="<%= @article.feed_source_url %>" style="color:#1395b8"><%= get_host_without_www(@article.feed_source_url) %></a> on <span class="posted-date-inline"><%= @article.published_at.strftime("%b %d, %Y") if @article.crossposted_at %></span></em></span>
|
||||
<% end %>
|
||||
<span class="action-space" id="action-space"></span>
|
||||
</h3>
|
||||
<% if @article.job_opportunity.present? %>
|
||||
<div class="tags" style="margin-bottom: 10px;">
|
||||
<a class="tag" target="_blank" style="color:white;background:#0eb268;" href="https://www.google.com/maps/place/<%= JobOpportunity.last.location_given %>">
|
||||
<%= @article.job_opportunity.location_city %>
|
||||
</a>
|
||||
<span class="tag" style="color:white;background:#0b82c6;">
|
||||
<%= @article.job_opportunity.remoteness_in_words %>
|
||||
</span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<%= render "articles/collection", position: "top" %>
|
||||
<div class="body" data-article-id="<%= @article.id %>" id="article-body" itemprop="articleBody">
|
||||
<%= @article.processed_html.html_safe %>
|
||||
</div>
|
||||
<%= render "articles/collection", position: "bottom" %>
|
||||
<%= render 'articles/actions' %>
|
||||
</section>
|
||||
<% if @article.body_markdown && @article.body_markdown.size > 900 %>
|
||||
<% cache("article-about-author-#{@user.id}-#{@user.updated_at}", :expires_in => 100.hours) do %>
|
||||
<%= render 'articles/about_author' %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= render 'articles/org_branding' %>
|
||||
<% if @article.show_comments %>
|
||||
<div class="comments-container-container" style="background:<%= org_bg_or_white(@article.organization) %>">
|
||||
<div
|
||||
class="comments-container"
|
||||
id="comments-container"
|
||||
data-commentable-id="<%= @article.id %>"
|
||||
data-commentable-type="Article">
|
||||
<%= render "/comments/form",
|
||||
commentable: @article,
|
||||
commentable_type: "Article" %>
|
||||
<div class="comment-trees" id="comment-trees-container">
|
||||
<% cache "comment_root_#{user_signed_in?}", expires_in: 1.hours do %>
|
||||
<%= render "comments/login_cta_comment" %>
|
||||
<% end %>
|
||||
<% Comment.rooted_on(@article.id,"Article").order("score DESC").limit(@comments_to_show_count).each do |comment| %>
|
||||
<% cache ["comment_root_#{user_signed_in?}", comment] do %>
|
||||
<%= render("/comments/comment",
|
||||
comment:comment,
|
||||
commentable: @article,
|
||||
is_view_root: true) %>
|
||||
<% end %>
|
||||
<div class="tags">
|
||||
<% @article.cached_tag_list_array.each do |tag| %>
|
||||
<a class="tag" href="/t/<%= tag %>" style="background-color:<%=tag_colors(tag)[:background] %>;color:<%=tag_colors(tag)[:color] %>">#<%= tag %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show-comments-footer">
|
||||
<%= render 'articles/comments_actions' %>
|
||||
<%= render "articles/collection", position: "top" %>
|
||||
<div class="body" data-article-id="<%= @article.id %>" id="article-body" itemprop="articleBody">
|
||||
<%= @article.processed_html.html_safe %>
|
||||
</div>
|
||||
</div>
|
||||
<%= render "articles/collection", position: "bottom" %>
|
||||
<%= render 'articles/actions' %>
|
||||
</section>
|
||||
<% if @article.body_markdown && @article.body_markdown.size > 900 %>
|
||||
<% cache("article-about-author-#{@user.id}-#{@user.updated_at}", :expires_in => 100.hours) do %>
|
||||
<%= render 'articles/about_author' %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<%= render 'articles/org_branding' %>
|
||||
<% if @article.show_comments %>
|
||||
<div class="comments-container-container">
|
||||
<div
|
||||
class="comments-container"
|
||||
id="comments-container"
|
||||
data-commentable-id="<%= @article.id %>"
|
||||
data-commentable-type="Article">
|
||||
<%= render "/comments/form",
|
||||
commentable: @article,
|
||||
commentable_type: "Article" %>
|
||||
<div class="comment-trees" id="comment-trees-container">
|
||||
<% cache "comment_root_#{user_signed_in?}", expires_in: 1.hours do %>
|
||||
<%= render "comments/login_cta_comment" %>
|
||||
<% end %>
|
||||
<% Comment.rooted_on(@article.id,"Article").order("score DESC").limit(@comments_to_show_count).each do |comment| %>
|
||||
<% cache ["comment_root_#{user_signed_in?}", comment] do %>
|
||||
<%= render("/comments/comment",
|
||||
comment:comment,
|
||||
commentable: @article,
|
||||
is_view_root: true) %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show-comments-footer">
|
||||
<%= render 'articles/comments_actions' %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% cache("article-bottom-content-#{@article.cached_tag_list_array.sort}", :expires_in => 6.hours) do %>
|
||||
<% if @classic_article %>
|
||||
<%= render "additional_content_boxes/article_box",
|
||||
article: @classic_article,
|
||||
classification: "classic",
|
||||
classification_text: "Classic DEV Post from #{@classic_article.readable_publish_date}",
|
||||
follow_cue: "Follow <a href='#{@classic_article.user.path}'>@#{@classic_article.user.username}</a> to see more of their posts in your feed." %>
|
||||
<% end %>
|
||||
<div id="additional-content-area" data-article-id="<%= @article.id %>,<%= @classic_article&.id %>"></div>
|
||||
<%= render 'articles/bottom_content' %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% cache("article-bottom-content-#{@article.cached_tag_list_array.sort}", :expires_in => 6.hours) do %>
|
||||
<% if @classic_article %>
|
||||
<%= render "additional_content_boxes/article_box",
|
||||
article: @classic_article,
|
||||
classification: "classic",
|
||||
classification_text: "Classic DEV Post from #{@classic_article.readable_publish_date}",
|
||||
follow_cue: "Follow <a href='#{@classic_article.user.path}'>@#{@classic_article.user.username}</a> to see more of their posts in your feed." %>
|
||||
<% end %>
|
||||
<div id="additional-content-area" data-article-id="<%= @article.id %>,<%= @classic_article&.id %>"></div>
|
||||
<%= render 'articles/bottom_content' %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= render "articles/sticky_nav" %>
|
||||
|
||||
<% if hasVid(@article) %>
|
||||
<%= render 'articles/fitvids' %>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<%= Rails.application.assets['more-articles.css'].to_s.html_safe %>
|
||||
<%= Rails.application.assets["ltags/LiquidTags.scss"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["syntax.css"].to_s.html_safe %>
|
||||
<%= Rails.application.assets["primary-sticky-nav.css"].to_s.html_safe %>
|
||||
<% else %>
|
||||
<%= Rails.application.assets['article-show.css'].to_s.html_safe %>
|
||||
<%= Rails.application.assets['podcast-episodes-show.css'].to_s.html_safe %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue