(add) new navbar icons - new navbar POSDAO items

pull/1704/head
Gabriel Rodriguez Alsina 6 years ago
parent 42455694a4
commit cd6d981502
  1. 30
      apps/block_scout_web/assets/css/components/_dropdown.scss
  2. 10
      apps/block_scout_web/assets/css/components/_nav_tabs.scss
  3. 242
      apps/block_scout_web/assets/css/components/_navbar.scss
  4. 32
      apps/block_scout_web/assets/css/theme/_posdao_variables.scss
  5. 2
      apps/block_scout_web/assets/css/theme/_variables.scss
  6. 5
      apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex
  7. 6
      apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex
  8. 5
      apps/block_scout_web/lib/block_scout_web/templates/icons/_apps_icon.html.eex
  9. 6
      apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex
  10. 3
      apps/block_scout_web/lib/block_scout_web/templates/icons/_posdao_icon.html.eex
  11. 5
      apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex
  12. 43
      apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@ -1,17 +1,31 @@
// These styles extend the default Bootstrap styles // These styles extend the default Bootstrap styles
.dropdown-menu { .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 { .dropdown-search-icon {
top: 0.5rem; color: $gray-300;
left: 0.625rem; left: 0.625rem;
pointer-events: none; pointer-events: none;
color: $gray-300; top: 0.5rem;
} }
.dropdown-search-field { .dropdown-search-field {
padding-left: 2rem; padding-left: 2rem;
} }
.dropdown-toggle::after {
margin-left: 0.71em;
}

@ -1,20 +1,20 @@
.nav-tabs { .nav-tabs {
.nav-link { .nav-link {
padding: 1.25rem 2.5rem;
color: $text-muted;
font-size: 14px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
color: $text-muted;
font-size: 14px;
padding: 1.25rem 2.5rem;
&:hover { &:hover {
color: $primary; color: $primary;
} }
&.active { &.active {
color: $white;
background-color: $primary; background-color: $primary;
border-color: $primary; border-color: $primary;
color: $white;
} }
&:hover { &:hover {
@ -25,9 +25,9 @@
.nav-tabs .nav-item.show .nav-link { .nav-tabs .nav-item.show .nav-link {
color: $white;
background-color: darken($primary, 10%); background-color: darken($primary, 10%);
border-color: darken($primary, 10%); border-color: darken($primary, 10%);
color: $white;
} }
.api-doc-tab { .api-doc-tab {

@ -1,162 +1,166 @@
.navbar { .navbar {
position: relative; position: relative;
z-index: 100; z-index: 100;
&-primary { &-primary {
background-color: $primary; background-color: $primary;
} }
} }
.navbar-collapse.collapsing, .navbar-collapse.collapsing,
.navbar-collapse.collapse.show { .navbar-collapse.collapse.show {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.search-form { .search-form {
order: -1; align-items: center;
width: 100%; order: -1;
align-items: center; width: 100%;
form { form {
flex-grow: 1; flex-grow: 1;
}
}
.input-group {
width: 100%;
}
.navbar-nav {
white-space: nowrap;
} }
}
.input-group {
width: 100%;
}
.navbar-nav {
white-space: nowrap;
}
} }
.navbar-brand { .navbar-brand {
margin-left: 0; margin-left: 0;
} }
.navbar-logo { .navbar-logo {
height: 1.5em; height: 1.5em;
} }
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
padding-left: 0.75rem; padding-left: 0.71rem;
padding-right: 0.75rem; padding-right: 0.71rem;
} }
} }
.navbar .nav-item { .navbar {
font-size: 14px; .nav-item {
font-size: 14px;
}
} }
.navbar-dark .navbar-nav .nav-link { .navbar-dark {
color: $white; .navbar-nav {
.nav-link {
color: $white;
}
}
} }
.navbar-nav .nav-link { .navbar-nav {
display: flex; .nav-link {
align-items: center; align-items: center;
display: flex;
font-size: 14px;
}
} }
.nav-link-icon { .nav-link-icon {
display: flex; align-items: center;
align-items: center; display: flex;
position: relative; margin-right: 0.71em;
top: -1px; position: relative;
margin-right: 0.5em; top: -1px;
path { path {
fill: $secondary; fill: $secondary;
} }
} }
.navbar .search-form { .navbar {
display: flex; .search-form {
display: flex;
}
} }
.navbar .form-control { .navbar {
background: transparent; .form-control {
width: auto; background: transparent;
font-size: 12px; border-color: transparentize($white, 0.30);
border-right: none; border-right: none;
color: $white; color: $white;
border-color: transparentize($white, 0.30); font-size: 12px;
padding-right: 0px; padding-right: 0;
width: auto;
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */ &::-webkit-input-placeholder {
color: transparentize($white, 0.5); /* Chrome/Opera/Safari */
} color: transparentize($white, 0.5);
&::-moz-placeholder { /* Firefox 19+ */ }
color: transparentize($white, 0.5); &::-moz-placeholder {
} /* Firefox 19+ */
&:-ms-input-placeholder { /* IE 10+ */ color: transparentize($white, 0.5);
color: transparentize($white, 0.5); }
} &:-ms-input-placeholder {
&:-moz-placeholder { /* Firefox 18- */ /* IE 10+ */
color: transparentize($white, 0.5); color: transparentize($white, 0.5);
} }
&:-moz-placeholder {
&:focus { /* Firefox 18- */
box-shadow: none; color: transparentize($white, 0.5);
} }
&:focus {
@include media-breakpoint-up(xl) { box-shadow: none;
width: calc(41ch + #{$input-padding-x}); }
} @include media-breakpoint-up(xl) {
width: calc(41ch + #{$input-padding-x});
}
}
} }
.navbar .input-group-text { .navbar {
background: none; .input-group-text {
border-left: none; background: none;
border-color: transparentize($white, 0.30); border-color: transparentize($white, 0.30);
border-left: none;
}
} }
.input-group-append { .input-group-append {
margin-left: 0px; margin-left: 0;
path { path {
fill: $secondary; fill: $secondary;
} }
} }
.topnav-nav-link { .topnav-nav-link {
position: relative; color: $white;
color: $white; position: relative;
&:before { &:before {
content: ""; background-color: $secondary;
position: absolute; border-radius: 0 0 4px 4px;
display: block; top: -10px;
bottom: -10px; content: "";
left: 50%; display: block;
width: 75%; height: 0.25rem;
height: 0.2rem; left: 50%;
background-color: $secondary; opacity: 0;
border-radius: 4px 4px 0 0; position: absolute;
opacity: 0; transform: translateX(-50%);
transform: translateX(-50%); transition: all 0.2s ease;
transition: all 0.2s ease; width: 75%;
} }
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
.topnav-nav-link:hover:before { .topnav-nav-link {
opacity: 1; &:hover {
} &:before {
} opacity: 1;
}
.dropdown-menu { }
padding: 0px; }
} }
.dropdown-item {
padding: 10px 20px;
font-size: 12px;
&:hover {
background-color: $tertiary;
color: $white;
}
}

@ -1,3 +1,29 @@
$primary: #5b389f; $primary : #fff;
$secondary: #7dd79f; $secondary : #15bba6;
$tertiary: #997fdc; $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;
}
}

@ -1,3 +1,5 @@
// @import "neutral_v÷ariables"; // @import "neutral_v÷ariables";
@import "posdao_variables"; @import "posdao_variables";
// @import "sokol_variables";
// @import "dai_variables";
@import "theme/base_variables"; @import "theme/base_variables";

@ -1,3 +1,4 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="#7DD79F" fill-rule="evenodd" d="M15 16H1a1 1 0 0 1-1-1v-4a3 3 0 0 1 3-3h1V3a3 3 0 0 1 3-3h2a3 3 0 0 1 3 3v5h1a3 3 0 0 1 3 3v4a1 1 0 0 1-1 1zM10 4a2 2 0 1 0-4 0v3a2 2 0 1 0 4 0V4zm4 8c0-1.105-1.075-2-2.4-2h-.379c-.549.61-1.336 1-2.221 1H7c-.885 0-1.672-.39-2.221-1H4.4c-1.325 0-2.4.895-2.4 2v2h12v-2z"/> <path fill="#A3A9B5" fill-rule="evenodd" d="M8 10c-2.7 0-8 1.3-8 4v2h16v-2c0-2.7-5.3-4-8-4z"/>
<path fill="#BDC4D2" fill-rule="evenodd" d="M8 8c2.2 0 4-1.8 4-4s-1.8-4-4-4-4 1.8-4 4 1.8 4 4 4z"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 410 B

After

Width:  |  Height:  |  Size: 274 B

@ -1,3 +1,5 @@
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<path fill="#7DD79F" fill-rule="evenodd" d="M15 9h-1.277c-.347.595-.985 1-1.723 1a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2h9.277c.347-.595.985-1 1.723-1 .738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2zm0-6H5.723C5.376 3.595 4.738 4 4 4a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2h1.277C2.624.405 3.262 0 4 0c.738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2zM1 13h1.277c.347-.595.985-1 1.723-1 .738 0 1.376.405 1.723 1H15a1 1 0 0 1 0 2H5.723c-.347.595-.985 1-1.723 1a1.994 1.994 0 0 1-1.723-1H1a1 1 0 0 1 0-2z"/> <path fill="#D2DAE9" fill-rule="evenodd" d="M15 3H5a1 1 0 0 1-2 0H1a1 1 0 0 1 0-2h2a1 1 0 0 1 2 0h10a1 1 0 0 1 0 2z"/>
<path fill="#BDC4D2" fill-rule="evenodd" d="M15 9h-2a1 1 0 0 1-2 0H1a1 1 0 0 1 0-2h10a1 1 0 0 1 2 0h2a1 1 0 0 1 0 2z"/>
<path fill="#A3A9B5" fill-rule="evenodd" d="M15 15H5a1 1 0 0 1-2 0H1a1 1 0 0 1 0-2h2a1 1 0 0 1 2 0h10a1 1 0 0 1 0 2z"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 593 B

After

Width:  |  Height:  |  Size: 442 B

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="18">
<path fill="#A3A9B5" fill-rule="evenodd" d="M8 14.991l5.586-3.491 2.4 1.5L8 17.991.014 13l2.4-1.5L8 14.991z"/>
<path fill="#C1C7D4" fill-rule="evenodd" d="M8 10.991L13.586 7.5l2.4 1.5L8 13.991.014 9l2.4-1.5L8 10.991z"/>
<path fill="#D2DAE9" fill-rule="evenodd" d="M8 .009L15.986 5 8 9.991.014 5 8 .009z"/>
</svg>

After

Width:  |  Height:  |  Size: 389 B

@ -1,3 +1,5 @@
<svg viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg" width="14" height="16"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="16">
<path fill="#7DD79F" fill-rule="evenodd" d="M14 11c0 .026-.013.049-.015.074.004.382-.159.757-.481.962l-5.897 3.743-.004.002-.099.063a.983.983 0 0 1-.299.115c-.01.002-.019.009-.03.011-.013.002-.027.001-.04.003-.046.006-.087.027-.135.027-.048 0-.089-.021-.135-.027-.013-.002-.027-.001-.04-.003-.011-.002-.02-.009-.03-.011a.983.983 0 0 1-.299-.115l-.099-.063-.004-.002-5.897-3.743c-.322-.205-.485-.58-.481-.962C.013 11.049 0 11.026 0 11V5a.98.98 0 0 1 .085-.398c.066-.256.184-.494.411-.638L6.393.221l.004-.002.114-.073c.022-.013.046-.013.068-.025A.924.924 0 0 1 6.825.03.86.86 0 0 1 7 .017a.86.86 0 0 1 .175.013c.087.017.166.05.246.091.022.012.046.012.068.025l.114.073.004.002 5.897 3.743c.227.144.345.382.411.638A.98.98 0 0 1 14 5v6zm-6 2.01l4-2.539V6.99L8 9.529v3.481zm-6-2.539l4 2.539V9.529L2 6.99v3.481zm5-8.116L2.834 5 7 7.645 11.166 5 7 2.355z"/> <path fill="#D2DAE9" fill-rule="evenodd" d="M7 0L-.007 3.498 7 6.996l7.007-3.498L7 0z"/>
<path fill="#C1C7D4" fill-rule="evenodd" d="M0 5.005v7.674L6.004 16V8.326L0 5.005z"/>
<path fill="#A3A9B5" fill-rule="evenodd" d="M7.996 8.326V16L14 12.679V5.005L7.996 8.326z"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 945 B

After

Width:  |  Height:  |  Size: 350 B

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6">
<circle cx="3" cy="3" r="3" fill="#A3A9B5" />
</svg>

After

Width:  |  Height:  |  Size: 118 B

@ -1,3 +1,4 @@
<svg viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg" width="17" height="14"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14">
<path fill="#53546A" fill-rule="evenodd" d="M15.5 5h-4.519l1.224 1.224a1.037 1.037 0 0 1-1.465 1.465L7.811 4.76a1.017 1.017 0 0 1-.24-.409 1 1 0 0 1-.065-.324C7.505 4.018 7.5 4.01 7.5 4v-.001a1.026 1.026 0 0 1 .295-.775L10.724.295a1.037 1.037 0 0 1 1.465 1.465L10.948 3H15.5a1 1 0 0 1 0 2zm-6.016 5c0 .009-.004.016-.004.024a1.077 1.077 0 0 1-.064.316 1.02 1.02 0 0 1-.242.42l-2.925 2.929a1.033 1.033 0 0 1-1.462 0 1.037 1.037 0 0 1 0-1.465L6.009 11H1.5a1 1 0 0 1 0-2h4.541L4.803 7.76a1.037 1.037 0 0 1 0-1.465 1.033 1.033 0 0 1 1.462 0L9.19 9.224c.213.214.306.496.294.776z"/> <path fill="#BDC4D2" fill-rule="evenodd" d="M15 5h-4.519l1.224 1.224a1.037 1.037 0 0 1-1.465 1.465L7.311 4.76a1.017 1.017 0 0 1-.24-.409 1.024 1.024 0 0 1-.066-.327C7.005 4.016 7 4.009 7 4c-.012-.28.082-.562.295-.776L10.224.295a1.037 1.037 0 0 1 1.465 1.465L10.448 3H15a1 1 0 0 1 0 2z"/>
<path fill="#A3A9B5" fill-rule="evenodd" d="M8.788 10.587c-.038.058-.063.122-.114.173l-2.925 2.929a1.033 1.033 0 0 1-1.462 0 1.037 1.037 0 0 1 0-1.465L5.509 11H1a1 1 0 0 1 0-2h4.541L4.303 7.76a1.037 1.037 0 0 1 0-1.465 1.033 1.033 0 0 1 1.462 0L8.69 9.224c.203.203.303.47.302.736.001.014.008.026.008.04 0 .224-.087.42-.212.587z"/>
</svg> </svg>

Before

Width:  |  Height:  |  Size: 671 B

After

Width:  |  Height:  |  Size: 698 B

@ -76,11 +76,52 @@
) %> ) %>
</div> </div>
</li> </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">
<span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_apps_icon.html" %>
</span>
<%= gettext("Apps") %>
</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>
</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">
<span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_posdao_icon.html" %>
</span>
<%= gettext("POSDAO") %>
</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>
</li>
</ul> </ul>
<!-- Search navbar -->
<div class="search-form d-lg-flex d-inline-block"> <div class="search-form d-lg-flex d-inline-block">
<%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %> <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %>
<div class="input-group"> <div class="input-group">
<%= 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" %>
<div class="input-group-append"> <div class="input-group-append">
<button class="input-group-text" id="search-icon"> <button class="input-group-text" id="search-icon">
<%= render BlockScoutWeb.IconsView, "_search_icon.html" %> <%= render BlockScoutWeb.IconsView, "_search_icon.html" %>

Loading…
Cancel
Save