From dbe6f81b4347218bd5b970ceaaabf014b4c481a3 Mon Sep 17 00:00:00 2001
From: ludwiczakpawel <ludwiczakpawel@gmail.com>
Date: Thu, 25 Jun 2020 13:02:38 +0200
Subject: [PATCH] Actions bar fix on Article view (#8903)

* flare tag line height

* .

* dropdown fix + actions bar fix

* actions bar on mob

* revert
---
 app/assets/stylesheets/views/article.scss |  19 ++-
 app/views/articles/_actions.html.erb      | 154 +++++++++++-----------
 app/views/shell/_top.html.erb             |   2 +-
 3 files changed, 92 insertions(+), 83 deletions(-)

diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index fa521cf5f..f914f4f03 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -341,15 +341,9 @@
   right: 0;
   bottom: 0;
   padding: var(--su-2);
-  @supports (padding-bottom: constant(safe-area-inset-bottom)) {
-    padding-bottom: env(safe-area-inset-bottom);
-  }
-  display: flex;
-  align-items: center;
   background: var(--body-bg);
   box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.1);
   z-index: 100;
-  justify-content: space-around;
 
   @media (min-width: $breakpoint-m) {
     padding: 0;
@@ -361,6 +355,19 @@
     justify-content: stretch;
     top: calc(var(--header-height) + var(--layout-padding) + 6vh);
   }
