CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

(refactor) navbar to give sensible defaults in case we are using a network lacking an updated theme

Browse Source
pull/1704/head
Gabriel Rodriguez Alsina 6 years ago
parent 8d44932803
commit 4f676cdf4a
7 changed files with 156 additions and 209 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 14
      apps/block_scout_web/assets/css/_mixins.scss
  2. 1
      apps/block_scout_web/assets/css/app.scss
  3. 1
      apps/block_scout_web/assets/css/components/_nav_tabs.scss
  4. 211
      apps/block_scout_web/assets/css/components/_navbar.scss
  5. 2
      apps/block_scout_web/assets/css/theme/_poa_variables.scss
  6. 40
      apps/block_scout_web/assets/css/theme/_posdao_variables.scss
  7. 42
      apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

14
apps/block_scout_web/assets/css/_mixins.scss
Unescape View File

@ -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;
}
}

1
apps/block_scout_web/assets/css/app.scss
Unescape View File

@ -1,3 +1,4 @@
@import "./mixins";
/* Phoenix flash messages */
.alert:empty { display: none; }

1
apps/block_scout_web/assets/css/components/_nav_tabs.scss
Unescape View File

@ -1,5 +1,4 @@
.nav-tabs {
.nav-link {
border-top-left-radius: 0;
border-top-right-radius: 0;

211
apps/block_scout_web/assets/css/components/_navbar.scss
Unescape View File

@ -1,72 +1,68 @@
.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;
.nav-item {
font-size: 14px;
}
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.show {
display: flex;
flex-direction: column;
.search-form {
.navbar-nav {
.nav-link {
align-items: center;
order: -1;
width: 100%;
color: $header-links-color;
display: flex;
font-size: 14px;
position: relative;
form {
flex-grow: 1;
}
}
.input-group {
width: 100%;
}
.navbar-nav {
white-space: nowrap;
&: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-brand {
margin-left: 0;
}
.navbar-logo {
height: 1.5em;
}
@include media-breakpoint-up(md) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: 0.71rem;
padding-right: 0.71rem;
&.active,
&:hover {
@include media-breakpoint-up(lg) {
&:before {
opacity: 1;
}
}
}
.navbar {
.nav-item {
font-size: 14px;
}
}
.navbar-dark {
.navbar-nav {
.nav-link {
color: $white;
&.active,
&:hover,
&.active-icon {
color: $header-links-color-active;
.nav-link-icon {
* {
fill: $header-icon-color-hover;
}
}
}
.navbar-nav {
.nav-link {
align-items: center;
display: flex;
font-size: 14px;
}
}
.nav-link-icon {
.nav-link-icon {
align-items: center;
display: flex;
margin-right: 0.71em;
@ -74,42 +70,40 @@
top: -1px;
path {
fill: $secondary;
fill: $header-icon-color;
}
}
}
&.m-r-0 {
margin-right: 0;
}
}
.navbar {
.navbar-toggler {
border-color: $primary;
color: $primary;
.navbar-toggler-icon {
background-image: url($header-toggler-icon);
}
}
.search-form {
display: flex;
}
}
.navbar {
.search-form {
@include media-breakpoint-up(xl) {
height: 57px;
margin-bottom: -8px;
margin-top: -8px;
}
}
.form-inline {
height: 100%;
}
.input-group {
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,11 +131,10 @@
width: 38px;
z-index: 5;
path {
fill: #a3a9b5;
* {
fill: $header-textfield-magnifier-color;
}
}
.input-group-text {
align-items: center;
background: none;
@ -169,32 +147,39 @@
}
}
.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%;
@include media-breakpoint-up(lg) {
.topnav-nav-link {
&:hover {
&:before {
opacity: 1;
form {
flex-grow: 1;
}
}
.input-group {
width: 100%;
}
.navbar-nav {
white-space: nowrap;
}
}
.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;
}
}

2
apps/block_scout_web/assets/css/theme/_poa_variables.scss
Unescape View File

@ -1,3 +1,5 @@
$primary: #5b389f;
$secondary: #7dd79f;
$tertiary: #997fdc;
$header-links-color-active: #333;

40
apps/block_scout_web/assets/css/theme/_posdao_variables.scss
Unescape View File

@ -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;
}
}
$gradient-start: #17314f;
$gradient-end: #1e4168;

42
apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex
Unescape View File

@ -81,7 +81,7 @@
<span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_apps_icon.html" %>
</span>
<%= gettext("Apps") %>
<%= gettext("Stakes") %>
</a>
<div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
<%= link(
@ -97,23 +97,17 @@
</div>
</li>
<li class="nav-item dropdown">
<a href="#" role="button" id="navbarAPIsDropdown" class="nav-link topnav-nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link topnav-nav-link dropdown-toggle active-icon" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- ICON FOR MAINNET -->
<span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_posdao_icon.html" %>
</span>
<%= gettext("POSDAO") %>
<%= subnetwork_title() %>
</a>
<div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
<%= link(
gettext("Item 1"),
class: "dropdown-item",
to: "/#"
) %>
<%= link(
gettext("Item 2"),
class: "dropdown-item",
to: "/#"
) %>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<%= for %{url: url, title: title} <- other_networks() do %>
<a class="dropdown-item" href="<%= url%>"><%= title %></a>
<% end %>
</div>
</li>
</ul>
@ -131,26 +125,6 @@
<button class="btn btn-outline-success my-2 my-sm-0 sr-only hidden" type="submit"><%= gettext "Search" %></button>
<% end %>
</div>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle pl-lg-2" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<!-- ICON FOR MAINNET -->
<span class="nav-link-icon m-r-0">
<%= render BlockScoutWeb.IconsView, network_icon_partial() %>
</span>
<!-- ICON FOR TESTNET -->
<!-- <span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_test_network_icon.html" %>
</span> -->
<!-- <%= subnetwork_title() %> -->
</a>
<div class="dropdown-menu right" aria-labelledby="navbarDropdown">
<%= for %{url: url, title: title} <- other_networks() do %>
<a class="dropdown-item" href="<%= url%>"><%= title %></a>
<% end %>
</div>
</li>
</ul>
</div>
</div>
</nav>

Write Preview
Loading…
Cancel
Save