diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index 6dd58d708..d52ef5ff2 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -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{ diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss index efa85e010..b3ddb6188 100644 --- a/app/assets/stylesheets/articles.scss +++ b/app/assets/stylesheets/articles.scss @@ -9,6 +9,7 @@ min-height:440px; margin:auto; max-width:1250px; + text-align: left; @media screen and ( min-width: 950px ){ margin-top:22px; } diff --git a/app/assets/stylesheets/minimal.scss b/app/assets/stylesheets/minimal.scss index fa1804397..bfbde7489 100644 --- a/app/assets/stylesheets/minimal.scss +++ b/app/assets/stylesheets/minimal.scss @@ -25,6 +25,7 @@ @import 'delete-confirm'; @import 'preact/onboarding-modal'; @import 'tag-edit'; +@import 'sticky-nav'; @import 'ltags/LiquidTags'; diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss index 4ceab65a2..76d0485c6 100644 --- a/app/assets/stylesheets/more-articles.scss +++ b/app/assets/stylesheets/more-articles.scss @@ -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; } diff --git a/app/assets/stylesheets/sticky-nav.scss b/app/assets/stylesheets/sticky-nav.scss new file mode 100644 index 000000000..d6bfbf07f --- /dev/null +++ b/app/assets/stylesheets/sticky-nav.scss @@ -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%); + } + } +} \ No newline at end of file diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 4f81211a3..b43533091 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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), diff --git a/app/models/user.rb b/app/models/user.rb index e690a9271..fc919f86b 100644 --- a/app/models/user.rb +++ b/app/models/user.rb @@ -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? diff --git a/app/views/articles/_comments_actions.html.erb b/app/views/articles/_comments_actions.html.erb index af30d219a..562aa8b5c 100644 --- a/app/views/articles/_comments_actions.html.erb +++ b/app/views/articles/_comments_actions.html.erb @@ -1,8 +1,7 @@ -
+
<% if @comments_to_show_count && @article.comments_count > @comments_to_show_count %> VIEW FULL DISCUSSION (<%= @article.comments_count %> COMMENTS) diff --git a/app/views/articles/_conduct_and_abuse_actions.html.erb b/app/views/articles/_conduct_and_abuse_actions.html.erb index 248595f96..e5e2b3a6e 100644 --- a/app/views/articles/_conduct_and_abuse_actions.html.erb +++ b/app/views/articles/_conduct_and_abuse_actions.html.erb @@ -1,3 +1,3 @@ -">code of conduct +code of conduct - -">report abuse +report abuse diff --git a/app/views/articles/_org_branding.html.erb b/app/views/articles/_org_branding.html.erb index e2a284cb5..f0c103d04 100644 --- a/app/views/articles/_org_branding.html.erb +++ b/app/views/articles/_org_branding.html.erb @@ -1,21 +1,21 @@ <% if @organization && @organization.bg_color_hex.present? %> -
+
-
<%= @organization.name %>
+
<%= @organization.name %>
<%= @organization.summary %>
- <%= @organization.name %> + <%= @organization.name %>
diff --git a/app/views/articles/_sticky_nav.html.erb b/app/views/articles/_sticky_nav.html.erb new file mode 100644 index 000000000..bb9f98cdf --- /dev/null +++ b/app/views/articles/_sticky_nav.html.erb @@ -0,0 +1,65 @@ +<% if @article.published %> + <% @actor = @article.organization || @article.user %> + + + +
+
+ + + + <%= @actor.name %> + + +
+ <% 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 %> +
+
+ <%= follow_button(@actor) %> +
+
+ +
+ Trending on dev.to +
+ <% 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| %> + + + <%= article.title %> +
+ <% article.decorate.cached_tag_list_array.each do |tag| %> + #<%= tag %> + <% end %> +
+ + <% end %> + <% if 1==2 %> + + Join the DEV Community + + <% end %> +
+<% end %> \ No newline at end of file diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb index 4e67d682a..985a87d72 100644 --- a/app/views/articles/show.html.erb +++ b/app/views/articles/show.html.erb @@ -61,144 +61,148 @@ <% end %> -
-
- - -
-
- "> - - +
+
+
+ + +
+
+ "> + + +
+
- -
-
- <% if @article.video.present? %> - <%= render "articles/video_player", meta_tags: true, article: @article %> - <% elsif @article.main_image.present? %> -
-
- <% else %> -
- <% end %> -
-
- <% if @organization %> - -
- <%= @organization.name%> -
- - <% end %> -

- <%= @article.title %> -

-

-

- <% if @article.job_opportunity.present? %> -
- - <%= @article.job_opportunity.location_city %> - - - <%= @article.job_opportunity.remoteness_in_words %> +

+ <%= @article.title %> +

+

+ -

- <% end %> -
- <% @article.cached_tag_list_array.each do |tag| %> - #<%= tag %> + <% if @user.twitter_username.present? %> + <%= image_tag_or_inline_svg "twitter" %> + <% end %> + <% if @user.github_username.present? %> + <%= image_tag_or_inline_svg "github" %> + <% end %> + + <% if @second_user.present? %> + with <%= @second_user.name %> + <% end %> + <% if @third_user.present? %> + and <%= @third_user.name %> + <% end %> + <% if should_show_updated_on?(@article) %> + Updated on <%= @article.edited_at.strftime("%b %d, %Y") if @article.edited_at %> + <% elsif should_show_crossposted_on?(@article) %> + Originally published at <%= get_host_without_www(@article.feed_source_url) %> on <%= @article.published_at.strftime("%b %d, %Y") if @article.crossposted_at %> + <% end %> + + + <% if @article.job_opportunity.present? %> +
+ + <%= @article.job_opportunity.location_city %> + + + <%= @article.job_opportunity.remoteness_in_words %> + +
<% end %> -
-
- <%= render "articles/collection", position: "top" %> -
- <%= @article.processed_html.html_safe %> -
- <%= render "articles/collection", position: "bottom" %> - <%= render 'articles/actions' %> -
- <% 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 %> -
-
- <%= render "/comments/form", - commentable: @article, - commentable_type: "Article" %> -
- <% 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 %> +
+ <% @article.cached_tag_list_array.each do |tag| %> + #<%= tag %> <% end %>
-
- <%= render 'articles/comments_actions' %> + <%= render "articles/collection", position: "top" %> +
+ <%= @article.processed_html.html_safe %>
-
+ <%= render "articles/collection", position: "bottom" %> + <%= render 'articles/actions' %> + + <% 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 %> +
+
+ <%= render "/comments/form", + commentable: @article, + commentable_type: "Article" %> +
+ <% 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 %> +
+
+
+ <%= render 'articles/comments_actions' %> +
+
+ <% end %> +
+ <% 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 @#{@classic_article.user.username} to see more of their posts in your feed." %> + <% end %> +
+ <%= render 'articles/bottom_content' %> <% end %> +
-<% 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 @#{@classic_article.user.username} to see more of their posts in your feed." %> - <% end %> -
- <%= render 'articles/bottom_content' %> -<% end %> -
+ +<%= render "articles/sticky_nav" %> <% if hasVid(@article) %> <%= render 'articles/fitvids' %> diff --git a/app/views/layouts/_styles.html.erb b/app/views/layouts/_styles.html.erb index 8ca705c0c..0d575d22a 100644 --- a/app/views/layouts/_styles.html.erb +++ b/app/views/layouts/_styles.html.erb @@ -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 %>