From 5f3fd969604c79939b08c4b3b1be5cbe0cea6fec Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Sat, 6 Apr 2019 14:49:52 -0400 Subject: [PATCH] Modify social share button and functionality (#2316) * Modify social share button and functionality * Some nightmode changes tossed in * Style adjustments and test snapshot fix --- app/assets/stylesheets/article-show.scss | 92 ++++++++++++++++--- app/assets/stylesheets/articles.scss | 6 +- app/assets/stylesheets/chat.scss | 17 ++++ .../stylesheets/ltags/GithubReadmeTag.scss | 3 + app/assets/stylesheets/ltags/GithubTag.scss | 8 ++ app/controllers/buffer_updates_controller.rb | 12 +++ .../internal/articles_controller.rb | 2 +- .../__snapshots__/message.test.jsx.snap | 5 - app/javascript/chat/chat.jsx | 1 - app/javascript/chat/message.jsx | 21 ++--- app/views/articles/_actions.html.erb | 4 +- app/views/articles/_sticky_nav.html.erb | 2 +- app/views/moderations/index.html.erb | 3 +- app/views/moderations/mod.html.erb | 2 +- spec/requests/buffer_updates_spec.rb | 13 +-- 15 files changed, 141 insertions(+), 50 deletions(-) diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index e5f547867..0733251c7 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -700,14 +700,14 @@ article { width: 880px; padding: calc(0px + 0.7vh) 0px; } - @media screen and (min-width: 1530px) { + @media screen and (min-width: 1365px) { margin-left: -1px; margin-right: -1px; - width: 156px; + width: calc(55px + 1.1vw); top: 0%; - padding: 5.5% 0px; + padding: calc(10px + 5.5%) 0px; bottom: 5%; - left: calc(50% - 756px); + left: calc(50% - 672px); border-radius: 20px; background: transparent; border: 0px; @@ -721,7 +721,7 @@ article { a { margin-bottom: 10px !important; display: block !important; - width: 140px !important; + width: 100% !important; padding: 6px 0px !important; margin-left: 0px !important; margin-right: 0px !important; @@ -743,7 +743,7 @@ article { } a { margin-top: 5px !important; - font-size: 0.79em !important; + font-size: 0.67em !important; padding: 10px 0px 9px !important; &.article-actions-comments-count { padding: 12px 0px !important; @@ -758,6 +758,24 @@ article { } } } + @media screen and (min-width: 1439px) { + width: calc(90px + 1.1vw); + left: calc(50% - 711px); + a { + font-size: 0.70em !important; + } + } + @media screen and (min-width: 1530px) { + width: 156px; + left: calc(50% - 756px); + button, + a { + width: 140px !important; + } + a { + font-size: 0.79em !important; + } + } button { background: transparent; background: var(--theme-container-background, transparent); @@ -776,6 +794,18 @@ article { height: 28px; width: 28px; } + @media screen and (min-width: 1365px) { + height: 19px; + width: 19px; + } + @media screen and (min-width: 1439px) { + height: 23px; + width: 23px; + } + @media screen and (min-width: 1530px) { + height: 28px; + width: 28px; + } } .reaction-number { display: inline-block; @@ -791,6 +821,20 @@ article { vertical-align: 7px; margin-left: 7px; } + @media screen and (min-width: 1365px) { + font-size: 13px; + vertical-align: 4px; + width: 28px; + } + @media screen and (min-width: 1439px) { + font-size: 15px; + vertical-align: 5px; + width: 37px; + } + @media screen and (min-width: 1530px) { + font-size: 18px; + vertical-align: 7px; + } } &:hover { border: 2px solid #88aacc; @@ -902,6 +946,9 @@ article { font-stretch: condensed; padding: 4px 0.88vw; border-radius: 3px; + .article-actions-comments-count-number { + display: none; + } @media screen and (min-width: 620px) { display: inline-block; } @@ -909,13 +956,14 @@ article { font-size: 0.92em; vertical-align: 6px; } - img { - height: 18px; - width: 18px; + @media screen and (min-width: 1439px) { + .article-actions-comments-count-number { + display: inline-block; + } } } .article-actions-tweet-button { - padding: 7px 0 6px; + padding: 2px 0 2px !important; border-radius: 3px; border: 2px solid darken($light-gray, 20%); margin-right: 0.15vw; @@ -931,12 +979,28 @@ article { } @media screen and (min-width: 500px) { display: inline-block; - padding: 2px 0 2px; vertical-align: calc(6px - 0.07vw); } - @media screen and (min-width: 1250px) { - padding: 3px 0 3px; - vertical-align: 5px; + @media screen and (min-width: 1365px) { + padding: 6px 0 6px !important; + img { + height: 17px; + width: 17px; + } + } + @media screen and (min-width: 1439px) { + padding: 7px 0 7px !important; + img { + height: 20px; + width: 20px; + } + } + @media screen and (min-width: 1530px) { + padding: 9px 0 9px !important; + img { + height: 23px; + width: 23px; + } } } } diff --git a/app/assets/stylesheets/articles.scss b/app/assets/stylesheets/articles.scss index a6417f44c..3a149215e 100644 --- a/app/assets/stylesheets/articles.scss +++ b/app/assets/stylesheets/articles.scss @@ -12,9 +12,6 @@ @media screen and (min-width: 950px) { margin-top: 26px; } - @media screen and (min-width: 2650px) { - max-width: 1300px; - } &.sub-home { margin-top: 10px; .side-bar { @@ -840,6 +837,9 @@ @media screen and (min-width: 950px) { display: block; } + @media screen and (min-width: 1500px) { + margin-left: 13px; + } .fixed-sidebar { position: fixed; width: 276px; diff --git a/app/assets/stylesheets/chat.scss b/app/assets/stylesheets/chat.scss index 79254d859..67586d568 100644 --- a/app/assets/stylesheets/chat.scss +++ b/app/assets/stylesheets/chat.scss @@ -54,6 +54,7 @@ margin-bottom: 5px; &:hover{ background: lighten($green, 20%); + background: var(--theme-container-background-hover, lighten($green, 20%)) } } @@ -613,6 +614,8 @@ background: transparent; padding:3px 0px; margin-bottom: -5px 0; + color: $black; + color: var(--theme-color, $black); &:hover { .chatchanneltab--inactive { border: 1px solid $outline-color; @@ -771,6 +774,12 @@ max-width: 100%; &:hover { background: $light-gray; + background: var(--theme-container-background-hover, $light-gray); + .chatmessagebody__username--link { + background: transparent; + background: var(--theme-container-background-hover, transparent); + } + } } @@ -831,6 +840,14 @@ .chatmessagebody__username--link { color: inherit; + background: white; + border-radius: 3px; + padding: 0px 2px; + display: inline-block; + &:hover { + background: transparent; + background: var(--theme-container-background-hover, transparent); + } } .chatmessagebody__divider { diff --git a/app/assets/stylesheets/ltags/GithubReadmeTag.scss b/app/assets/stylesheets/ltags/GithubReadmeTag.scss index b7bbe525e..16c72f9ab 100644 --- a/app/assets/stylesheets/ltags/GithubReadmeTag.scss +++ b/app/assets/stylesheets/ltags/GithubReadmeTag.scss @@ -9,6 +9,7 @@ max-width: 620px; a { color: #0366d6 !important; + color: var(--theme-anchor-color, #0366d6) !important; } .readme-overview { padding: 0.8em 0.5em; @@ -25,6 +26,8 @@ left: 0px; margin-right: 0.3em; vertical-align: -0.18em; + filter: invert(0); + filter: var(--theme-social-icon-invert, invert(0)); } } h3 { diff --git a/app/assets/stylesheets/ltags/GithubTag.scss b/app/assets/stylesheets/ltags/GithubTag.scss index 749c5dc3d..659565035 100644 --- a/app/assets/stylesheets/ltags/GithubTag.scss +++ b/app/assets/stylesheets/ltags/GithubTag.scss @@ -13,6 +13,7 @@ } a { color:$black; + color: var(--theme-color, $black); } .issue-title { font-weight: normal; @@ -32,6 +33,8 @@ display: inline-block !important; margin-left: 0 !important; left: 0 !important; + filter: invert(0); + filter: var(--theme-social-icon-invert, invert(0)); } } @@ -40,6 +43,7 @@ .github-thread { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #fff; + background-color: var(--theme-container-background, #fff); border: 1px solid #d1d5da; box-shadow: $shadow; border-radius: 3px; @@ -86,6 +90,7 @@ .timeline-comment-header { display: flex; background: #f6f8fa; + background: var(--theme-container-background, #f6f8fa); border-bottom: 1px solid #d1d5da; padding: 0px 15px; @@ -187,6 +192,7 @@ color: #444d56; vertical-align: middle; background-color: #fafbfc; + background-color: var(--theme-container-background, #fafbfc); border: solid 1px #c6cbd1; border-bottom-color: #959da5; border-radius: 3px; @@ -199,6 +205,7 @@ margin-bottom: 15px; a.github-user-link { color: #24292e; + color: var(--theme-secondary-color, #24292e); font-weight: 600; white-space: nowrap; } @@ -345,6 +352,7 @@ text-align: center; padding: 0.35em 0 1.35em; box-shadow: -0px -0px 60px 42px #fff; + box-shadow: -0px -0px 60px 42px var(--theme-container-background, #fff); position:relative; z-index:100 } diff --git a/app/controllers/buffer_updates_controller.rb b/app/controllers/buffer_updates_controller.rb index 803ee121e..f7cf50f86 100644 --- a/app/controllers/buffer_updates_controller.rb +++ b/app/controllers/buffer_updates_controller.rb @@ -6,6 +6,7 @@ class BufferUpdatesController < ApplicationController @article = Article.find(params[:buffer_update][:article_id]) create_main_tweet create_satellite_tweets + create_facebook_post @article.update(last_buffered: Time.current) redirect_back(fallback_location: "/mod") end @@ -39,6 +40,17 @@ class BufferUpdatesController < ApplicationController end end + def create_facebook_post + BufferUpdate.create( + article_id: @article.id, + composer_user_id: current_user.id, + body_text: params[:buffer_update][:body_text], + social_service_name: "facebook", + buffer_profile_id_code: ApplicationConfig["BUFFER_FACEBOOK_ID"], + status: "pending", + ) + end + def modified_body_text @user = @article.user if @user.twitter_username.present? diff --git a/app/controllers/internal/articles_controller.rb b/app/controllers/internal/articles_controller.rb index 3c71c7bdd..962d77911 100644 --- a/app/controllers/internal/articles_controller.rb +++ b/app/controllers/internal/articles_controller.rb @@ -58,7 +58,7 @@ class Internal::ArticlesController < Internal::ApplicationController order("hotness_score DESC"). page(params[:page]). limited_columns_internal_select. - per(50) + per(30) @featured_articles = Article. where(published: true). diff --git a/app/javascript/chat/__tests__/__snapshots__/message.test.jsx.snap b/app/javascript/chat/__tests__/__snapshots__/message.test.jsx.snap index 8a827ac44..60219a67d 100644 --- a/app/javascript/chat/__tests__/__snapshots__/message.test.jsx.snap +++ b/app/javascript/chat/__tests__/__snapshots__/message.test.jsx.snap @@ -51,11 +51,6 @@ exports[` should render and test snapshot 1`] = ` "__html": "WE BUILT THIS CITY", } } - style={ - Object { - "color": "black", - } - } /> diff --git a/app/javascript/chat/chat.jsx b/app/javascript/chat/chat.jsx index c5f0ac428..11c8d69ea 100644 --- a/app/javascript/chat/chat.jsx +++ b/app/javascript/chat/chat.jsx @@ -685,7 +685,6 @@ export default class Chat extends Component { userID={message.user_id} profileImageUrl={message.profile_image_url} message={message.message} - messageColor={message.messageColor} timestamp={showTimestamp ? message.timestamp : null} color={message.color} type={message.type} diff --git a/app/javascript/chat/message.jsx b/app/javascript/chat/message.jsx index 896dabc50..925f2ecc9 100644 --- a/app/javascript/chat/message.jsx +++ b/app/javascript/chat/message.jsx @@ -9,30 +9,27 @@ const Message = ({ message, color, type, - messageColor, timestamp, profileImageUrl, onContentTrigger, }) => { const spanStyle = { color }; - const messageStyle = { color: messageColor }; if (type === 'error') { return ; } const messageArea = ( - - ); + + ); return (
); @@ -79,7 +74,6 @@ Message.propTypes = { userID: PropTypes.number.isRequired, color: PropTypes.string.isRequired, message: PropTypes.string.isRequired, - messageColor: PropTypes.string, type: PropTypes.string, timestamp: PropTypes.string, profileImageUrl: PropTypes.string, @@ -90,7 +84,6 @@ Message.defaultProps = { type: 'normalMessage', timestamp: null, profileImageUrl: '', - messageColor: 'black', }; export default Message; diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb index 30bcf6fec..0ce786af9 100644 --- a/app/views/articles/_actions.html.erb +++ b/app/views/articles/_actions.html.erb @@ -16,9 +16,9 @@ " /> - DISCUSSION + DISCUSS <% if @article.comments_count.nonzero? %> - (<%= @article.comments_count %>) + (<%= @article.comments_count %>) <% else %> <% end %> diff --git a/app/views/articles/_sticky_nav.html.erb b/app/views/articles/_sticky_nav.html.erb index ead59d06b..7432fcb03 100644 --- a/app/views/articles/_sticky_nav.html.erb +++ b/app/views/articles/_sticky_nav.html.erb @@ -73,7 +73,7 @@ <% end %> <% if @variant_number.to_i == 1 %> - <% cache("html-variant-sidebar#{rand(20)}", expires_in: 8.hours) do %> + <% cache("html-variant-sidebar#{rand(50)}", expires_in: 8.hours) do %> <% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array) %> <% if @html_variant %>
diff --git a/app/views/moderations/index.html.erb b/app/views/moderations/index.html.erb index db56aaa65..efe7f51ed 100644 --- a/app/views/moderations/index.html.erb +++ b/app/views/moderations/index.html.erb @@ -86,7 +86,7 @@

Suggest a Tweet

<%= f.hidden_field :article_id, value: article.id %> <%= f.text_area :body_text, maxlength: 220 %> - <%= f.submit %> + <%= f.submit "Share Tweet Suggestion" %> <% end %>

@@ -126,7 +126,6 @@ <% end %> -