From 1ae463b7080e33115c2f52221d7f072bdb628291 Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Thu, 8 Nov 2018 11:10:06 -0500
Subject: [PATCH] Adjust look of bottom article actions (#1085)

---
 app/assets/stylesheets/article-show.scss      | 86 +++++++++++--------
 app/assets/stylesheets/more-articles.scss     | 20 +----
 .../_article_content_area.html.erb            | 10 ---
 .../_article_followable_area.html.erb         |  1 -
 app/views/articles/_actions.html.erb          |  2 +-
 app/views/articles/index.html.erb             |  2 +-
 6 files changed, 54 insertions(+), 67 deletions(-)

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 %>
         </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>
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 %>"}'
   >&nbsp;</button>
-<div class="org-summary"><%= follow_cue&.html_safe || followable.summary %></div>
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 @@
     <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>
diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb
index 60fd8298e..f40d208e3 100644
--- a/app/views/articles/index.html.erb
+++ b/app/views/articles/index.html.erb
@@ -398,7 +398,7 @@
 </div>
 
 
-<script async>
+<script defer>
   var isTouchDevice = ('ontouchstart' in window || navigator.maxTouchPoints > 0);
   if (isTouchDevice) {
     function hasClass(el, cls) {