From bf7ec84e0b13129ea9fd35445bba2dafdf0b4e25 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Mon, 8 Oct 2018 16:09:39 -0400 Subject: [PATCH 1/4] Add DAI Chain theme styles and assets --- .../css/components/_dashboard-banner.scss | 12 ++-- .../assets/css/theme/_dai_variables.scss | 58 ++++++++++++++++ .../assets/static/images/cube.svg | 12 ++++ .../assets/static/images/dai_logo.svg | 68 +++++++++++++++++++ .../static/images/icons/transactions.svg | 4 +- .../icons/_transaction_icon.html.eex | 4 +- .../templates/layout/_topnav.html.eex | 60 ++++++++-------- 7 files changed, 181 insertions(+), 37 deletions(-) create mode 100644 apps/block_scout_web/assets/css/theme/_dai_variables.scss create mode 100644 apps/block_scout_web/assets/static/images/cube.svg create mode 100644 apps/block_scout_web/assets/static/images/dai_logo.svg diff --git a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss index b79ede643d..df050f7918 100644 --- a/apps/block_scout_web/assets/css/components/_dashboard-banner.scss +++ b/apps/block_scout_web/assets/css/components/_dashboard-banner.scss @@ -53,16 +53,21 @@ } } +.dashboard-banner-graphic { + position: absolute; + right: 0; + bottom: 0; + z-index: 100; +} + .dashboard-banner-chart { grid-area: chart; - // 15px padding matches the Bootstrap container padding. padding: 1rem 1rem 1rem 0; } .dashboard-banner-chart-legend { grid-area: legend; display: flex; - // 15px padding matches the Bootstrap container padding. padding: 1rem 1rem; &-item { @@ -93,8 +98,7 @@ display: flex; align-items: center; justify-content: space-around; - // 15px padding matches the Bootstrap container padding. - padding-right: 15px; + padding-right: 1rem; background-color: $primary; box-shadow: -10px 0 15px 0 rgba($black, 0.14); diff --git a/apps/block_scout_web/assets/css/theme/_dai_variables.scss b/apps/block_scout_web/assets/css/theme/_dai_variables.scss new file mode 100644 index 0000000000..eb4c2598ba --- /dev/null +++ b/apps/block_scout_web/assets/css/theme/_dai_variables.scss @@ -0,0 +1,58 @@ +$primary: #fec042; +$secondary: #53546a; +$tertiary: #1755e4; + +.navbar.navbar-primary { + background-color: #f2f6f8; + + &.navbar-dark .navbar-nav .nav-link { + color: $secondary; + + &:hover, + &:focus { + color: rgba($secondary, 0.75); + } + } + + .form-control { + color: $secondary; + border-color: transparentize($secondary, 0.30); + + &::-webkit-input-placeholder { /* Chrome/Opera/Safari */ + color: transparentize($secondary, 0.5); + } + &::-moz-placeholder { /* Firefox 19+ */ + color: transparentize($secondary, 0.5); + } + &:-ms-input-placeholder { /* IE 10+ */ + color: transparentize($secondary, 0.5); + } + &:-moz-placeholder { /* Firefox 18- */ + color: transparentize($secondary, 0.5); + } + } + + .input-group-text { + border-color: transparentize($secondary, 0.30); + } +} + +.navbar.navbar-dark .navbar-toggler { + color: $secondary; + border-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"); + } +} + +.button.button-secondary { + color: $secondary; + border-color: $secondary; + + &:hover, + &:focus { + background-color: $secondary; + border-color: $secondary; + } +} diff --git a/apps/block_scout_web/assets/static/images/cube.svg b/apps/block_scout_web/assets/static/images/cube.svg new file mode 100644 index 0000000000..e28d607f17 --- /dev/null +++ b/apps/block_scout_web/assets/static/images/cube.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/apps/block_scout_web/assets/static/images/dai_logo.svg b/apps/block_scout_web/assets/static/images/dai_logo.svg new file mode 100644 index 0000000000..aebe53066e --- /dev/null +++ b/apps/block_scout_web/assets/static/images/dai_logo.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/block_scout_web/assets/static/images/icons/transactions.svg b/apps/block_scout_web/assets/static/images/icons/transactions.svg index 7c3f6073b1..483c8ab883 100644 --- a/apps/block_scout_web/assets/static/images/icons/transactions.svg +++ b/apps/block_scout_web/assets/static/images/icons/transactions.svg @@ -1,3 +1,3 @@ - - + + diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex index 7c3f6073b1..209589c3e5 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_transaction_icon.html.eex @@ -1,3 +1,3 @@ - - + + 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 8a8df0e17f..ba4ef3d691 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 @@ -41,36 +41,38 @@ <% end %> - <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %> -
- <%= 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" %> -
- +
+ <%= form_for @conn, chain_path(@conn, :search), [class: "form-inline my-2 my-lg-0", method: :get, enforce_utf8: false], fn f -> %> +
+ <%= 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" %> +
+ +
-
- - <% end %> - + + <% end %> + +
From ad96a8d29f50884226ee5fcf7348501071974a42 Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Mon, 8 Oct 2018 16:11:10 -0400 Subject: [PATCH 2/4] Improve mobile navigation layout --- .../assets/css/components/_navbar.scss | 32 +++++++++++++++++-- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/apps/block_scout_web/assets/css/components/_navbar.scss b/apps/block_scout_web/assets/css/components/_navbar.scss index e503169fc5..b952069e4e 100644 --- a/apps/block_scout_web/assets/css/components/_navbar.scss +++ b/apps/block_scout_web/assets/css/components/_navbar.scss @@ -7,6 +7,30 @@ } } +.navbar-collapse.collapsing, +.navbar-collapse.collapse.show { + display: flex; + flex-direction: column; + + .search-form { + order: -1; + width: 100%; + align-items: center; + + form { + flex-grow: 1; + } + } + + .input-group { + width: 100%; + } + + .navbar-nav { + white-space: nowrap; + } +} + .navbar-brand { margin-left: 0; } @@ -39,9 +63,7 @@ display: flex; align-items: center; position: relative; - top: -2px; - height: 1em; - width: 1em; + top: -1px; margin-right: 0.5em; path { @@ -49,6 +71,10 @@ } } +.navbar .search-form { + display: flex; +} + .navbar .form-control { background: transparent; width: auto; From 5d37e21d90ae3d8630c92ea55c7c1f11400ee03a Mon Sep 17 00:00:00 2001 From: Ryan Arthur Date: Mon, 8 Oct 2018 16:12:02 -0400 Subject: [PATCH 3/4] Improve animations --- .../assets/css/components/_animations.scss | 17 +++++++++++------ .../assets/css/components/_tile.scss | 2 +- apps/block_scout_web/assets/js/pages/block.js | 3 +-- apps/block_scout_web/assets/js/pages/chain.js | 8 ++++---- .../templates/chain/show.html.eex | 3 ++- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/apps/block_scout_web/assets/css/components/_animations.scss b/apps/block_scout_web/assets/css/components/_animations.scss index b8fb3d1db4..8482511b94 100644 --- a/apps/block_scout_web/assets/css/components/_animations.scss +++ b/apps/block_scout_web/assets/css/components/_animations.scss @@ -8,10 +8,17 @@ 0% { flex-basis: 0%; width: 0%; + opacity: 0; + overflow-x: hidden; } 50% { + opacity: 0; + } + 100% { flex-basis: 25%; width: 25%; + opacity: 1; + overflow-x: auto; } } @@ -24,10 +31,8 @@ opacity: 0; transform: translateY(10px) scale(0.97); } - 50% { - height: 100px; - } 100% { + height: 100%; opacity: 1; transform: translateY(0) scale(1); } @@ -50,11 +55,11 @@ .fade-up-blocks-chain { will-change: transform, opacity, width; - max-height: 98px; - animation: fade-up-blocks-chain 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955); + white-space: nowrap; + animation: fade-up-blocks-chain 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); @include media-breakpoint-down(md) { - animation: none; + animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955); } } diff --git a/apps/block_scout_web/assets/css/components/_tile.scss b/apps/block_scout_web/assets/css/components/_tile.scss index 2d6e0c0f38..15805103f0 100644 --- a/apps/block_scout_web/assets/css/components/_tile.scss +++ b/apps/block_scout_web/assets/css/components/_tile.scss @@ -11,7 +11,7 @@ margin-top: 1rem; } - @media (max-width: 767.98px) { + @include media-breakpoint-down(md) { margin-bottom: 1rem; } diff --git a/apps/block_scout_web/assets/js/pages/block.js b/apps/block_scout_web/assets/js/pages/block.js index 1ff04f7225..9201d738db 100644 --- a/apps/block_scout_web/assets/js/pages/block.js +++ b/apps/block_scout_web/assets/js/pages/block.js @@ -110,12 +110,11 @@ if ($blockListPage.length) { function placeHolderBlock (blockNumber) { return ` -
+