Merge pull request #4540 from blockscout/np-allign-copy-btns

Allign copy button

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#4540](https://github.com/blockscout/blockscout/pull/4540) - Allign copy buttons for `Block Details` and `Transaction Details` pages
 - [#4528](https://github.com/blockscout/blockscout/pull/4528) - Block Details page: rework view
 - [#4531](https://github.com/blockscout/blockscout/pull/4531) - Add Arbitrum support
 - [#4524](https://github.com/blockscout/blockscout/pull/4524) - Add index position of transaction in the block

apps/block_scout_web/assets/css/_mixins.scss

@@ -213,6 +213,37 @@
   }
 }
 
+@mixin square-icon-button-inline($color, $dimensions) {
+  align-items: center;
+  border: 1px solid $color;
+  border-radius: 2px;
+  cursor: pointer;
+  display: inline;
+  height: $dimensions;
+  justify-content: center;
+  transition: $transition-cont;
+  width: $dimensions;
+
+  svg {
+    display: block;
+    height: 100%;
+    width: 100%;
+  }
+
+  path {
+    fill: $color;
+    transition: $transition-cont;
+  }
+
+  &:hover {
+    background-color: $color;
+
+    path {
+      fill: #fff;
+    }
+  }
+}
+
 @mixin image-2x($image, $width: 100%, $height: 100%) {
   @media (min--moz-device-pixel-ratio: 1.3),
          (-o-min-device-pixel-ratio: 2.6/2),

apps/block_scout_web/assets/css/components/_btn_copy.scss

@@ -3,7 +3,7 @@ $btn-copy-dimensions: 31px !default;
 $btn-copy-small-dimensions: 22px !default;
 
 .btn-copy-icon {
-  @include square-icon-button($btn-copy-color, $btn-copy-dimensions);
+  @include square-icon-button-inline($btn-copy-color, $btn-copy-dimensions);
   &.btn-copy-icon-no-borders {
     &:hover {
       background-color: transparent;
@@ -20,9 +20,8 @@ $btn-copy-small-dimensions: 22px !default;
   &.btn-copy-icon-small {
     &.btn-copy-icon-custom {
       position: absolute;
-      top: -1.2px;
     }
-    @include square-icon-button($btn-copy-color, $btn-copy-small-dimensions);
+    @include square-icon-button-inline($btn-copy-color, $btn-copy-small-dimensions);
     &.btn-copy-icon-no-borders {
       &:hover {
         background-color: transparent;

apps/block_scout_web/lib/block_scout_web/templates/block/overview.html.eex

@@ -86,14 +86,12 @@
               text: gettext("A block producer who successfully included the block onto the blockchain.") %>
               <%= gettext("Miner") %>
             </dt>
-            <dd class="col-sm-9 col-lg-10 btn-copy-mobile-container"><%= render BlockScoutWeb.AddressView, "_link.html", address: @block.miner, contract: false, class: "", use_custom_tooltip: false, show_full_hash: true %>
-              <span class="float-right">
-                <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
-                  additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
-                  clipboard_text: @block.miner,
-                  aria_label: gettext("Copy Address"),
-                  title: gettext("Copy Address") %>
-              </span>
+            <dd class="col-sm-9 col-lg-10"><%= render BlockScoutWeb.AddressView, "_link.html", address: @block.miner, contract: false, class: "", use_custom_tooltip: false, show_full_hash: true %>
+              <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
+                additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
+                clipboard_text: @block.miner,
+                aria_label: gettext("Copy Address"),
+                title: gettext("Copy Address") %>
               </dd>
           </dl>
           <!-- Size -->
@@ -112,13 +110,13 @@
               text: gettext("The SHA256 hash of the block.") %>
               <%= gettext("Hash") %>
             </dt>
-            <dd class="col-sm-9 col-lg-10 btn-copy-mobile-container"><%= to_string(@block.hash) %><span class="float-right">
+            <dd class="col-sm-9 col-lg-10"><%= to_string(@block.hash) %>
                 <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
                   additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
                   clipboard_text: to_string(@block.hash),
                   aria_label: gettext("Copy Hash"),
                   title: gettext("Copy Hash") %>
-              </span></dd>
+            </dd>
           </dl>
           <%= unless @block.number == 0 do %>
             <!-- Parent Hash -->
@@ -128,17 +126,17 @@
                 text: gettext("The hash of the block from which this block was generated.") %>
                 <%= gettext("Parent Hash") %>
               </dt>
-              <dd class="col-sm-9 col-lg-10 btn-copy-mobile-container"><%= link(
-                                                                                  @block.parent_hash,
-                                                                                  class: "transaction__link",
-                                                                                  to: block_path(@conn, :show, @block.number - 1)
-                                                                                ) %><span class="float-right">
+              <dd class="col-sm-9 col-lg-10"><%= link(
+                                                        @block.parent_hash,
+                                                        class: "transaction__link",
+                                                        to: block_path(@conn, :show, @block.number - 1)
+                                                      ) %>
                   <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
                     additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
                     clipboard_text: to_string(@block.parent_hash),
                     aria_label: gettext("Copy Parent Hash"),
                     title: gettext("Copy Parent Hash") %>
-                </span></dd>
+              </dd>
             </dl>
           <% end %>
           <!-- Difficulty -->

apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex

@@ -47,15 +47,13 @@
               text: gettext("Unique character string (TxID) assigned to every verified transaction.") %>
               <%= gettext "Transaction Hash" %>
             </dt>
-            <dd class="col-sm-9 col-lg-10 d-flex" style="word-break: break-all;">
+            <dd class="col-sm-9 col-lg-10" style="word-break: break-all;">
               <span class="transaction-details-address" data-test="transaction_detail_hash"><%= @transaction %> </span>
-              <span>
               <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
                   additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
                   clipboard_text: @transaction,
                   aria_label: gettext("Copy Transaction Hash"),
                   title: gettext("Copy Txn Hash") %>
-              </span>
             </dd>
           </dl>
           <!-- Verify in other explorers -->
@@ -156,18 +154,16 @@
               <%= render BlockScoutWeb.CommonComponentsView, "_i_tooltip_2.html",
                 text: gettext("Address (external or contract) sending the transaction.") %>
               <%= gettext "From" %></dt>
-            <dd class="col-sm-9 col-lg-10 btn-copy-mobile-container">
+            <dd class="col-sm-9 col-lg-10">
               <%= link(
                 from_address_hash,
                 to: address_path(@conn, :show, from_address_hash)
               ) %>
-              <span class="float-right">
-                <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
-                  additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
-                  clipboard_text: from_address_hash,
-                  aria_label: gettext("Copy From Address"),
-                  title: gettext("Copy From Address") %>
-              </span>
+              <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
+                additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
+                clipboard_text: from_address_hash,
+                aria_label: gettext("Copy From Address"),
+                title: gettext("Copy From Address") %>
             </dd>
           </dl>
           <!-- To -->
@@ -183,7 +179,7 @@
                 <%= gettext "To" %>
               <% end %>
             </dt>
-            <dd class="col-sm-9 col-lg-10 btn-copy-mobile-container">
+            <dd class="col-sm-9 col-lg-10">
               <%= cond do %>
                 <% created_address_hash -> %>
                   [<%= gettext("Contract") %>&nbsp;
@@ -192,27 +188,21 @@
                     to: address_path(@conn, :show, recipient_address_hash)
                   ) %> 
                   &nbsp;<%= gettext("created") %>]
-
-                  <span class="float-right">
-                    <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
-                      additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
-                      clipboard_text: recipient_address_hash,
-                      aria_label: gettext("Copy To Address"),
-                      title: gettext("Copy To Address") %>
-                  </span>
+                  <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
+                    additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
+                    clipboard_text: recipient_address_hash,
+                    aria_label: gettext("Copy To Address"),
+                    title: gettext("Copy To Address") %>
                 <% recipient_address_hash -> %>
                   <%= link(
                     recipient_address_hash,
                     to: address_path(@conn, :show, recipient_address_hash)
                   ) %>
-
-                  <span class="float-right">
-                    <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
-                      additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
-                      clipboard_text: recipient_address_hash,
-                      aria_label: gettext("Copy To Address"),
-                      title: gettext("Copy To Address") %>
-                  </span>
+                  <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
+                    additional_classes: ["btn-copy-icon-small", "btn-copy-icon-custom", "btn-copy-icon-no-borders"],
+                    clipboard_text: recipient_address_hash,
+                    aria_label: gettext("Copy To Address"),
+                    title: gettext("Copy To Address") %>
                 <% true -> %>
               <% end %>
             </dd>