blockscout · vbaranov · Sep 14, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 - [#4579](https://github.com/blockscout/blockscout/pull/4579) - Write contract page: Resize inputs; Improve multiplier selector
 
 ### Fixes
+- [#4640](https://github.com/blockscout/blockscout/pull/4640) - Token page: fixes in mobile view
 - [#4612](https://github.com/blockscout/blockscout/pull/4612) - Hide error selector in the contract's functions list
 - [#4615](https://github.com/blockscout/blockscout/pull/4615) - Fix broken style for `View more transfers` button
 - [#4592](https://github.com/blockscout/blockscout/pull/4592) - Add `type` field for `receive` and `fallback` entities of a Smart Contract

diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss
@@ -597,11 +597,6 @@ $cube-quantity: 5;
   @include media-breakpoint-down(sm) {
     display: inline-block;
     word-break: break-all;
-  }
-}
-
-.bridged-tokens-buttons-mobile {
-  @include media-breakpoint-down(sm) {
-    margin-top: 0.5em;
+    line-height: 20px;
   }
 }
diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/_tile.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/_tile.html.eex
@@ -7,19 +7,8 @@
   </td>
   <td class="stakes-td">
     <%= if System.get_env("DISPLAY_TOKEN_ICONS") === "true" do %>
-      <% foreign_chain_id = 
-        if @bridged_token do
-          if Map.has_key?(@bridged_token, :foreign_chain_id), do: @bridged_token.foreign_chain_id, else: nil
-        else
-          nil 
-        end %>
-      <% chain_id_for_token_icon = if foreign_chain_id, do: foreign_chain_id |> Decimal.to_integer() |> to_string(), else: System.get_env("CHAIN_ID") %>
-      <% foreign_token_contract_address_hash = 
-        if @bridged_token do
-          if Map.has_key?(@bridged_token, :foreign_token_contract_address_hash), do: Address.checksum(@bridged_token.foreign_token_contract_address_hash), else: nil
-        else
-          nil 
-        end %>
+      <% chain_id_for_token_icon = System.get_env("CHAIN_ID") %>
+      <% foreign_token_contract_address_hash = nil %>
       <% token_hash_for_token_icon = if foreign_token_contract_address_hash, do: foreign_token_contract_address_hash, else: Address.checksum(@token.contract_address_hash) %>
       <% token_icon_url = Explorer.Chain.get_token_icon_url_by(chain_id_for_token_icon, token_hash_for_token_icon) %>
       <%= if token_icon_url do %>

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex
@@ -8,61 +8,63 @@
     <div class="card-section col-md-12 col-lg-8 pr-0-md js-ad-dependant-mb-2">
       <div class="card">
         <div class="card-body" token-page data-async-counters="<%= @counters_path %>">
-          <h1 class="card-title">
-            <%= cond do %>
-              <% Enum.member?(circles_addresses_list, address_hash_str) -> %>
-                <div class="custom-dapp-header-container">
-                  <img class="custom-address-icon"/>
-                </div>
-              <% Enum.member?(circles_addresses_list, created_from_address_hash) -> %>
-                <div class="custom-dapp-header-container">
-                  <img class="custom-address-icon"/>
-                </div>
-              <% true -> %>
-                <%= nil %>
-            <% end %>
-            <% foreign_chain_id = if Map.has_key?(@token, :foreign_chain_id), do: @token.foreign_chain_id, else: nil %>
-            <% tag = Chain.chain_id_display_name(foreign_chain_id) %>
-            <%= if token_name?(@token) do %>
-                <span
-                  id="token-icon"
-                  data-chain-id="<%= System.get_env("CHAIN_ID") %>"
-                  data-address-hash="<%= Address.checksum(@token.contract_address_hash) %>"
-                  data-foreign-chain-id="<%= foreign_chain_id %>"
-                  data-foreign-address-hash="<%= if Map.has_key?(@token, :foreign_token_contract_address_hash), do: Address.checksum(@token.foreign_token_contract_address_hash), else: "" %>"
-                  data-display-token-icons="<%= System.get_env("DISPLAY_TOKEN_ICONS") %>">
-                </span>
-                <div class="title-with-label"><%= @token.name %></div>
-                <%= if tag !== "" do %>
-                  <%= render BlockScoutWeb.FormView, "_tag.html", text: "bridged", additional_classes: ["bridged", "ml-1"] %>
-                  <%= render BlockScoutWeb.FormView, "_tag.html", text: String.upcase(tag), additional_classes: ["destination-#{tag}", "ml-1"] %>
-                <% end %>
-            <% else %>
-              <%= gettext("Token Details") %>
-            <% end %>
+          <h1 class="card-title d-flex" style="justify-content: space-between; margin-bottom: 0.75rem">
+            <div style="line-height: 30px;">
+              <%= cond do %>
+                <% Enum.member?(circles_addresses_list, address_hash_str) -> %>
+                  <div class="custom-dapp-header-container">
+                    <img class="custom-address-icon"/>
+                  </div>
+                <% Enum.member?(circles_addresses_list, created_from_address_hash) -> %>
+                  <div class="custom-dapp-header-container">
+                    <img class="custom-address-icon"/>
+                  </div>
+                <% true -> %>
+                  <%= nil %>
+              <% end %>
+              <% foreign_chain_id = if Map.has_key?(@token, :foreign_chain_id), do: @token.foreign_chain_id, else: nil %>
+              <% tag = Chain.chain_id_display_name(foreign_chain_id) %>
+              <%= if token_name?(@token) do %>
+                  <span
+                    id="token-icon"
+                    data-chain-id="<%= System.get_env("CHAIN_ID") %>"
+                    data-address-hash="<%= Address.checksum(@token.contract_address_hash) %>"
+                    data-foreign-chain-id="<%= foreign_chain_id %>"
+                    data-foreign-address-hash="<%= if Map.has_key?(@token, :foreign_token_contract_address_hash), do: Address.checksum(@token.foreign_token_contract_address_hash), else: "" %>"
+                    data-display-token-icons="<%= System.get_env("DISPLAY_TOKEN_ICONS") %>">
+                  </span>
+                  <div class="title-with-label"><%= @token.name %></div>
+                  <%= if tag !== "" do %>
+                    <%= render BlockScoutWeb.FormView, "_tag.html", text: "bridged", additional_classes: ["bridged", "ml-1"] %>
+                    <%= render BlockScoutWeb.FormView, "_tag.html", text: String.upcase(tag), additional_classes: ["destination-#{tag}", "ml-1"] %>
+                  <% end %>
+              <% else %>
+                <%= gettext("Token Details") %>
+              <% end %>
+            </div>
             <!-- buttons -->
-            <span class="overview-title-buttons token float-right <%= if @token.bridged, do: "bridged-tokens-buttons-mobile", else: "" %>">
+            <span class="overview-title-buttons token float-right">
               <%= render BlockScoutWeb.CommonComponentsView, "_btn_copy.html",
                   additional_classes: ["overview-title-item"],
                   clipboard_text: Address.checksum(@token.contract_address_hash),
                   aria_label: gettext("Copy Address"),
                   title: gettext("Copy Address") %>
               <%= render BlockScoutWeb.CommonComponentsView, "_btn_qr_code.html" %>
             </span>
-            <!-- bridged token -->
-            <%= if @token.bridged do %>
-              <div class="view-original-token-container">
-                <%= if Map.has_key?(@token, :foreign_token_contract_address_hash) do %>
-                  <a data-test="original_token_contract_address" href=<%= foreign_bridged_token_explorer_link(@token) %> target="_blank">View Original Token <span class="external-token-icon"><%= render BlockScoutWeb.IconsView, "_external_link.html" %></span></a>
-                <% end %>
-              </div>
-              <%= if Map.has_key?(@token, :custom_metadata) do %>
-                <div style="margin-top: 15px; font-size: 12px;">
-                  <%= @token.custom_metadata %>
-                </div>
+          </h1>
+          <!-- bridged token -->
+          <%= if @token.bridged do %>
+            <div class="view-original-token-container">
+              <%= if Map.has_key?(@token, :foreign_token_contract_address_hash) do %>
+                <a data-test="original_token_contract_address" href=<%= foreign_bridged_token_explorer_link(@token) %> target="_blank">View Original Token <span class="external-token-icon"><%= render BlockScoutWeb.IconsView, "_external_link.html" %></span></a>
               <% end %>
+            </div>
+            <%= if Map.has_key?(@token, :custom_metadata) do %>
+              <div style="margin-top: 15px; font-size: 12px;">
+                <%= @token.custom_metadata %>
+              </div>
             <% end %>
-          </h1>
+          <% end %>
 
           <h3 class="token-address-mobile"><%= Address.checksum(@token.contract_address_hash) %></h3>
 

diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
@@ -727,8 +727,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address/overview.html.eex:38
 #: lib/block_scout_web/templates/block/overview.html.eex:98
 #: lib/block_scout_web/templates/block/overview.html.eex:99
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:48
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:49
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:50
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:51
 msgid "Copy Address"
 msgstr ""
 
@@ -906,7 +906,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:52
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:83
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:85
 msgid "Decimals"
 msgstr ""
 
@@ -2491,7 +2491,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:10
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:41
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:42
 msgid "Token Details"
 msgstr ""
 
@@ -2591,7 +2591,7 @@ msgid "Total Difficulty"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:95
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:97
 msgid "Total Supply"
 msgstr ""
 
@@ -2898,7 +2898,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:16
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:20
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:77
 msgid "View Contract"
 msgstr ""
 

diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
@@ -727,8 +727,8 @@ msgstr ""
 #: lib/block_scout_web/templates/address/overview.html.eex:38
 #: lib/block_scout_web/templates/block/overview.html.eex:98
 #: lib/block_scout_web/templates/block/overview.html.eex:99
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:48
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:49
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:50
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:51
 msgid "Copy Address"
 msgstr ""
 
@@ -906,7 +906,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:52
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:83
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:85
 msgid "Decimals"
 msgstr ""
 
@@ -2491,7 +2491,7 @@ msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:10
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:41
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:42
 msgid "Token Details"
 msgstr ""
 
@@ -2591,7 +2591,7 @@ msgid "Total Difficulty"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:95
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:97
 msgid "Total Supply"
 msgstr ""
 
@@ -2898,7 +2898,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:16
 #: lib/block_scout_web/templates/tokens/instance/overview/_details.html.eex:20
-#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:75
+#: lib/block_scout_web/templates/tokens/overview/_details.html.eex:77
 msgid "View Contract"
 msgstr ""
 
@@ -3192,7 +3192,7 @@ msgstr ""
 msgid "xDai burned from transactions included in the block (Base fee (per unit of gas) * Gas Used)."
 msgstr ""
 
-#, elixir-format, fuzzy
+#, elixir-format
 #: lib/block_scout_web/templates/address/overview.html.eex:65
 msgid "Implementation:"
 msgstr ""