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

Created new layout for mobile menu

Browse Source
pull/2665/head
Yegor San 5 years ago
parent cc596b4281
commit 2c9af69131
5 changed files with 364 additions and 210 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. 4
      apps/block_scout_web/assets/close.svg
  2. 2
      apps/block_scout_web/assets/css/components/_dropdown.scss
  3. 493
      apps/block_scout_web/assets/css/components/_navbar.scss
  4. 38
      apps/block_scout_web/assets/js/pages/layout.js
  5. 37
      apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

4
apps/block_scout_web/assets/close.svg
Unescape View File

@ -0,0 +1,4 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971;" xml:space="preserve"><g><g>
<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#828BA0"/>
</g></g> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 806 B

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

@ -1,6 +1,6 @@
$dropdown-menu-item-color: #333 !default;
$dropdown-menu-item-hover-color: $secondary !default;
$dropdown-menu-item-hover-background: rgba($secondary, .1) !default;
$dropdown-menu-item-hover-background: rgba($secondary, 0.1) !default;
// These styles extend the default Bootstrap styles
.dropdown-menu {

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

@ -14,248 +14,351 @@ $navbar-logo-height: 28px !default;
$navbar-logo-width: auto !default;
.navbar.navbar-primary {
background-color: $header-background-color;
position: relative;
z-index: 100;
background-color: $header-background-color;
position: relative;
z-index: 100;
.nav-item {
font-size: 14px;
}
.navbar-nav {
.nav-link {
align-items: center;
color: $header-links-color;
display: flex;
font-size: 14px;
position: relative;
transition: $transition-cont;
&:before {
background-color: $header-icon-border-color-hover;
border-radius: 0 0 4px 4px;
content: "";
display: block;
height: 0.25rem;
left: 50%;
opacity: 0;
position: absolute;
top: -10px;
transform: translateX(-50%);
transition: $transition-cont;
width: calc(
100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding}
);
}
&.active,
&:hover {
@include media-breakpoint-up(lg) {
&:before {
opacity: 1;
}
.nav-item {
font-size: 14px;
}
.navbar-nav {
.nav-link {
align-items: center;
color: $header-links-color;
display: flex;
font-size: 14px;
position: relative;
transition: $transition-cont;
&:before {
background-color: $header-icon-border-color-hover;
border-radius: 0 0 4px 4px;
content: "";
display: block;
height: 0.25rem;
left: 50%;
opacity: 0;
position: absolute;
top: -10px;
transform: translateX(-50%);
transition: $transition-cont;
width: calc(
100% - #{$header-link-horizontal-padding} - #{$header-link-horizontal-padding}
);
}
&.active,
&:hover {
@include media-breakpoint-up(lg) {
&:before {
opacity: 1;
}
}
}
&.active,
&:hover,
&.active-icon {
color: $header-links-color-active;
.nav-link-icon {
path {
fill: $header-icon-color-hover;
}
}
}
.nav-link-icon {
align-items: center;
display: flex;
margin-right: 0.71em;
position: relative;
top: -1px;
path {
fill: $header-icon-color;
transition: $transition-cont;
}
}
}
}
&.active,
&:hover,
&.active-icon {
color: $header-links-color-active;
.nav-link-icon {
path {
fill: $header-icon-color-hover;
}
.nav-item-networks {
margin-left: auto;
.nav-link:before {
display: none;
}
}
}
}
.nav-link-icon {
align-items: center;
display: flex;
margin-right: 0.71em;
position: relative;
top: -1px;
.navbar-toggler {
outline: none;
color: $primary;
path {
fill: $header-icon-color;
transition: $transition-cont;
.navbar-toggler-icon {
background-image: url($header-toggler-icon);
}
.navbar-toggler-icon-1 {
display: none;
}
}
}
.search-form {
display: flex;
.nav-item-networks {
margin-left: auto;
.nav-link:before {
display: none;
}
@include media-breakpoint-up(xl) {
height: 57px;
margin-bottom: -8px;
margin-top: -8px;
}
}
}
.navbar-toggler {
border-color: $primary;
color: $primary;
.navbar-toggler-icon {
background-image: url($header-toggler-icon);
.form-inline {
height: 100%;
}
}
.search-form {
display: flex;
@include media-breakpoint-up(xl) {
height: 57px;
margin-bottom: -8px;
margin-top: -8px;
.input-group {
height: 100%;
position: relative;
}
}
.form-inline {
height: 100%;
}
.input-group {
height: 100%;
position: relative;
}
.form-control {
background: $header-textfield-background-color;
border-color: $header-textfield-background-color;
color: $header-textfield-text-color;
font-size: 14px;
height: 100%;
padding-left: 38px;
padding-right: 8px;
position: relative;
width: 100%;
z-index: 1;
&[placeholder]{
text-overflow: ellipsis !important;
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-overflow: ellipsis !important;
}
&::-moz-placeholder { /* Firefox 19+ */
text-overflow: ellipsis !important;
}
&:-ms-input-placeholder { /* IE 10+ */
text-overflow: ellipsis !important;
}
&:-moz-placeholder { /* Firefox 18- */
text-overflow: ellipsis !important;
}
.form-control {
background: $header-textfield-background-color;
border-color: $header-textfield-background-color;
color: $header-textfield-text-color;
font-size: 14px;
height: 100%;
padding-left: 38px;
padding-right: 8px;
position: relative;
width: 100%;
z-index: 1;
&:focus {
box-shadow: none;
}
&[placeholder]{
text-overflow: ellipsis !important;
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-overflow: ellipsis !important;
}
&::-moz-placeholder { /* Firefox 19+ */
text-overflow: ellipsis !important;
}
&:-ms-input-placeholder { /* IE 10+ */
text-overflow: ellipsis !important;
}
&:-moz-placeholder { /* Firefox 18- */
text-overflow: ellipsis !important;
@include media-breakpoint-up(xl) {
width: 340px;
}
@media (min-width: 1366px) {
width: 500px;
}
@media (min-width: 1440px) {
width: 580px;
}
}
.input-group-append {
height: 38px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
z-index: 5;
&:focus {
box-shadow: none;
* {
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%;
}
@include media-breakpoint-up(xl) {
width: 340px;
}
@media (min-width: 1366px) {
width: 500px;
}
@media (min-width: 1440px) {
width: 580px;
}
}
.input-group-append {
height: 38px;
left: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px;
z-index: 5;
* {
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%;
}
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.show {
display: flex;
flex-direction: column;
.search-form {
align-items: center;
order: -1;
width: 100%;
display: flex;
flex-direction: column;
form {
flex-grow: 1;
}
.search-form {
align-items: center;
order: -1;
width: 100%;
}
.input-group {
width: 100%;
form {
flex-grow: 1;
}
.awesomplete {
@include media-breakpoint-down(lg) {
}
.input-group {
width: 100%;
}
.awesomplete {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
}
.navbar-nav {
white-space: nowrap;
}
}
.navbar-nav {
white-space: nowrap;
}
}
.navbar-brand {
margin-left: 0;
flex-shrink: 1;
display: inline-flex;
.navbar-logo {
max-width: 100%;
}
margin-left: 0;
flex-shrink: 1;
display: inline-flex;
.navbar-logo {
max-width: 100%;
}
}
.navbar-logo {
max-height: $navbar-logo-height;
width: $navbar-logo-width;
max-height: $navbar-logo-height;
width: $navbar-logo-width;
}
@include media-breakpoint-up(md) {
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: $header-link-horizontal-padding;
padding-right: $header-link-horizontal-padding;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-left: $header-link-horizontal-padding;
padding-right: $header-link-horizontal-padding;
}
}
.add-border {
border: 1px solid transparentize($white, 0.30);
border: 1px solid transparentize($white, 0.30);
}
.navbar-collapse {
justify-content: flex-end;
align-items: flex-start;
flex-shrink: 0;
@media (min-width: 992px) {
align-items: center;
}
justify-content: flex-end;
align-items: flex-start;
flex-shrink: 0;
@media (min-width: 992px) {
align-items: center;
}
}
.navbar-container, .navbar-primary {
@include media-breakpoint-up(xl) {
padding-right: 0;
}
@include media-breakpoint-up(xl) {
padding-right: 0;
}
}
.nav-item-networks {
.topnav-nav-link {
transition: none !important;
}
.topnav-nav-link {
transition: none !important;
}
}
.nav-link-new {
margin-left: auto;
border-right: 1px solid #828ba0a1;
padding: 0px 11px 0px 5px;
font-size: 14px;
color: #333333;
@include media-breakpoint-up(lg) {
display: none;
}
}
.new-button {
margin-right: -10px!important;
@include media-breakpoint-up(lg) {
display: none!important;
}
}
@media (max-width: 992px) {
.navbar.navbar-primary .navbar-nav .nav-link .nav-link-icon {
display: none;
}
.navbar-nav .nav-item .dropdown-toggle::after {
display: none;
}
.navbar.navbar-primary .navbar-nav .nav-link {
font-size: 28px;
color: #333333;
padding: 0.7rem 1.4rem;
font-weight: 600;
}
.navbar .dropdown-menu {
box-shadow: none;
}
.navbar .dropdown-menu .dark-mode-changer {
display: none;
}
.nav-item .dropdown {
padding: 0px 15%;
font-weight: 600;
}
.last-child {
display: none!important;
}
.search-form {
width: 100%!important;
}
.awesomplete {
height: 50px;
}
.navbar.navbar-primary .input-group-append {
left: 15px !important;
}
.navbar.navbar-primary .form-control {
padding-right: 30px;
padding-left: 13.5%;
}
.dropdown-item {
padding: 10px 1.6rem !important;
color: rgba(51, 51, 51, 0.7)!important;
}
.navbar.navbar-primary .navbar-nav .nav-link:hover,
.navbar.navbar-primary .navbar-nav .nav-link.activeLink,
.navbar.navbar-primary .navbar-nav .nav-link:focus {
background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
width: 100%;
border-left: 2px solid #5c33a2;
}
.navbar.navbar-primary .navbar-nav .nav-link:hover:before {
content: "";
position: absolute;
left: 0;
top: 0;
height: 50px;
width: 50%;
border-left: 5px solid #726E97;
}
.navbar {
padding: 0.5rem 0rem!important;
}
.navbar-brand {
margin-right: 0px!important;
margin-left: 1rem;
}
.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:focus {
background-image: linear-gradient(to right, #f5f6fa, rgba(245, 246, 250, 0));
width: 100%;
border-left: 2px solid #5c33a2;
background-color: white!important;
}
.dark-mode-changer svg path {
fill: #a3a9b5!important;
}
.dropdown-toggle::after {
margin-left: 0.51em!important;
color: #a3a9b5;
}
}

38
apps/block_scout_web/assets/js/pages/layout.js
Unescape View File

@ -7,3 +7,41 @@ $(document).click(function (event) {
$('.navbar-toggler').click()
}
})
$(document).ready(function() {
if (matchMedia) {
var mq = window.matchMedia("(max-width: 900px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
function WidthChange(mq) {
if (mq.matches) {
$("#checkIfSmall").removeClass("dropdown-menu");
$(".dropdown-item").removeClass("active");
$("#checkIfSmall1").removeClass("dropdown-menu");
$("#checkIfSmall2").removeClass("dropdown-menu");
} else {
$("#checkIfSmall").addClass("dropdown-menu");
$("#checkIfSmall1").addClass("dropdown-menu");
$("#checkIfSmall2").addClass("dropdown-menu");
}
}
});
var div1 = document.getElementById("toggleImage1");
var div2 = document.getElementById("toggleImage2");
function switchVisible() {
if (!div1) return;
if (getComputedStyle(div1).display === "inline-block") {
div1.style.display = "none";
div2.style.display = "block";
} else {
div1.style.display = "inline-block";
div2.style.display = "none";
}
}
document
.getElementById("toggleButton")
.addEventListener("click", switchVisible);

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

@ -12,13 +12,27 @@
<%= link to: webapp_url(@conn), class: "navbar-brand", "data-test": "header_logo" do %>
<img class="navbar-logo" id="navbar-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
<% end %>
<a class="nav-link-new nav-link topnav-nav-link active-icon dropdown-toggle js-show-network-selector" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6">
<circle cx="3" cy="3" r="3" fill="#80d6a1"></circle>
</svg> </span>Sokol Testnet</a>
<button class="new-button dark-mode-changer" id="dark-mode-changer">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
<path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"></path>
</svg>
</button>
<script>
if (localStorage.getItem("current-color-mode") === "dark") {
document.getElementById("navbar-logo").style.filter = "brightness(0) invert(1)";
}
</script>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="<%= gettext("Toggle navigation") %>">
<span class="navbar-toggler-icon"></span>
<button class="navbar-toggler" id="toggleButton" onclick="switchVisible(); type="button" value="Click" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="<%= gettext("Toggle navigation") %>">
<span class="navbar-toggler-icon" id="toggleImage1" style="width="26px;"></span>
<span class="navbar-toggler-icon-1" id="toggleImage2"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.971 47.971" style="enable-background:new 0 0 47.971 47.971; width: 17px;
transform: translate(0px, -1.5px);" xml:space="preserve"> <g><g>
<path d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88 c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242 C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879 s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#a3a9b5"/>
</g></g> </svg></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
@ -30,7 +44,7 @@
</span>
<%= gettext("Blocks") %>
</a>
<div class="dropdown-menu" aria-labelledby="navbarBlocksDropdown">
<div class="dropdown-menu" id="checkIfSmall" aria-labelledby="navbarBlocksDropdown">
<%= link to: block_path(@conn, :index), class: "dropdown-item #{tab_status("blocks", @conn.request_path)}" do %>
<%= gettext("Blocks") %>
<% end %>
@ -42,14 +56,14 @@
<% end %>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" role="button" id="navbarTransactionsDropdown" class="nav-link topnav-nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<li class="nav-item dropdown" id="activeTransactions">
<a href="#" role="button" id="navbarTransactionsDropdown1" 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, "_transaction_icon.html" %>
</span>
<%= gettext("Transactions") %>
</a>
<div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
<div class="dropdown-menu" id="checkIfSmall1" aria-labeledby="navbarTransactionsDropdown">
<%= link(
gettext("Validated"),
class: "dropdown-item #{tab_status("txs", @conn.request_path)}",
@ -80,7 +94,7 @@
</span>
<%= gettext("APIs") %>
</a>
<div class="dropdown-menu" aria-labeledby="navbarTransactionsDropdown">
<div class="dropdown-menu" id="checkIfSmall2" aria-labeledby="navbarTransactionsDropdown">
<%= link(
gettext("GraphQL"),
class: "dropdown-item #{tab_status("graphiql", @conn.request_path)}",
@ -100,7 +114,7 @@
</li>
<% end %>
<li class="nav-item dropdown">
<a class="nav-link topnav-nav-link active-icon <%= if dropdown_nets() != [], do: "dropdown-toggle js-show-network-selector" %>" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link last-child topnav-nav-link active-icon <%= if dropdown_nets() != [], do: "dropdown-toggle js-show-network-selector" %>" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="nav-link-icon">
<%= render BlockScoutWeb.IconsView, "_active_icon.html" %>
</span>
@ -108,12 +122,7 @@
</a>
</li>
</ul>
<!-- Dark mode changer -->
<button class="dark-mode-changer" id="dark-mode-changer">
<svg xmlns="http://www.w3.org/2000/svg" width="15" height="16">
<path fill="#9B62FF" fill-rule="evenodd" d="M14.88 11.578a.544.544 0 0 0-.599-.166 5.7 5.7 0 0 1-1.924.321c-3.259 0-5.91-2.632-5.91-5.866 0-1.947.968-3.759 2.59-4.849a.534.534 0 0 0-.225-.97A5.289 5.289 0 0 0 8.059 0C3.615 0 0 3.588 0 8s3.615 8 8.059 8c2.82 0 5.386-1.423 6.862-3.806a.533.533 0 0 0-.041-.616z"/>
</svg>
</button>
<!-- Dark mode changer was there -->
<!-- Search navbar -->
<%= if Application.get_env(:block_scout_web, BlockScoutWeb.WebRouter)[:enabled] do %>
<div class="search-form d-lg-flex d-inline-block">

Write Preview
Loading…
Cancel
Save