+
+  &__inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    padding-bottom: env(safe-area-inset-bottom);
+
+    @media (min-width: $breakpoint-m) {
+      display: grid;
+      gap: var(--su-6);
+      justify-content: stretch;
+    }
+  }
 }
 
 .crayons-reaction {
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb
index 480255e27..5a7038783 100644
--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@@ -1,82 +1,84 @@
 <div class="crayons-article-actions">
-  <% if @article.published? %>
+  <div class="crayons-article-actions__inner">
+    <% if @article.published? %>
 
-    <%= render partial: "articles/reaction_button",
-               locals: {
-                 category: :like,
-                 description: "Heart",
-                 image_path: "heart.svg",
-                 image_active_path: "heart-filled.svg"
-               } %>
-    <%= render partial: "articles/reaction_button",
-               locals: {
-                 category: :unicorn,
-                 description: "Unicorn",
-                 image_path: "unicorn.svg",
-                 image_active_path: "unicorn-filled.svg"
-               } %>
-    <%= render partial: "articles/reaction_button",
-               locals: {
-                 category: :readinglist,
-                 description: "Reading list",
-                 image_path: "save.svg",
-                 image_active_path: "save-filled.svg"
-               } %>
-  <% end %>
+      <%= render partial: "articles/reaction_button",
+                 locals: {
+                   category: :like,
+                   description: "Heart",
+                   image_path: "heart.svg",
+                   image_active_path: "heart-filled.svg"
+                 } %>
+      <%= render partial: "articles/reaction_button",
+                 locals: {
+                   category: :unicorn,
+                   description: "Unicorn",
+                   image_path: "unicorn.svg",
+                   image_active_path: "unicorn-filled.svg"
+                 } %>
+      <%= render partial: "articles/reaction_button",
+                 locals: {
+                   category: :readinglist,
+                   description: "Reading list",
+                   image_path: "save.svg",
+                   image_active_path: "save-filled.svg"
+                 } %>
+    <% end %>
 
-  <div class="align-center m:relative">
-    <button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
-      <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
-    </button>
-    <div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-auto m:right-auto m:left-100 m:top-0 fs-base">
-      <clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
-        <div class="flex items-center">
-          <input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" class="crayons-textfield" readonly />
-          <%= inline_svg_tag("copy.svg", aria: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: "Notifications") %>
-        </div>
-        <div id="article-copy-link-announcer" role="alert" class="crayons-notice crayons-notice--success my-2 p-1" hidden>Copied to Clipboard</div>
-      </clipboard-copy>
-      <web-share-wrapper shareurl="<%= article_url(@article) %>" sharetext="<%= @article.title %>" template="web-share-button">
-        <a
-          target="_blank"
-          class="dropdown-link-row crayons-link crayons-link--block"
-          rel="noopener"
-          href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> <%= u SiteConfig.twitter_hashtag %> <%= article_url(@article) %>'>
-          Share to Twitter
-        </a>
-        <a
-          target="_blank"
-          class="dropdown-link-row crayons-link crayons-link--block"
-          rel="noopener"
-          href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
-          Share to LinkedIn
-        </a>
-        <a
-          target="_blank"
-          class="dropdown-link-row crayons-link crayons-link--block"
-          rel="noopener"
-          href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
-          Share to Reddit
-        </a>
-        <a
-          target="_blank"
-          class="dropdown-link-row crayons-link crayons-link--block"
-          rel="noopener"
-          href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
-          Share to Hacker News
-        </a>
-        <a
-          target="_blank"
-          class="dropdown-link-row crayons-link crayons-link--block"
-          rel="noopener"
-          href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
-          Share to Facebook
-        </a>
-      </web-share-wrapper>
-      <template id="web-share-button">
-        <a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post</a>
-      </template>
-      <a href="/report-abuse" class="dropdown-link-row crayons-link crayons-link--block">Report Abuse</a>
+    <div class="align-center m:relative">
+      <button id="article-show-more-button" class="dropbtn crayons-btn crayons-btn--ghost crayons-btn--icon-rounded" aria-label="Toggle dropdown menu">
+        <%= inline_svg_tag("overflow-horizontal.svg", aria: true, class: "dropdown-icon crayons-icon", title: "More...") %>
+      </button>
+      <div class="crayons-dropdown p-1 z-30 right-1 left-1 s:left-auto bottom-100 m:bottom-0 m:right-auto m:left-100 fs-base">
+        <clipboard-copy for="article-copy-link-input" aria-live="polite" aria-controls="article-copy-link-announcer" class="dropdown-link-row">
+          <div class="flex items-center">
+            <input type="text" id="article-copy-link-input" value="<%= article_url(@article) %>" class="crayons-textfield" readonly />
+            <%= inline_svg_tag("copy.svg", aria: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: "Notifications") %>
+          </div>
+          <div id="article-copy-link-announcer" role="alert" class="crayons-notice crayons-notice--success my-2 p-1" hidden>Copied to Clipboard</div>
+        </clipboard-copy>
+        <web-share-wrapper shareurl="<%= article_url(@article) %>" sharetext="<%= @article.title %>" template="web-share-button">
+          <a
+            target="_blank"
+            class="dropdown-link-row crayons-link crayons-link--block"
+            rel="noopener"
+            href='https://twitter.com/intent/tweet?text="<%= u @article.title.strip %>" by <%= @article.user.twitter_username ? "@" + @article.user.twitter_username : @article.user.name %> <%= u SiteConfig.twitter_hashtag %> <%= article_url(@article) %>'>
+            Share to Twitter
+          </a>
+          <a
+            target="_blank"
+            class="dropdown-link-row crayons-link crayons-link--block"
+            rel="noopener"
+            href="https://www.linkedin.com/shareArticle?mini=true&url=<%= article_url(@article) %>&title=<%= @article.title %>&summary=<%= @article.description %>&source=<%= community_name %>">
+            Share to LinkedIn
+          </a>
+          <a
+            target="_blank"
+            class="dropdown-link-row crayons-link crayons-link--block"
+            rel="noopener"
+            href="https://www.reddit.com/submit?url=<%= article_url(@article) %>&title=<%= @article.title %>">
+            Share to Reddit
+          </a>
+          <a
+            target="_blank"
+            class="dropdown-link-row crayons-link crayons-link--block"
+            rel="noopener"
+            href="https://news.ycombinator.com/submitlink?u=<%= article_url(@article) %>&t=<%= @article.title %>">
+            Share to Hacker News
+          </a>
+          <a
+            target="_blank"
+            class="dropdown-link-row crayons-link crayons-link--block"
+            rel="noopener"
+            href="https://www.facebook.com/sharer.php?u=<%= article_url(@article) %>">
+            Share to Facebook
+          </a>
+        </web-share-wrapper>
+        <template id="web-share-button">
+          <a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post</a>
+        </template>
+        <a href="/report-abuse" class="dropdown-link-row crayons-link crayons-link--block">Report Abuse</a>
+      </div>
     </div>
   </div>
 </div>
diff --git a/app/views/shell/_top.html.erb b/app/views/shell/_top.html.erb
index c43bf047a..ce1342cba 100644
--- a/app/views/shell/_top.html.erb
+++ b/app/views/shell/_top.html.erb
@@ -31,7 +31,7 @@
         <%= javascript_packs_with_chunks_tag "Search", "onboardingRedirectCheck", "contentDisplayPolicy", defer: true %>
       <% end %>
       <%= yield(:page_meta) %>
-      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
       <%= favicon_link_tag SiteConfig.favicon_url %>
       <link rel="apple-touch-icon" href="<%= cloudinary(SiteConfig.logo_png, 180, "png") %>">
       <link rel="apple-touch-icon" sizes="152x152" href="<%= cloudinary(SiteConfig.logo_png, 152, "png") %>">