maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adjust look of bottom article actions (#1085)

Browse source
This commit is contained in:
Ben Halpern 2018-11-08 11:10:06 -05:00 • committed by GitHub
parent 119b86c655
commit 1ae463b708
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 54 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
app/assets/stylesheets/article-show.scss
View file

@ -654,18 +654,20 @@ header{
border: 1px solid darken($light-medium-gray, 2%);
box-shadow: $bold-shadow;
width: 100%;
background: $tan;
@media screen and ( min-width: 880px ){
margin-left: -1px;
margin-right: -1px;
width: 880px;
padding:6px 0px;
padding: calc(0px + 0.92vh) 0px;
}
button{
background:transparent;
margin: 0px 0.22vw;
padding: 3px calc(0.88vw + 3px);
margin: 0px calc(0.22vw + 2px);
padding: 3px calc(0.88vw + 8px);
border-radius:100px;
border:2px solid darken($light-gray, 7%);
border:2px solid darken($light-gray, 20%);
// background: linear-gradient(60deg, #f4d2d2, #ffffff);
font-family: $helvetica-condensed;
font-stretch:condensed;
img{
@ -701,7 +703,7 @@ header{
}
}
&.user-activated {
border:2px solid darken($bold-blue, 40%);
border:2px solid darken($bold-blue, 35%);
background: linear-gradient(60deg, #f4d2d2, #efb6b6);
img{
filter: none;
@ -726,11 +728,10 @@ header{
position:relative;
width: 40px;
button{
border: 2px solid white;
border: 2px solid transparent;
min-width: 38px;
opacity:0.7;
&:hover{
border: 2px solid $light-gray;
opacity:1;
}
.dropdown-icon{
@ -739,40 +740,48 @@ header{
}
.dropdown-content{
display:none;
position:absolute;
bottom: 45px;
right: 2px;
position:fixed;
bottom: 60px;
right: 0px;
left: 0px;
z-index: 100;
background: white;
font-size: 0.85em;
border: 1px solid $light-medium-gray;
border-radius: 3px;
background: $tan;
font-size: 1em;
text-align:left;
min-width: 270px;
box-shadow: $shadow;
min-width: 300px;
border-top: 2px solid $light-medium-gray;
padding-bottom: 15px;
padding-top: 15px;
@media screen and ( min-width: 500px ){
position: absolute;
right: -20px;
border-radius: 3px;
font-size: 0.92em;
border: 1px solid $light-medium-gray;
box-shadow: $shadow;
left: auto;
bottom: 48px;
padding-bottom: 6px;
padding-top: 6px;
}
&.showing{
display: block;
}
.dropdown-link-row{
img{
width: 15px;
margin-right: 10px;
margin-left: 10px;
vertical-align: -2px;
}
input{
border: 1px dashed black;
padding: 4px 6px;
font-size: 14px;
width: calc(100% - 58px);
font-size: 1em;
width: calc(100% - 50px);
border-radius: 3px;
margin: 10px auto 5px;
margin-left: 15px;
}
a{
font-weight: bold;
color: $black;
padding: 10px;
width: calc(100% - 20px);
padding: 12px 18px;
width: calc(100% - 36px);
display:block;
&:hover{
background: $light-gray;
@ -788,7 +797,7 @@ header{
font-weight: bold;
font-size: calc(0.8em + 0.1vw);
vertical-align: calc(7px - 0.07vw);
border:2px solid darken($light-gray, 7%);
border:2px solid darken($light-gray, 20%);
font-family: $helvetica-condensed;
font-stretch: condensed;
padding: 4px 0.88vw;
@ -808,7 +817,7 @@ header{
.article-actions-tweet-button{
padding: 7px 0 6px;
border-radius:3px;
border:2px solid darken($light-gray, 7%);
border:2px solid darken($light-gray, 20%);
margin-right: 0.15vw;
margin-left: calc(0.2vw + 11px);
vertical-align: calc(3px - 0.07vw);
@ -820,10 +829,8 @@ header{
width:23px;
vertical-align:-4px;
}
@media screen and ( min-width: 370px ){
display: inline-block;
}
@media screen and ( min-width: 500px ){
display: inline-block;
padding: 2px 0 2px;
vertical-align: calc(6px - 0.07vw);
}
@ -839,8 +846,15 @@ header{
.dev-ios-native-body {
.container{
.article-actions{
padding:6px 0px;
padding:8px 0px 0px;
border-bottom: 1px solid $tan;
border-top: 1px solid rgba(0, 0, 0, 0.33);
transition: padding 0.33s;
.article-share-action-block{
.dropdown-content{
bottom: 43px;
}
}
}
}
}
@ -1012,20 +1026,16 @@ header{
@keyframes reaction {
0% {
padding-left: calc(0.88vw + 3px);
padding-right: calc(0.88vw + 3px);
}
50% {
padding-top: 6px;
padding-bottom: 4px;
padding-left: calc(1.1vw + 3px);
padding-right: calc(1.1vw + 3px);
padding-left: calc(1.1vw + 10px);
padding-right: calc(1.1vw + 10px);
margin: 0px 0vw;
margin-top: -4px;
margin-bottom: -1px;
}
100% {
padding-left: calc(0.88vw + 3px);
padding-right: calc(0.88vw + 3px);
}
}

20
app/assets/stylesheets/more-articles.scss
View file

@ -104,12 +104,9 @@
margin: 15px 20px 0px;
}
.content-classification-text{
background: lighten($yellow, 16%);
border: 1px solid darken($yellow, 15%);
box-shadow: 3px 4px 0px darken($yellow, 15%);
background: $light-gray;
display: inline-block;
padding: 3px 25px;
font-family: $helvetica-condensed;
color: $dark-gray;
}
}
@ -216,7 +213,7 @@
float: left;
width: 280px;
text-align:center;
padding:20px 0px;
padding:10px 0px 30px;
.profile-pic-wrapper{
width: 110px;
height: 110px;
@ -249,20 +246,11 @@
background: $green;
color: $black;
border: 0;
font-size: 1em;
font-size: 1.05em;
border: 0;
padding: 3px 6px;
padding: 8px 6px;
border-radius: 3px;
width:170px;
}
.org-summary{
font-size:0.88em;
width: 200px;
margin: 20px auto;
text-align:left;
a{
color: $bold-blue;
}
}
}
}

10
app/views/additional_content_boxes/_article_content_area.html.erb
View file

@ -18,13 +18,3 @@
<% end %>
</div>
</p>
<a href="<%= article.path + article.decorate.internal_utm_params%>" class="cta<%= ' partner-link' if classification == "boosted" %>" data-details="<%= organization&.slug %>__<%= article.slug %>">READ POST</a>
<button
class="article-engagement-count bookmark-engage<%= ' partner-link' if classification == "boosted" %>"
data-reactable-id="<%= article.id %>"
aria-label="Save to reading list"
data-details="<%= organization&.slug %>__<%= article.slug %>__SAVE"
title="Save to reading list">
<span class="bm-success" data-details="<%= organization&.slug %>__<%= article.slug %>__SAVE"><img src="<%= asset_path("readinglist-button.png") %>" alt="bookmark" /> SAVED</span>
<span class="bm-initial" data-details="<%= organization&.slug %>__<%= article.slug %>__SAVE">SAVE FOR LATER</span>
</button>

1
app/views/additional_content_boxes/_article_followable_area.html.erb
View file

@ -31,4 +31,3 @@
style="color:<%= user_colors(followable)[:text] %>;background-color:<%=user_colors(followable)[:bg] %>"
data-info='{"id":<%= followable.id %>,"className":"<%= followable.class.name %>"}'
>&nbsp;</button>
<div class="org-summary"><%= follow_cue&.html_safe || followable.summary %></div>

2
app/views/articles/_actions.html.erb
View file

@ -33,7 +33,7 @@
<div class="dropdown-content">
<div>
<div class="dropdown-link-row">
<img src="<%= asset_path("link.svg") %>" /><input value="https://dev.to<%= @article.path %>" onClick="this.setSelectionRange(0, this.value.length)" readonly/>
<input value="https://dev.to<%= @article.path %>" onClick="this.setSelectionRange(0, this.value.length)" readonly/>
</div>
<div class="dropdown-link-row"><a target='_blank' href='https://twitter.com/intent/tweet?text="<%= @article.title %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> %23DEVcommunity https://dev.to<%= @article.path %>'>Share to Twitter</a></div>
<div class="dropdown-link-row"><a target='_blank' href='https://www.linkedin.com/shareArticle?mini=true&url=https://dev.to<%=@article.path%>&title=<%=@article.title%>&summary=<%=@article.description%>&source=dev.to'>Share to LinkedIn</a></div>

2
app/views/articles/index.html.erb
View file

@ -398,7 +398,7 @@
</div>
<script async>
<script defer>
var isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
if (isTouchDevice) {
function hasClass(el, cls) {