Update _verify_other_explorers.html.eex

apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex

@@ -1,37 +1,97 @@
 <div>
-  <h1 class="card-title mt-5">
-    Verify with other explorers
-  </h1>
-  <div class="verify-other-explorers-table">
+
+  <div class="verify-other-explorers">
+    <h2>Verify with other Explorers:</h2>
     <div class="verify-other-explorers-row">
-      <div class="verify-other-explorers-cell">
-        <span class="blockchair-logo">
-          blockchair.com
-        </span>
-      </div>
-      <div class="verify-other-explorers-cell">
-        <span class='link'>
-          <%= link(
-            address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false),
-            to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true)
-          ) %>
-        </span>
-      </div>
+      <a href="#" class="verify-other-explorers-elem">
+        <div class="exp-logo etherscan"></div>
+        <div class="exp-content">
+          <h3>Etherscan.io</h3>
+          <div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div>
+        </div>
+      </a>
+      <a href="#" class="verify-other-explorers-elem">
+        <div class="exp-logo blockchair"></div>
+        <div class="exp-content">
+          <h3>Blockchair.com</h3>
+          <div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div>
+        </div>
+      </a>
+      <a href="#" class="verify-other-explorers-elem">
+        <div class="exp-logo etherchain"></div>
+        <div class="exp-content">
+          <h3>Etherchain.org</h3>
+          <div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div>
+        </div>
+      </a>
+      <a href="#" class="verify-other-explorers-more" data-toggle="modal" data-target="#explorersModal">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="4">
+            <path fill="#49A2EE" fill-rule="evenodd" d="M16 4a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 4zM9 4A2 2 0 1 1 8.999.001 2 2 0 0 1 9 4zM2 4A2 2 0 1 1 1.999.001 2 2 0 0 1 2 4z"/>
+        </svg>
+      </a>
     </div>
-    <div class="verify-other-explorers-row">
-      <div class="verify-other-explorers-cell left">
-        <span class="etherchain-logo">
-          etherchain.org
-        </span>                  
-      </div>
-      <div class="verify-other-explorers-cell right">
-        <span class='link'>
-          <%= link(
-            address_link_to_other_explorer("https://www.etherchain.org/account/", @address, false),
-            to: address_link_to_other_explorer("https://www.etherchain.org/account/", @address, true)
-          ) %>
-      </span>
+  </div>
+
+  <div class="modal" tabindex="-1" role="dialog" id="explorersModal">
+    <div class="modal-dialog verify-other-explorers-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Verify with other Explorers</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="verify-other-explorers-table">
+            <div class="verify-other-explorers-modal-row">
+              <div class="verify-other-explorers-cell">
+                <span class="etherscan-logo">
+                  Etherscan.io
+                </span>
+              </div>
+              <div class="verify-other-explorers-cell">
+                <span class='link'>
+                  <%= link(
+                    address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false),
+                    to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true)
+                  ) %>
+                </span>
+              </div>
+            </div>
+            <div class="verify-other-explorers-modal-row">
+              <div class="verify-other-explorers-cell">
+                <span class="blockchair-logo">
+                  blockchair.com
+                </span>
+              </div>
+              <div class="verify-other-explorers-cell">
+                <span class='link'>
+                  <%= link(
+                    address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false),
+                    to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true)
+                  ) %>
+                </span>
+              </div>
+            </div>
+            <div class="verify-other-explorers-modal-row">
+              <div class="verify-other-explorers-cell left">
+                <span class="etherchain-logo">
+                  etherchain.org
+                </span>                  
+              </div>
+              <div class="verify-other-explorers-cell right">
+                <span class='link'>
+                  <%= link(
+                    address_link_to_other_explorer("https://www.etherchain.org/account/", @address, false),
+                    to: address_link_to_other_explorer("https://www.etherchain.org/account/", @address, true)
+                  ) %>
+              </span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
+
 </div>