From 14bba5e4d550efbbc5dc903fa41c006743344967 Mon Sep 17 00:00:00 2001 From: Ben Halpern Date: Tue, 11 Dec 2018 13:08:43 -0500 Subject: [PATCH] Adjust button style/placement on desktop (#1288) * Adjust button style/placement on desktop * Change opacity on side comments * Adjust css for side article actions * Adjust opacity * Adjust opacity * Adjust opacity * Fix test language * Remove opacity deal --- app/assets/images/twitter-logo.svg | 2 +- .../initializeArticleReactions.js | 5 +- app/assets/stylesheets/article-show.scss | 98 +++++++++++++++++-- app/assets/stylesheets/article_form.scss | 33 +++++-- app/views/articles/_actions.html.erb | 6 +- .../registrations/_registration_form.html.erb | 45 ++++++++- spec/requests/editor_spec.rb | 2 +- spec/requests/pages_spec.rb | 2 +- spec/requests/registration_spec.rb | 2 +- 9 files changed, 166 insertions(+), 29 deletions(-) diff --git a/app/assets/images/twitter-logo.svg b/app/assets/images/twitter-logo.svg index 30a520b0f..307f0bff5 100644 --- a/app/assets/images/twitter-logo.svg +++ b/app/assets/images/twitter-logo.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/app/assets/javascripts/initializers/initializeArticleReactions.js b/app/assets/javascripts/initializers/initializeArticleReactions.js index 4adc52217..1ee70df84 100644 --- a/app/assets/javascripts/initializers/initializeArticleReactions.js +++ b/app/assets/javascripts/initializers/initializeArticleReactions.js @@ -9,7 +9,7 @@ function setReactionCount(reactionName, newCount) { } else { reactionClassList.remove("activated"); - reactionNumber.innerHTML = ""; + reactionNumber.innerHTML = "0"; } } @@ -79,6 +79,9 @@ function initializeArticleReactions() { behavior: 'instant', block: 'start', }); + setTimeout(function(){ + e.target.blur(); + },100) }; } }, 3) diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index d382964d8..77592318e 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -672,7 +672,62 @@ header{ margin-left: -1px; margin-right: -1px; width: 880px; - padding: calc(0px + 0.92vh) 0px; + padding: calc(0px + 0.8vh) 0px; + } + @media screen and ( min-width: 1530px ){ + margin-left: -1px; + margin-right: -1px; + width: 156px; + top: 0%; + padding: 5.5% 0px; + bottom: 5%; + left: calc(50% - 756px); + border-radius: 20px; + background: transparent; + border: 0px; + box-shadow: none; + transition: opacity 0.25s; + padding-right: 2px; + .article-share-action-block { + width: 100% !important; + } + button, a { + margin-bottom: 10px !important; + display: block !important; + width: 140px !important; + padding: 6px 0px !important; + margin-left: 0px !important; + margin-right: 0px !important; + border-radius: 100px !important; + border: 0px !important; + transition-delay: 0.1s; + &.user-animated { + animation: wide-reaction-animation 0.25s !important; + } + &:not(.user-activated) { + background: darken($light-gray, 1%) !important; + } + &:focus { + outline:0; + box-shadow: 0px 0px 7px $medium-gray !important; + } + } + a { + margin-top: 5px !important; + font-size: 0.79em !important; + padding: 10px 0px 9px !important; + &.article-actions-comments-count { + padding: 12px 0px !important; + } + } + .dropdown-content{ + left: 150px !important; + bottom: 0px !important; + a { + background: transparent !important; + padding-left: 10px !important; + } + } } button{ background:transparent; @@ -892,25 +947,39 @@ header{ } } .showpage-signin-cta{ - background: lighten($yellow, 16%); - border: 1px solid darken($yellow, 15%); - box-shadow: 5px 6px 0px darken($yellow, 15%); + background: lighten($light-gray, 1%); + border: 1px solid darken($light-medium-gray, 15%); + box-shadow: $bold-shadow; width: 680px; - max-width:88%; + max-width:82%; margin: auto; text-align: center; padding: 40px 5%; - font-size: 1.11em; + font-size: 1.2em; line-height: 1.33em; margin-bottom: 30px; + border-radius: 3px; + position: relative; a{ color: $black; text-decoration: underline; display: inline-block; &.primary-cta-link{ - font-size: 1.35em; + font-size: 1.5em; + background: $bold-blue; + border-radius: 100px; + text-decoration: none; + padding: 18px 0px; + color: white; + width: 300px; } } + .showpage-signin-cta-subtext { + font-family: $monospace; + font-size:0.77em; + color: lighten($medium-gray, 18%); + font-weight: bold; + } } .show-comments-header{ @@ -1051,4 +1120,17 @@ header{ } 100% { } -} \ No newline at end of file +} + +@keyframes wide-reaction-animation { + 0% { + } + 50% { + margin-left: -8px; + margin-right: -5px; + width: calc(100% + 5px); + } + 100% { + } +} + diff --git a/app/assets/stylesheets/article_form.scss b/app/assets/stylesheets/article_form.scss index dd4122b71..7ccadd6de 100644 --- a/app/assets/stylesheets/article_form.scss +++ b/app/assets/stylesheets/article_form.scss @@ -432,8 +432,17 @@ max-width:94%; margin:auto; text-align:center; + .registration-rainbow { + .rainbow-logo { + height: calc(170px + 2vw); + width: calc(170px + 2vw); + transform: rotate(6deg); + border-radius: 18px; + margin-top: 26px; + } + } h1{ - font-size:45px; + font-size:calc(30px + 1vw); font-weight:800; } h2{ @@ -451,8 +460,9 @@ font-size:30px; } p{ - font-size:20px; + font-size:16px; line-height:25px; + font-family: $monospace; } img.gif{ width:500px; @@ -461,18 +471,23 @@ .links{ margin:50px auto; .sign-up-link{ - padding:14px 0px; + padding:22px 0px; margin:2%; - border:3px solid $purple; - background: $purple; + border:3px solid $bold-blue; + background: $bold-blue; font-family: $helvetica-condensed; display:inline-block; text-align:center; - width:250px; + width:290px; border-radius: 100px; - color: $bold-blue; - img{ - vertical-align:-3px; + color: white; + font-size:1.1em; + .icon-img{ + vertical-align:-7px; + fill: white; + height: 30px; + width: 30px; + margin-right: 4px; } } } diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb index 456f412db..3d357e290 100644 --- a/app/views/articles/_actions.html.erb +++ b/app/views/articles/_actions.html.erb @@ -46,7 +46,9 @@ <% unless user_signed_in? %>
- dev.to is where software developers stay in the loop and avoid career stagnation. - Signing up (for free!) is the first step. + dev.to is where software developers read, write, and level up. + Sign Up Now +
+
<% end %> diff --git a/app/views/devise/registrations/_registration_form.html.erb b/app/views/devise/registrations/_registration_form.html.erb index 583c29864..85a0dcbb5 100644 --- a/app/views/devise/registrations/_registration_form.html.erb +++ b/app/views/devise/registrations/_registration_form.html.erb @@ -1,13 +1,48 @@
-

Sign In or Create Your Account

+
+ + + +
+

Great to have you

<%= ApplicationConfig["APP_DOMAIN"] %>/users/auth/twitter/callback" class="sign-up-link" data-no-instant> - <%= icon("twitter") %> Auth with Twitter + <%= inline_svg("twitter-logo.svg", class:"icon-img") %> Sign In with Twitter +

We require social login to prevent abuse.

-

The DEV Community is for amazing humans who code

-
+

Open Source 😇

+

Free Forever ❤️

+
diff --git a/spec/requests/editor_spec.rb b/spec/requests/editor_spec.rb index 9a1619e6e..9965428ae 100644 --- a/spec/requests/editor_spec.rb +++ b/spec/requests/editor_spec.rb @@ -10,7 +10,7 @@ RSpec.describe "Editor", type: :request do it "asks the stray-user to 'Sign In or Create Your Account'" do get "/new" - expect(response.body).to include("Sign In or Create Your Account") + expect(response.body).to include("Great to have you") end end end diff --git a/spec/requests/pages_spec.rb b/spec/requests/pages_spec.rb index 3475cc707..59f2f7ca6 100644 --- a/spec/requests/pages_spec.rb +++ b/spec/requests/pages_spec.rb @@ -106,7 +106,7 @@ RSpec.describe "Pages", type: :request do it "shows a sign in page for logged out users" do get "/live" - expect(response.body).to include("Sign In or Create Your Account") + expect(response.body).to include("Great to have you") end it "shows the video for logged in users" do diff --git a/spec/requests/registration_spec.rb b/spec/requests/registration_spec.rb index 196ffd01b..f194c6462 100644 --- a/spec/requests/registration_spec.rb +++ b/spec/requests/registration_spec.rb @@ -7,7 +7,7 @@ RSpec.describe "Registrations", type: :request do context "when not logged in" do it "shows the sign in page" do get "/enter" - expect(response.body).to include "Sign In or Create Your Account" + expect(response.body).to include "Great to have you" end end