From 4f676cdf4a2fc932232838b7d3cf703f737cf4a2 Mon Sep 17 00:00:00 2001 From: Gabriel Rodriguez Alsina Date: Fri, 22 Mar 2019 15:37:09 -0300 Subject: [PATCH] (refactor) navbar to give sensible defaults in case we are using a network lacking an updated theme --- apps/block_scout_web/assets/css/_mixins.scss | 14 + apps/block_scout_web/assets/css/app.scss | 1 + .../assets/css/components/_nav_tabs.scss | 1 - .../assets/css/components/_navbar.scss | 265 +++++++++--------- .../assets/css/theme/_poa_variables.scss | 2 + .../assets/css/theme/_posdao_variables.scss | 40 +-- .../templates/layout/_topnav.html.eex | 42 +-- 7 files changed, 156 insertions(+), 209 deletions(-) create mode 100644 apps/block_scout_web/assets/css/_mixins.scss diff --git a/apps/block_scout_web/assets/css/_mixins.scss b/apps/block_scout_web/assets/css/_mixins.scss new file mode 100644 index 0000000000..01ca9f69ed --- /dev/null +++ b/apps/block_scout_web/assets/css/_mixins.scss @@ -0,0 +1,14 @@ +@mixin textfield-placeholder($color: #a3a9b5) { + &::-webkit-input-placeholder { + color: $color; + } + &::-moz-placeholder { + color: $color; + } + &:-ms-input-placeholder { + color: $color; + } + &:-moz-placeholder { + color: $color; + } +} \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss index a3be02359c..2296767038 100644 --- a/apps/block_scout_web/assets/css/app.scss +++ b/apps/block_scout_web/assets/css/app.scss @@ -1,3 +1,4 @@ +@import "./mixins"; /* Phoenix flash messages */ .alert:empty { display: none; } 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 4559eda4bb..88ee6f5194 100644 --- a/apps/block_scout_web/assets/css/components/_nav_tabs.scss +++ b/apps/block_scout_web/assets/css/components/_nav_tabs.scss @@ -1,5 +1,4 @@ .nav-tabs { - .nav-link { border-top-left-radius: 0; border-top-right-radius: 0; diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index ea64134e02..6c16416048 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -1,115 +1,109 @@ -.navbar { +// Default variables +$header-background-color: #fff !default; +$header-links-color: #a3a9b5 !default; +$header-links-color-active: $primary !default; +$header-icon-color: $header-links-color !default; +$header-icon-color-hover: $primary !default; +$header-toggler-icon: "data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($primary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E" !default; +$header-textfield-text-color: $header-links-color !default; +$header-textfield-background-color: #f5f6fa !default; +$header-textfield-magnifier-color: $header-links-color !default; + +$header-link-horizontal-padding: 0.71rem; + +.navbar.navbar-primary { + background-color: $header-background-color; position: relative; z-index: 100; - &-primary { - background-color: $primary; - } -} - -.navbar-collapse.collapsing, -.navbar-collapse.collapse.show { - display: flex; - flex-direction: column; - - .search-form { - align-items: center; - order: -1; - width: 100%; - - form { - flex-grow: 1; - } - } - .input-group { - width: 100%; + .nav-item { + font-size: 14px; } .navbar-nav { - white-space: nowrap; - } -} + .nav-link { + align-items: center; + color: $header-links-color; + display: flex; + font-size: 14px; + position: relative; -.navbar-brand { - margin-left: 0; -} + &:before { + background-color: $primary; + 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: calc(100% - #{ $header-link-horizontal-padding } - #{ $header-link-horizontal-padding }); + } -.navbar-logo { - height: 1.5em; -} + &.active, + &:hover { + @include media-breakpoint-up(lg) { + &:before { + opacity: 1; + } + } + } -@include media-breakpoint-up(md) { - .navbar-expand-lg .navbar-nav .nav-link { - padding-left: 0.71rem; - padding-right: 0.71rem; - } -} + &.active, + &:hover, + &.active-icon { + color: $header-links-color-active; + .nav-link-icon { + * { + fill: $header-icon-color-hover; + } + } + } -.navbar { - .nav-item { - font-size: 14px; - } -} + .nav-link-icon { + align-items: center; + display: flex; + margin-right: 0.71em; + position: relative; + top: -1px; -.navbar-dark { - .navbar-nav { - .nav-link { - color: $white; + path { + fill: $header-icon-color; + } + } } } -} - -.navbar-nav { - .nav-link { - align-items: center; - display: flex; - font-size: 14px; - } -} -.nav-link-icon { - align-items: center; - display: flex; - margin-right: 0.71em; - position: relative; - top: -1px; + .navbar-toggler { + border-color: $primary; + color: $primary; - path { - fill: $secondary; - } - - &.m-r-0 { - margin-right: 0; + .navbar-toggler-icon { + background-image: url($header-toggler-icon); + } } -} - -.navbar { .search-form { display: flex; - } -} -.navbar { - .search-form { - @include media-breakpoint-up(xl) { - height: 57px; - margin-bottom: -8px; - margin-top: -8px; - } + @include media-breakpoint-up(xl) { + height: 57px; + margin-bottom: -8px; + margin-top: -8px; + } } - .form-inline { - height: 100%; + height: 100%; } - .input-group { - height: 100%; - position: relative; + height: 100%; + position: relative; } - .form-control { - background: #f5f6fa; - border-color: #f5f6fa; - color: #a3a9b5; + background: $header-textfield-background-color; + border-color: $header-textfield-background-color; + color: $header-textfield-text-color; font-size: 14px; height: 100%; padding-left: 38px; @@ -118,22 +112,8 @@ width: 100%; z-index: 1; - &::-webkit-input-placeholder { - /* Chrome/Opera/Safari */ - color: #a3a9b5; - } - &::-moz-placeholder { - /* Firefox 19+ */ - color: #a3a9b5; - } - &:-ms-input-placeholder { - /* IE 10+ */ - color: #a3a9b5; - } - &:-moz-placeholder { - /* Firefox 18- */ - color: #a3a9b5; - } + @include textfield-placeholder(); + &:focus { box-shadow: none; } @@ -142,7 +122,6 @@ width: 280px; } } - .input-group-append { height: 38px; left: 0; @@ -152,49 +131,55 @@ width: 38px; z-index: 5; - path { - fill: #a3a9b5; + * { + fill: $header-textfield-magnifier-color; } } - .input-group-text { - align-items: center; - background: none; - border-color: transparent; - display: flex; - height: 100%; - justify-content: center; - padding: 0; - width: 100%; - } + align-items: center; + background: none; + border-color: transparent; + display: flex; + height: 100%; + justify-content: center; + padding: 0; + width: 100%; + } } -.topnav-nav-link { - color: $white; - position: relative; +.navbar-collapse.collapsing, +.navbar-collapse.collapse.show { + display: flex; + flex-direction: column; - &: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%; + .search-form { + align-items: center; + order: -1; + width: 100%; + + form { + flex-grow: 1; + } + } + .input-group { + width: 100%; + } + .navbar-nav { + white-space: nowrap; } } -@include media-breakpoint-up(lg) { - .topnav-nav-link { - &:hover { - &:before { - opacity: 1; - } - } +.navbar-brand { + margin-left: 0; +} + +.navbar-logo { + height: 1.5em; +} + +@include media-breakpoint-up(md) { + .navbar-expand-lg .navbar-nav .nav-link { + padding-left: $header-link-horizontal-padding; + padding-right: $header-link-horizontal-padding; } } \ No newline at end of file diff --git a/apps/block_scout_web/assets/css/theme/_poa_variables.scss b/apps/block_scout_web/assets/css/theme/_poa_variables.scss index 8998e95dca..529436e5ad 100644 --- a/apps/block_scout_web/assets/css/theme/_poa_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_poa_variables.scss @@ -1,3 +1,5 @@ $primary: #5b389f; $secondary: #7dd79f; $tertiary: #997fdc; + +$header-links-color-active: #333; 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 bedcd414d6..0c36d8acb3 100644 --- a/apps/block_scout_web/assets/css/theme/_posdao_variables.scss +++ b/apps/block_scout_web/assets/css/theme/_posdao_variables.scss @@ -1,36 +1,8 @@ -$primary : #fff; -$secondary : #15bba6; -$tertiary : #15bba6; +$primary: #15bba6; +$secondary: #ff0000; +$tertiary: #00FF00; -// Navbar elements -.navbar.navbar-primary { - &.navbar-dark { - .navbar-nav { - .nav-link { - color: #a3a9b5; - &:hover { - color: #333; - } - } - .nav-link-icon { - circle { - fill: $secondary; - } - } - } - .navbar-toggler { - border-color: $secondary; - color: $secondary; - .navbar-toggler-icon { - background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{transparentize($secondary, 0.5)}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); - } - } - } -} +$header-links-color-active: #333; - -.topnav-nav-link { - &:before { - background-color: $secondary; - } -} \ No newline at end of file +$gradient-start: #17314f; +$gradient-end: #1e4168; 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 faa8344e2a..99924fc67d 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 @@ -81,7 +81,7 @@ <%= render BlockScoutWeb.IconsView, "_apps_icon.html" %> - <%= gettext("Apps") %> + <%= gettext("Stakes") %>
<%= link( @@ -97,23 +97,17 @@
  • - -
    - <%= link( - gettext("Item 1"), - class: "dropdown-item", - to: "/#" - ) %> - <%= link( - gettext("Item 2"), - class: "dropdown-item", - to: "/#" - ) %> +
    + <%= for %{url: url, title: title} <- other_networks() do %> + <%= title %> + <% end %>
    • @@ -131,26 +125,6 @@ <% end %> -