From 2d1a501a9289157a63ed44af67abf6d3bce4874a Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Wed, 24 Apr 2019 16:30:46 -0300
Subject: [PATCH] (fix) transaction details raw input styles

---
 .../js/lib/transaction_input_dropdown.js      |   2 +
 .../templates/transaction/overview.html.eex   | 108 +++++++++---------
 2 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js b/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js
index 2c8d21d7a4..dd74870a9e 100644
--- a/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js
+++ b/apps/block_scout_web/assets/js/lib/transaction_input_dropdown.js
@@ -1,6 +1,8 @@
 import $ from 'jquery'
 
 $('.tx-input-dropdown').click(function (e) {
+  e.preventDefault()
+
   var el = $(e.currentTarget)
   var target = $(el.attr('data-target'))
 
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
index 64a0d1ad25..e59d6307b3 100644
--- a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
+++ b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
@@ -102,62 +102,66 @@
                 </dd>
               </dl>
           <% end %>
-
           <%= unless value_transfer?(@transaction) do %>
-          <dl class="row">
-            <dt class="col-sm-3 text-muted"><%= gettext "Raw Input" %></dt>
-            <dd class="col-sm-9">
-              <div class="transaction-input" id="tx-raw-input">
-                <span
-                  aria-label="Copy Value"
-                  class="btn-copy-ico mb-1"
-                  data-clipboard-text="<%= @transaction.input %>"
-                  data-placement="top"
-                  data-toggle="tooltip"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                    <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                  </svg>
-                </span>
-                <div class="tile tile-muted">
-                  <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input %></code></pre>
+            <dl class="row">
+              <dt class="col-sm-3 text-muted"><%= gettext "Raw Input" %></dt>
+              <dd class="col-sm-9">
+                <div class="d-flex mb-1 justify-content-between">
+                  <!-- Dropdown -->
+                  <div class="dropdown">
+                    <button class="btn-dropdown-line dropdown-toggle" type="button" id="tx-input-decoding-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                      <%= gettext("Hex (Default)") %>
+                    </button>
+                    <div class="dropdown-menu" aria-labelledby="transaction-input-decoding-button">
+                      <a href class="dropdown-item tx-input-dropdown" data-target=".tx-raw-input" id="tx-dropdown-raw">
+                        <%= gettext("Hex (Default)") %>
+                      </a>
+                      <a href class="dropdown-item tx-input-dropdown" data-target=".tx-utf8-input" id="tx-dropdown-utf8">
+                        <%= gettext("UTF-8") %>
+                      </a>
+                    </div>
+                  </div>
+                  <!-- Copy -->
+                  <span
+                    aria-label="Copy Value"
+                    class="btn-copy-icon tx-raw-input transaction-input"
+                    id="tx-raw-input"
+                    data-clipboard-text="<%= @transaction.input %>"
+                    data-placement="top"
+                    data-toggle="tooltip"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
+                      <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
+                    </svg>
+                  </span>
+                  <!-- Copy -->
+                  <span
+                    aria-label="Copy Value"
+                    class="btn-copy-icon tx-utf8-input transaction-input"
+                    data-clipboard-text="<%= @transaction.input %>"
+                    data-placement="top"
+                    data-toggle="tooltip"
+                    style="display: none;"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
+                      <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
+                    </svg>
+                  </span>
                 </div>
-              </div>
-
-              <div class="transaction-input" id="tx-utf8-input" style="display: none;">
-                <span
-                  aria-label="Copy Value"
-                  class="btn-copy-ico mb-1"
-                  data-clipboard-text="<%= @transaction.input %>"
-                  data-placement="top"
-                  data-toggle="tooltip"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                    <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                  </svg>
-                </span>
-                <div class="tile tile-muted">
-                  <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input.bytes %></code></pre>
+                <!-- Textarea -->
+                <div class="transaction-input tx-raw-input">
+                  <div class="tile tile-muted">
+                    <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input %></code></pre>
+                  </div>
                 </div>
-              </div>
-
-              <div class="dropdown pt-1">
-                <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="tx-input-decoding-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                  <%= gettext("Hex (Default)") %>
-                </button>
-
-                <div class="dropdown-menu" aria-labelledby="transaction-input-decoding-button">
-                  <a class="dropdown-item tx-input-dropdown" data-target="#tx-raw-input" id="tx-dropdown-raw">
-                    <%= gettext("Hex (Default)") %>
-                  </a>
-
-                  <a class="dropdown-item tx-input-dropdown" data-target="#tx-utf8-input" id="tx-dropdown-utf8">
-                    <%= gettext("UTF-8") %>
-                  </a>
+                <!-- Textfield -->
+                <div class="transaction-input tx-utf8-input" style="display: none;">
+                  <div class="tile tile-muted">
+                    <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0"><code><%= @transaction.input.bytes %></code></pre>
+                  </div>
                 </div>
-              </div>
-            </dd>
-          </dl>
+              </dd>
+            </dl>
           <% end %>
         </div>
       </div>