Skip to content

Commit

Permalink
Token page mobile view fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@vbaranov
vbaranov committed Sep 13, 2021
1 parent 65456e0 commit 2063a38
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 64 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 address line height fix 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
Expand Down
7 changes: 1 addition & 6 deletions apps/block_scout_web/assets/css/components/_tile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
15 changes: 2 additions & 13 deletions apps/block_scout_web/lib/block_scout_web/templates/tokens/_tile.html.eex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
92 changes: 47 additions & 45 deletions apps/block_scout_web/lib/block_scout_web/templates/tokens/overview/_details.html.eex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 2063a38

Please sign in to comment.