From cd6d981502382a1620d07f70afc4121952d146a2 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Thu, 7 Mar 2019 14:31:40 -0300 Subject: [PATCH] (add) new navbar icons - new navbar POSDAO items --- .../assets/css/components/_dropdown.scss | 30 ++- .../assets/css/components/_nav_tabs.scss | 10 +- .../assets/css/components/_navbar.scss | 242 +++++++++--------- .../assets/css/theme/_posdao_variables.scss | 32 ++- .../assets/css/theme/_variables.scss | 2 + .../templates/icons/_accounts_icon.html.eex | 5 +- .../templates/icons/_api_icon.html.eex | 6 +- .../templates/icons/_apps_icon.html.eex | 5 + .../templates/icons/_block_icon.html.eex | 6 +- .../templates/icons/_posdao_icon.html.eex | 3 + .../icons/_transaction_icon.html.eex | 5 +- .../templates/layout/_topnav.html.eex | 43 +++- 12 files changed, 245 insertions(+), 144 deletions(-) create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/icons/_apps_icon.html.eex create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/icons/_posdao_icon.html.eex diff --git a/apps/block_scout_web/assets/css/components/_dropdown.scss b/apps/block_scout_web/assets/css/components/_dropdown.scss index d62e7820f2..5b56a393ba 100644 --- a/apps/block_scout_web/assets/css/components/_dropdown.scss +++ b/apps/block_scout_web/assets/css/components/_dropdown.scss @@ -1,17 +1,31 @@ // These styles extend the default Bootstrap styles - .dropdown-menu { - width: 100%; - box-shadow: $box-shadow; + box-shadow: $box-shadow; + padding: 0; + width: 100%; +} + +.dropdown-item { + font-size: 12px; + padding: 10px 20px; + + &:hover { + background-color: $tertiary; + color: $white; + } } .dropdown-search-icon { - top: 0.5rem; - left: 0.625rem; - pointer-events: none; - color: $gray-300; + color: $gray-300; + left: 0.625rem; + pointer-events: none; + top: 0.5rem; } .dropdown-search-field { - padding-left: 2rem; + padding-left: 2rem; } + +.dropdown-toggle::after { + margin-left: 0.71em; +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/components/_nav_tabs.scss b/apps/block_scout_web/assets/css/components/_nav_tabs.scss index 8010f4b214..4559eda4bb 100644 --- a/apps/block_scout_web/assets/css/components/_nav_tabs.scss +++ b/apps/block_scout_web/assets/css/components/_nav_tabs.scss @@ -1,20 +1,20 @@ .nav-tabs { .nav-link { - padding: 1.25rem 2.5rem; - color: $text-muted; - font-size: 14px; border-top-left-radius: 0; border-top-right-radius: 0; + color: $text-muted; + font-size: 14px; + padding: 1.25rem 2.5rem; &:hover { color: $primary; } &.active { - color: $white; background-color: $primary; border-color: $primary; + color: $white; } &:hover { @@ -25,9 +25,9 @@ .nav-tabs .nav-item.show .nav-link { - color: $white; background-color: darken($primary, 10%); border-color: darken($primary, 10%); + color: $white; } .api-doc-tab { diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index 455011273a..09c5ec1a56 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -1,162 +1,166 @@ .navbar { - position: relative; - z-index: 100; + position: relative; + z-index: 100; - &-primary { - background-color: $primary; - } + &-primary { + background-color: $primary; + } } .navbar-collapse.collapsing, .navbar-collapse.collapse.show { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - .search-form { - order: -1; - width: 100%; - align-items: center; + .search-form { + align-items: center; + order: -1; + width: 100%; - form { - flex-grow: 1; + form { + flex-grow: 1; + } + } + .input-group { + width: 100%; + } + .navbar-nav { + white-space: nowrap; } - } - - .input-group { - width: 100%; - } - - .navbar-nav { - white-space: nowrap; - } } .navbar-brand { - margin-left: 0; + margin-left: 0; } .navbar-logo { - height: 1.5em; + height: 1.5em; } @include media-breakpoint-up(md) { - .navbar-expand-lg .navbar-nav .nav-link { - padding-left: 0.75rem; - padding-right: 0.75rem; - } + .navbar-expand-lg .navbar-nav .nav-link { + padding-left: 0.71rem; + padding-right: 0.71rem; + } } -.navbar .nav-item { - font-size: 14px; +.navbar { + .nav-item { + font-size: 14px; + } } -.navbar-dark .navbar-nav .nav-link { - color: $white; +.navbar-dark { + .navbar-nav { + .nav-link { + color: $white; + } + } } -.navbar-nav .nav-link { - display: flex; - align-items: center; +.navbar-nav { + .nav-link { + align-items: center; + display: flex; + font-size: 14px; + } } .nav-link-icon { - display: flex; - align-items: center; - position: relative; - top: -1px; - margin-right: 0.5em; - - path { - fill: $secondary; - } + align-items: center; + display: flex; + margin-right: 0.71em; + position: relative; + top: -1px; + + path { + fill: $secondary; + } } -.navbar .search-form { - display: flex; +.navbar { + .search-form { + display: flex; + } } -.navbar .form-control { - background: transparent; - width: auto; - font-size: 12px; - border-right: none; - color: $white; - border-color: transparentize($white, 0.30); - padding-right: 0px; - - - &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ - color: transparentize($white, 0.5); - } - &::-moz-placeholder { /* Firefox 19+ */ - color: transparentize($white, 0.5); - } - &:-ms-input-placeholder { /* IE 10+ */ - color: transparentize($white, 0.5); - } - &:-moz-placeholder { /* Firefox 18- */ - color: transparentize($white, 0.5); - } - - &:focus { - box-shadow: none; - } - - @include media-breakpoint-up(xl) { - width: calc(41ch + #{$input-padding-x}); - } +.navbar { + .form-control { + background: transparent; + border-color: transparentize($white, 0.30); + border-right: none; + color: $white; + font-size: 12px; + padding-right: 0; + width: auto; + + &::-webkit-input-placeholder { + /* Chrome/Opera/Safari */ + color: transparentize($white, 0.5); + } + &::-moz-placeholder { + /* Firefox 19+ */ + color: transparentize($white, 0.5); + } + &:-ms-input-placeholder { + /* IE 10+ */ + color: transparentize($white, 0.5); + } + &:-moz-placeholder { + /* Firefox 18- */ + color: transparentize($white, 0.5); + } + &:focus { + box-shadow: none; + } + @include media-breakpoint-up(xl) { + width: calc(41ch + #{$input-padding-x}); + } + } } -.navbar .input-group-text { - background: none; - border-left: none; - border-color: transparentize($white, 0.30); +.navbar { + .input-group-text { + background: none; + border-color: transparentize($white, 0.30); + border-left: none; + } } .input-group-append { - margin-left: 0px; + margin-left: 0; - path { - fill: $secondary; - } + path { + fill: $secondary; + } } .topnav-nav-link { - position: relative; - color: $white; - - &:before { - content: ""; - position: absolute; - display: block; - bottom: -10px; - left: 50%; - width: 75%; - height: 0.2rem; - background-color: $secondary; - border-radius: 4px 4px 0 0; - opacity: 0; - transform: translateX(-50%); - transition: all 0.2s ease; - } + color: $white; + position: relative; + + &:before { + background-color: $secondary; + border-radius: 0 0 4px 4px; + top: -10px; + content: ""; + display: block; + height: 0.25rem; + left: 50%; + opacity: 0; + position: absolute; + transform: translateX(-50%); + transition: all 0.2s ease; + width: 75%; + } } @include media-breakpoint-up(lg) { - .topnav-nav-link:hover:before { - opacity: 1; - } -} - -.dropdown-menu { - padding: 0px; -} - -.dropdown-item { - padding: 10px 20px; - font-size: 12px; - - &:hover { - background-color: $tertiary; - color: $white; - } -} + .topnav-nav-link { + &:hover { + &:before { + opacity: 1; + } + } + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss index 8998e95dca..2400e64779 100644 --- a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss @@ -1,3 +1,29 @@ -$primary: #5b389f; -$secondary: #7dd79f; -$tertiary: #997fdc; +$primary : #fff; +$secondary : #15bba6; +$tertiary : #15bba6; + +// Navbar elements +.navbar.navbar-primary { + &.navbar-dark { + .navbar-nav { + .nav-link { + color: #a3a9b5; + &:hover { + color: #333; + } + } + .nav-link-icon { + circle { + fill: $secondary; + } + } + } + } +} + + +.topnav-nav-link { + &:before { + background-color: $secondary; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_variables.scss b/apps/block_scout_web/assets/css/theme/_variables.scss index 22fcfaf6fd..d0c0ffa352 100644 --- a/apps/block_scout_web/assets/css/theme/_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_variables.scss @@ -1,3 +1,5 @@ // @import "neutral_v÷ariables"; @import "posdao_variables"; +// @import "sokol_variables"; +// @import "dai_variables"; @import "theme/base_variables"; diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex index bf21007223..9b30e9ebd9 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex @@ -1,3 +1,4 @@ - - + + + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex index 564d5adce3..5f7da6ff76 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex @@ -1,3 +1,5 @@ - - + + + + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_apps_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_apps_icon.html.eex new file mode 100644 index 0000000000..af60841d8b --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_apps_icon.html.eex @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex index ee8cb3b1c4..fa782fe283 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex @@ -1,3 +1,5 @@ - - + + + + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_posdao_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_posdao_icon.html.eex new file mode 100644 index 0000000000..e00402e338 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_posdao_icon.html.eex @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex index 209589c3e5..179613db66 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex @@ -1,3 +1,4 @@ - - + + + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex index 9b298f214b..e910883255 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex @@ -76,11 +76,52 @@ ) %> +
  • + +
    + <%= link( + gettext("Item 1"), + class: "dropdown-item", + to: "/#" + ) %> + <%= link( + gettext("Item 2"), + class: "dropdown-item", + to: "/#" + ) %> +
    +
    • +
  • + +
    + <%= link( + gettext("Item 1"), + class: "dropdown-item", + to: "/#" + ) %> + <%= link( + gettext("Item 2"), + class: "dropdown-item", + to: "/#" + ) %> +
    +
    • +
    <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
    - <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": gettext("Search"), "data-test": "search_input" %> + <%= search_input f, :q, class: 'form-control mr-auto', placeholder: gettext("Search by address, transaction hash, or block number"), "aria-describedby": "search-icon", "aria-label": gettext("Search by address, transaction, block"), "data-test": "search_input" %>