diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss index 35d389f14..8076da5f8 100644 --- a/app/assets/stylesheets/article-show.scss +++ b/app/assets/stylesheets/article-show.scss @@ -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); } } \ No newline at end of file diff --git a/app/assets/stylesheets/more-articles.scss b/app/assets/stylesheets/more-articles.scss index da1da41fd..c0b8396d7 100644 --- a/app/assets/stylesheets/more-articles.scss +++ b/app/assets/stylesheets/more-articles.scss @@ -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; - } - } } } \ No newline at end of file diff --git a/app/views/additional_content_boxes/_article_content_area.html.erb b/app/views/additional_content_boxes/_article_content_area.html.erb index 634803218..c7aebb54f 100644 --- a/app/views/additional_content_boxes/_article_content_area.html.erb +++ b/app/views/additional_content_boxes/_article_content_area.html.erb @@ -18,13 +18,3 @@ <% end %>

- " data-details="<%= organization&.slug %>__<%= article.slug %>">READ POST - diff --git a/app/views/additional_content_boxes/_article_followable_area.html.erb b/app/views/additional_content_boxes/_article_followable_area.html.erb index 2fea6e8f8..c42f88dec 100644 --- a/app/views/additional_content_boxes/_article_followable_area.html.erb +++ b/app/views/additional_content_boxes/_article_followable_area.html.erb @@ -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 %>"}' >  -
<%= follow_cue&.html_safe || followable.summary %>
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb index edd010d41..d11db32e0 100644 --- a/app/views/articles/_actions.html.erb +++ b/app/views/articles/_actions.html.erb @@ -33,7 +33,7 @@