diff --git a/apps/block_scout_web/assets/css/components/_network-selector.scss b/apps/block_scout_web/assets/css/components/_network-selector.scss index cfa79942d2..e4305befb9 100644 --- a/apps/block_scout_web/assets/css/components/_network-selector.scss +++ b/apps/block_scout_web/assets/css/components/_network-selector.scss @@ -7,10 +7,14 @@ $network-selector-search-input-color: #a3a9b5 !default; $network-selector-tab-active-border-color: $primary !default; $network-selector-item-icon-dimensions: 30px !default; +.network-selector-visible { + position: fixed; +} + .network-selector-overlay { background-color: rgba($network-selector-overlay-background, 0.9); bottom: 0; - display: flex; + display: none; left: 0; position: fixed; right: 0; @@ -18,6 +22,12 @@ $network-selector-item-icon-dimensions: 30px !default; z-index: 123; } +.network-selector-wrapper { + display: flex; + height: 100%; + width: 100%; +} + .network-selector { background-color: #fff; display: flex; @@ -26,7 +36,10 @@ $network-selector-item-icon-dimensions: 30px !default; flex-shrink: 1; margin-left: auto; max-width: 398px; + min-width: 0; padding: 28px 0 35px; + position: relative; + transition: right 0.25s ease-out; } .network-selector-close { @@ -123,12 +136,16 @@ $network-selector-item-icon-dimensions: 30px !default; .network-selector-tab { color: #a3a9b5; cursor: pointer; + flex-shrink: 1; font-size: 14px; font-weight: 600; line-height: 1.2; - padding: 20px 20px 15px; + min-width: 0; + padding: 20px 18px 15px; position: relative; text-align: center; + user-select: none; + white-space: nowrap; &:hover { color: #333; @@ -136,6 +153,7 @@ $network-selector-item-icon-dimensions: 30px !default; &.active { color: #333; + cursor: default; &::after { background-color: $network-selector-tab-active-border-color; @@ -165,7 +183,12 @@ $network-selector-item-icon-dimensions: 30px !default; position: relative; .radio { + cursor: pointer; margin: 0 15px 0 0; + + input[type="radio"] { + cursor: pointer; + } } .radio-icon { @@ -183,7 +206,13 @@ $network-selector-item-icon-dimensions: 30px !default; display: flex; flex-grow: 1; margin: 0; - padding: 20px 20px 20px 0; + padding: 20px 0; + + &:hover { + .network-selector-item-type { + color: #333; + } + } } .network-selector-item-icon { @@ -208,6 +237,7 @@ $network-selector-item-icon-dimensions: 30px !default; overflow: hidden; text-align: left; text-overflow: ellipsis; + user-select: none; white-space: nowrap; } @@ -219,6 +249,7 @@ $network-selector-item-icon-dimensions: 30px !default; line-height: 1.2; padding-left: 10px; text-align: right; + user-select: none; white-space: nowrap; } @@ -254,7 +285,8 @@ $network-selector-item-icon-dimensions: 30px !default; flex-grow: 1; flex-shrink: 0; margin: 0; - max-width: 16px; + max-width: 36px; + padding-left: 20px; position: relative; input[type="checkbox"] { @@ -280,4 +312,11 @@ $network-selector-item-icon-dimensions: 30px !default; fill: rgba(#ffb20d, 0.4); } } +} + +.network-selector-tab-content-empty { + font-size: 16px; + font-weight: 600; + padding: 40px; + text-align: center; } \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js index f10e3d696d..f37659ccba 100644 --- a/apps/block_scout_web/assets/js/app.js +++ b/apps/block_scout_web/assets/js/app.js @@ -54,3 +54,4 @@ import './lib/tooltip' import './lib/modals' import './lib/try_api' import './lib/card_tabs' +import './lib/network_selector' diff --git a/apps/block_scout_web/assets/js/lib/network_selector.js b/apps/block_scout_web/assets/js/lib/network_selector.js new file mode 100644 index 0000000000..f7765329a0 --- /dev/null +++ b/apps/block_scout_web/assets/js/lib/network_selector.js @@ -0,0 +1,71 @@ +import $ from 'jquery' + +$(function () { + const mainBody = $('body') + const showNetworkSelector = $('.js-show-network-selector') + const hideNetworkSelector = $('.js-network-selector-close') + const networkSelector = $('.js-network-selector') + const networkSelectorOverlay = $('.js-network-selector-overlay') + const networkSelectorTab = $('.js-network-selector-tab') + const networkSelectorTabContent = $('.js-network-selector-tab-content') + const networkSelectorItemURL = $('.js-network-selector-item-url') + const FADE_IN_DELAY = 250 + + showNetworkSelector.on('click', (e) => { + e.preventDefault() + openNetworkSelector() + }) + + hideNetworkSelector.on('click', (e) => { + e.preventDefault() + closeNetworkSelector() + }) + + networkSelectorTab.on('click', function (e) { + e.preventDefault() + setNetworkTab($(this)) + }) + + networkSelectorItemURL.on('click', function (e) { + window.location = $(this).attr('network-selector-item-url') + }) + + let setNetworkTab = (currentTab) => { + if (currentTab.hasClass('active')) return + + networkSelectorTab.removeClass('active') + currentTab.addClass('active') + networkSelectorTabContent.removeClass('active') + $(`[network-selector-tab="${currentTab.attr('network-selector-tab-filter')}"]`).addClass('active') + } + + let openNetworkSelector = () => { + mainBody.addClass('network-selector-visible') + networkSelectorOverlay.fadeIn(FADE_IN_DELAY) + setNetworkSelectorVisiblePosition() + } + + let closeNetworkSelector = () => { + mainBody.removeClass('network-selector-visible') + networkSelectorOverlay.fadeOut(FADE_IN_DELAY) + setNetworkSelectorHiddenPosition() + } + + let getNetworkSelectorWidth = () => { + return parseInt(networkSelector.css('width')) || parseInt(networkSelector.css('max-width')) + } + + let setNetworkSelectorHiddenPosition = () => { + return networkSelector.css({ 'right': `-${getNetworkSelectorWidth()}px` }) + } + + let setNetworkSelectorVisiblePosition = () => { + return networkSelector.css({ 'right': '0' }) + } + + let init = () => { + setNetworkSelectorHiddenPosition() + } + + init() +}) diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex index 042fc2135e..eadf1b4503 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector.html.eex @@ -1,51 +1,55 @@ -
-
-
- - - -
-
-

<%= gettext("Change Network") %>

-

<%= gettext("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.") %>

-
-
- - - - -
-
-
<%= gettext("All") %>
-
<%= gettext("Mainnet") %>
-
<%= gettext("Testnet") %>
-
<%= gettext("Favorites") %>
-
-
-
- <%= for %{url: url, title: title} <- other_networks() do %> - <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %> - <% end %> +
+
+
+
+ + +
- <% main_nets = main_nets(other_networks()) %> -
- <%= for %{url: url, title: title} <- main_nets do %> - <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: assigns[:tab_type] %> - <% end %> +
+

<%= gettext("Change Network") %>

+

<%= gettext("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.") %>

- <% test_nets = test_nets(other_networks()) %> -
- <%= for %{url: url, title: title} <- test_nets do %> - <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: assigns[:tab_type] %> - <% end %> +
+ + + + +
+
+
<%= gettext("All") %>
+
<%= gettext("Mainnet") %>
+
<%= gettext("Testnet") %>
+
<%= gettext("Favorites") %>
-
- No content. +
+ <% main_nets = main_nets(other_networks()) %> + <% test_nets = test_nets(other_networks()) %> +
+ <%= for %{url: url, title: title} <- main_nets do %> + <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %> + <% end %> + <%= for %{url: url, title: title} <- test_nets do %> + <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %> + <% end %> +
+
+ <%= for %{url: url, title: title} <- main_nets do %> + <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Mainnet" %> + <% end %> +
+
+ <%= for %{url: url, title: title} <- test_nets do %> + <%= render BlockScoutWeb.LayoutView, "_network_selector_item.html", title: title, url: url, tab_type: "Testnet" %> + <% end %> +
+
+
No content.
+
+
+
+
- -
-
-
\ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex index 2636542e4e..a798178455 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_network_selector_item.html.eex @@ -1,5 +1,5 @@
-
  • - <%= render BlockScoutWeb.IconsView, "_active_icon.html" %> <%= subnetwork_title() %> -
    - Mainnets - <%= for %{url: url, title: title} <- dropdown_head_main_nets() do %> - <%= title %> - <% end %> - Testnets - <%= for %{url: url, title: title} <- test_nets(dropdown_nets()) do %> - <%= title %> - <% end %> - Other networks - <%= for %{url: url, title: title} <- dropdown_other_nets() do %> - <%= title %> - <% end %> -