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
This commit is contained in:
Ben Halpern
GitHub
parent
5a4f894e84
commit
14bba5e4d5
9 changed files with 166 additions and 29 deletions
|
|
@ -1 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772 25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17 24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333 0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25 28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822 18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836 104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29 111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253 87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134 0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44 56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87 163.525 595.21 141.42 612 116.257z" fill="#010002"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772 25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17 24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333 0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25 28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822 18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836 104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29 111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253 87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134 0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44 56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87 163.525 595.21 141.42 612 116.257z"/></svg>
|
||||
|
Before Width: | Height: | Size: 858 B After Width: | Height: | Size: 843 B |
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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% {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wide-reaction-animation {
|
||||
0% {
|
||||
}
|
||||
50% {
|
||||
margin-left: -8px;
|
||||
margin-right: -5px;
|
||||
width: calc(100% + 5px);
|
||||
}
|
||||
100% {
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,9 @@
|
|||
</div>
|
||||
<% unless user_signed_in? %>
|
||||
<div class="showpage-signin-cta cta" id="showpage-signin-cta">
|
||||
<a href="/">dev.to</a> is where software developers stay in the loop and avoid career stagnation.
|
||||
<span style="display:block;margin-top:30px;"><a href="/enter" id="primary-cta-link" class="primary-cta-link">Signing up (for free!) is the first step.</a></span>
|
||||
<a href="/">dev.to</a> is where software developers read, write, and level up.
|
||||
<span style="display:block;margin-top:30px;"><a href="/enter" id="primary-cta-link" class="primary-cta-link">Sign Up Now</a></span>
|
||||
<br/>
|
||||
<span class="showpage-signin-cta-subtext">(open source and free forever ❤️)</span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,48 @@
|
|||
<div class="new-article-pitch">
|
||||
<h1>Sign In or Create Your Account</h1>
|
||||
<div class="registration-rainbow">
|
||||
|
||||
<svg viewBox="0 0 235 234" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rainbow-logo"
|
||||
preserveAspectRatio="xMinYMin meet">
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="80K">
|
||||
<polygon id="Shape" fill="#88AEDC" points="234.04 175.67 158.35 233.95 205.53 233.95 234.04 212"></polygon>
|
||||
<polygon id="Shape" points="234.04 140.06 112.11 233.95 112.13 233.95 234.04 140.08"></polygon>
|
||||
<polygon id="Shape" points="133.25 0.95 0.04 103.51 0.04 103.53 133.27 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="0.04 0.95 0.04 31.11 39.21 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#FEE18A" fill-rule="nonzero" points="39.21 0.95 0.04 31.11 0.04 67.01 85.84 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F3F095" fill-rule="nonzero" points="85.84 0.95 0.04 67.01 0.04 103.51 133.25 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#55C1AE" fill-rule="nonzero" points="133.27 0.95 0.04 103.53 0.04 139.12 179.49 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero" points="234.04 0.95 226.67 0.95 0.04 175.45 0.04 211.38 234.04 31.2"></polygon>
|
||||
<polygon id="Shape" fill="#88AEDC" fill-rule="nonzero" points="179.49 0.95 0.04 139.12 0.04 175.45 226.67 0.95"></polygon>
|
||||
<polygon id="Shape" fill="#F58F8E" fill-rule="nonzero" points="234.04 31.2 0.04 211.38 0.04 233.95 18.07 233.95 234.04 67.65"></polygon>
|
||||
<polygon id="Shape" fill="#FEE18A" fill-rule="nonzero" points="234.04 67.65 18.07 233.95 64.7 233.95 234.04 103.56"></polygon>
|
||||
<polygon id="Shape" fill="#F3F095" fill-rule="nonzero" points="234.04 103.56 64.7 233.95 112.11 233.95 234.04 140.06"></polygon>
|
||||
<polygon id="Shape" fill="#55C1AE" fill-rule="nonzero" points="234.04 140.08 112.13 233.95 158.35 233.95 234.04 175.67"></polygon>
|
||||
<polygon id="Shape" fill="#F7B3CE" fill-rule="nonzero" points="234.04 212 205.53 233.95 234.04 233.95"></polygon>
|
||||
<g id="Group" transform="translate(37.000000, 77.000000)" fill="#FFFFFF">
|
||||
<path d="M28.2371517,0.75 C32.7510836,1.7 36.0111455,3.55 39.371517,7.05 C42.4309598,10.25 44.3368421,13.9 45.1393189,18 C45.7913313,21.45 45.7913313,58.55 45.1393189,62.05 C43.4340557,71.15 35.6600619,78.25 26.0303406,79.5 C24.0241486,79.75 17.3034056,80 11.1845201,80 L-7.10542736e-15,80 L-7.10542736e-15,1.42108547e-14 L12.4383901,1.42108547e-14 C21.2656347,1.42108547e-14 25.7795666,0.2 28.2371517,0.75 Z M14.5448916,40 L14.5448916,65.6 L19.7108359,65.4 C24.174613,65.25 25.1275542,65.05 27.1337461,63.9 C31.0458204,61.6 31.0959752,61.45 31.0959752,39.7 C31.0959752,18.5 31.0959752,18.5 27.4346749,16.1 C25.6291022,14.9 24.8767802,14.75 19.9616099,14.55 L14.5448916,14.4 L14.5448916,40 Z"
|
||||
id="Combined-Shape"></path>
|
||||
<path d="M93.7894737,7.25 L93.7894737,14.5 L68.2105263,14.5 L68.2105263,32.5 L83.7585139,32.5 L83.7585139,47 L68.2105263,47 L68.3108359,56.1 L68.4613003,65.25 L81.1504644,65.4 L93.7894737,65.5 L93.7894737,80 L78.993808,80 C62.5430341,80 59.9851393,79.7 57.3770898,77.4 C53.7157895,74.2 53.9164087,76.25 53.7659443,41.1 C53.6656347,19.2 53.8160991,8.85 54.1671827,7.45 C54.8693498,4.85 57.828483,1.65 60.4365325,0.75 C61.9913313,0.2 65.9034056,0.05 78.1411765,4.26325641e-14 L93.7894737,4.26325641e-14 L93.7894737,7.25 Z"
|
||||
id="Path"></path>
|
||||
<path d="M125.437152,28.1 C129.148607,42.35 132.258204,53.7 132.358514,53.35 C132.508978,53 135.668731,40.95 139.430341,26.5 L146.301548,0.25 L154.125697,0.1 C160.043963,7.10542736e-15 162,0.15 162,0.6 C162,1.05 144.64644,66.8 143.643344,70.1 C142.941176,72.4 139.179567,77.1 137.073065,78.35 C134.414861,79.85 130.502786,80.1 128.095356,78.85 C125.9387,77.75 123.079876,74.45 121.625387,71.35 C120.722601,69.45 105.97709,15.35 102.566563,1.35 L102.21548,0 L110.039628,0 C117.713313,0 117.913932,0 118.31517,1.1 C118.515789,1.75 121.725697,13.9 125.437152,28.1 Z"
|
||||
id="Path"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<h1>Great to have you</h1>
|
||||
<div class="links">
|
||||
<a href="/users/auth/twitter?callback_url=<%= ApplicationConfig["APP_PROTOCOL"] %><%= 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
|
||||
</a>
|
||||
<a href="/users/auth/github?state=join-club-page_basic" class="sign-up-link" data-no-instant>
|
||||
<%= icon("github") %> Auth with GitHub
|
||||
<%= inline_svg("github-logo.svg", class:"icon-img") %> Sign In with GitHub
|
||||
</a>
|
||||
<p><em>We require social login to prevent abuse.</em></p>
|
||||
</div>
|
||||
<p>The DEV Community is for amazing humans who code</p>
|
||||
<div style="height:200px"/>
|
||||
<p>Open Source 😇</p>
|
||||
<p>Free Forever ❤️</p>
|
||||
<div style="height:300px"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue