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

(add) new navbar icons - new navbar POSDAO items

Browse Source
pull/1704/head
Gabriel Rodriguez Alsina 6 years ago
parent 42455694a4
commit cd6d981502
12 changed files with 245 additions and 144 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. 22
      apps/block_scout_web/assets/css/components/_dropdown.scss
  2. 10
      apps/block_scout_web/assets/css/components/_nav_tabs.scss
  3. 100
      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

22
apps/block_scout_web/assets/css/components/_dropdown.scss
Unescape View File

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

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

@ -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 {

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

@ -13,19 +13,17 @@
flex-direction: column; flex-direction: column;
.search-form { .search-form {
align-items: center;
order: -1; order: -1;
width: 100%; width: 100%;
align-items: center;
form { form {
flex-grow: 1; flex-grow: 1;
} }
} }
.input-group { .input-group {
width: 100%; width: 100%;
} }
.navbar-nav { .navbar-nav {
white-space: nowrap; white-space: nowrap;
} }
@ -41,80 +39,96 @@
@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 {
.nav-item {
font-size: 14px; font-size: 14px;
}
} }
.navbar-dark .navbar-nav .nav-link { .navbar-dark {
.navbar-nav {
.nav-link {
color: $white; 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;
margin-right: 0.71em;
position: relative; position: relative;
top: -1px; top: -1px;
margin-right: 0.5em;
path { path {
fill: $secondary; fill: $secondary;
} }
} }
.navbar .search-form { .navbar {
.search-form {
display: flex; display: flex;
}
} }
.navbar .form-control { .navbar {
.form-control {
background: transparent; background: transparent;
width: auto; border-color: transparentize($white, 0.30);
font-size: 12px;
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 {
/* Chrome/Opera/Safari */
color: transparentize($white, 0.5); color: transparentize($white, 0.5);
} }
&::-moz-placeholder { /* Firefox 19+ */ &::-moz-placeholder {
/* Firefox 19+ */
color: transparentize($white, 0.5); color: transparentize($white, 0.5);
} }
&:-ms-input-placeholder { /* IE 10+ */ &:-ms-input-placeholder {
/* IE 10+ */
color: transparentize($white, 0.5); color: transparentize($white, 0.5);
} }
&:-moz-placeholder { /* Firefox 18- */ &:-moz-placeholder {
/* Firefox 18- */
color: transparentize($white, 0.5); color: transparentize($white, 0.5);
} }
&:focus { &:focus {
box-shadow: none; box-shadow: none;
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
width: calc(41ch + #{$input-padding-x}); width: calc(41ch + #{$input-padding-x});
} }
}
} }
.navbar .input-group-text { .navbar {
.input-group-text {
background: none; background: none;
border-left: 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;
@ -122,41 +136,31 @@
} }
.topnav-nav-link { .topnav-nav-link {
position: relative;
color: $white; color: $white;
position: relative;
&:before { &:before {
background-color: $secondary;
border-radius: 0 0 4px 4px;
top: -10px;
content: ""; content: "";
position: absolute;
display: block; display: block;
bottom: -10px; height: 0.25rem;
left: 50%; left: 50%;
width: 75%;
height: 0.2rem;
background-color: $secondary;
border-radius: 4px 4px 0 0;
opacity: 0; opacity: 0;
position: absolute;
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 {
&:hover {
&:before {
opacity: 1; opacity: 1;
} }
} }
.dropdown-menu {
padding: 0px;
}
.dropdown-item {
padding: 10px 20px;
font-size: 12px;
&:hover {
background-color: $tertiary;
color: $white;
} }
} }

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

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

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

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

5
apps/block_scout_web/lib/block_scout_web/templates/icons/_accounts_icon.html.eex
Unescape View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 410 B

After

Width:  |  Height:  |  Size: 274 B

6
apps/block_scout_web/lib/block_scout_web/templates/icons/_api_icon.html.eex
Unescape View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 593 B

After

Width:  |  Height:  |  Size: 442 B

5
apps/block_scout_web/lib/block_scout_web/templates/icons/_apps_icon.html.eex
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

6
apps/block_scout_web/lib/block_scout_web/templates/icons/_block_icon.html.eex
Unescape View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 945 B

After

Width:  |  Height:  |  Size: 350 B

3
apps/block_scout_web/lib/block_scout_web/templates/icons/_posdao_icon.html.eex
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 118 B

5
apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex
Unescape View File

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

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 671 B

After

Width:  |  Height:  |  Size: 698 B

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

@ -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" %>

Write Preview
Loading…
Cancel
Save