diff --git a/apps/explorer/package-lock.json b/apps/explorer/package-lock.json index 8a22b61075..1ccf79e763 100644 --- a/apps/explorer/package-lock.json +++ b/apps/explorer/package-lock.json @@ -18,7 +18,7 @@ "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", "requires": { - "balanced-match": "^1.0.0", + "balanced-match": "1.0.0", "concat-map": "0.0.1" } }, @@ -37,9 +37,9 @@ "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz", "integrity": "sha1-EgYBU3qRbSmUD5NNo7SNWFo5IT0=", "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1", - "wrap-ansi": "^2.0.0" + "string-width": "1.0.2", + "strip-ansi": "3.0.1", + "wrap-ansi": "2.1.0" } }, "code-point-at": { @@ -62,7 +62,7 @@ "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", "requires": { - "is-arrayish": "^0.2.1" + "is-arrayish": "0.2.1" } }, "find-up": { @@ -70,8 +70,8 @@ "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz", "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=", "requires": { - "path-exists": "^2.0.0", - "pinkie-promise": "^2.0.0" + "path-exists": "2.1.0", + "pinkie-promise": "2.0.1" } }, "fs-extra": { @@ -79,11 +79,11 @@ "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.30.0.tgz", "integrity": "sha1-8jP/zAjU2n1DLapEl3aYnbHfk/A=", "requires": { - "graceful-fs": "^4.1.2", - "jsonfile": "^2.1.0", - "klaw": "^1.0.0", - "path-is-absolute": "^1.0.0", - "rimraf": "^2.2.8" + "graceful-fs": "4.1.11", + "jsonfile": "2.4.0", + "klaw": "1.3.1", + "path-is-absolute": "1.0.1", + "rimraf": "2.6.2" } }, "fs.realpath": { @@ -101,12 +101,12 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" + "fs.realpath": "1.0.0", + "inflight": "1.0.6", + "inherits": "2.0.3", + "minimatch": "3.0.4", + "once": "1.4.0", + "path-is-absolute": "1.0.1" } }, "graceful-fs": { @@ -124,8 +124,8 @@ "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", "requires": { - "once": "^1.3.0", - "wrappy": "1" + "once": "1.4.0", + "wrappy": "1.0.2" } }, "inherits": { @@ -148,7 +148,7 @@ "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "requires": { - "builtin-modules": "^1.0.0" + "builtin-modules": "1.1.1" } }, "is-fullwidth-code-point": { @@ -156,7 +156,7 @@ "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", "requires": { - "number-is-nan": "^1.0.0" + "number-is-nan": "1.0.1" } }, "is-utf8": { @@ -169,7 +169,7 @@ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz", "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=", "requires": { - "graceful-fs": "^4.1.6" + "graceful-fs": "4.1.11" } }, "klaw": { @@ -177,7 +177,7 @@ "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz", "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=", "requires": { - "graceful-fs": "^4.1.9" + "graceful-fs": "4.1.11" } }, "lcid": { @@ -185,7 +185,7 @@ "resolved": "https://registry.npmjs.org/lcid/-/lcid-1.0.0.tgz", "integrity": "sha1-MIrMr6C8SDo4Z7S28rlQYlHRuDU=", "requires": { - "invert-kv": "^1.0.0" + "invert-kv": "1.0.0" } }, "load-json-file": { @@ -193,11 +193,11 @@ "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "requires": { - "graceful-fs": "^4.1.2", - "parse-json": "^2.2.0", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0", - "strip-bom": "^2.0.0" + "graceful-fs": "4.1.11", + "parse-json": "2.2.0", + "pify": "2.3.0", + "pinkie-promise": "2.0.1", + "strip-bom": "2.0.0" } }, "lodash.assign": { @@ -215,7 +215,7 @@ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", "requires": { - "brace-expansion": "^1.1.7" + "brace-expansion": "1.1.11" } }, "normalize-package-data": { @@ -223,10 +223,10 @@ "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.4.0.tgz", "integrity": "sha512-9jjUFbTPfEy3R/ad/2oNbKtW9Hgovl5O1FvFWKkKblNXoN/Oou6+9+KKohPK13Yc3/TyunyWhJp6gvRNR/PPAw==", "requires": { - "hosted-git-info": "^2.1.4", - "is-builtin-module": "^1.0.0", - "semver": "2 || 3 || 4 || 5", - "validate-npm-package-license": "^3.0.1" + "hosted-git-info": "2.6.1", + "is-builtin-module": "1.0.0", + "semver": "5.5.0", + "validate-npm-package-license": "3.0.3" } }, "number-is-nan": { @@ -239,7 +239,7 @@ "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=", "requires": { - "wrappy": "1" + "wrappy": "1.0.2" } }, "os-locale": { @@ -247,7 +247,7 @@ "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz", "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=", "requires": { - "lcid": "^1.0.0" + "lcid": "1.0.0" } }, "parse-json": { @@ -255,7 +255,7 @@ "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-2.2.0.tgz", "integrity": "sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=", "requires": { - "error-ex": "^1.2.0" + "error-ex": "1.3.2" } }, "path-exists": { @@ -263,7 +263,7 @@ "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz", "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=", "requires": { - "pinkie-promise": "^2.0.0" + "pinkie-promise": "2.0.1" } }, "path-is-absolute": { @@ -276,9 +276,9 @@ "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz", "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=", "requires": { - "graceful-fs": "^4.1.2", - "pify": "^2.0.0", - "pinkie-promise": "^2.0.0" + "graceful-fs": "4.1.11", + "pify": "2.3.0", + "pinkie-promise": "2.0.1" } }, "pify": { @@ -296,7 +296,7 @@ "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz", "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=", "requires": { - "pinkie": "^2.0.0" + "pinkie": "2.0.4" } }, "read-pkg": { @@ -304,9 +304,9 @@ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=", "requires": { - "load-json-file": "^1.0.0", - "normalize-package-data": "^2.3.2", - "path-type": "^1.0.0" + "load-json-file": "1.1.0", + "normalize-package-data": "2.4.0", + "path-type": "1.1.0" } }, "read-pkg-up": { @@ -314,8 +314,8 @@ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz", "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=", "requires": { - "find-up": "^1.0.0", - "read-pkg": "^1.0.0" + "find-up": "1.1.2", + "read-pkg": "1.1.0" } }, "require-directory": { @@ -338,7 +338,7 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz", "integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==", "requires": { - "glob": "^7.0.5" + "glob": "7.1.2" } }, "semver": { @@ -356,11 +356,11 @@ "resolved": "https://registry.npmjs.org/solc-js/-/solc-js-0.4.20.tgz", "integrity": "sha1-tjCVsPcatkx6fi+C7YUtCzUxTlg=", "requires": { - "fs-extra": "^0.30.0", - "memorystream": "^0.3.1", - "require-from-string": "^1.1.0", - "semver": "^5.3.0", - "yargs": "^4.7.1" + "fs-extra": "0.30.0", + "memorystream": "0.3.1", + "require-from-string": "1.2.1", + "semver": "5.5.0", + "yargs": "4.8.1" } }, "spdx-correct": { @@ -368,8 +368,8 @@ "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz", "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==", "requires": { - "spdx-expression-parse": "^3.0.0", - "spdx-license-ids": "^3.0.0" + "spdx-expression-parse": "3.0.0", + "spdx-license-ids": "3.0.0" } }, "spdx-exceptions": { @@ -382,8 +382,8 @@ "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", "requires": { - "spdx-exceptions": "^2.1.0", - "spdx-license-ids": "^3.0.0" + "spdx-exceptions": "2.1.0", + "spdx-license-ids": "3.0.0" } }, "spdx-license-ids": { @@ -396,9 +396,9 @@ "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" + "code-point-at": "1.1.0", + "is-fullwidth-code-point": "1.0.0", + "strip-ansi": "3.0.1" } }, "strip-ansi": { @@ -406,7 +406,7 @@ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=", "requires": { - "ansi-regex": "^2.0.0" + "ansi-regex": "2.1.1" } }, "strip-bom": { @@ -414,7 +414,7 @@ "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz", "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=", "requires": { - "is-utf8": "^0.2.0" + "is-utf8": "0.2.1" } }, "validate-npm-package-license": { @@ -422,8 +422,8 @@ "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz", "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==", "requires": { - "spdx-correct": "^3.0.0", - "spdx-expression-parse": "^3.0.0" + "spdx-correct": "3.0.0", + "spdx-expression-parse": "3.0.0" } }, "which-module": { @@ -441,8 +441,8 @@ "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1" + "string-width": "1.0.2", + "strip-ansi": "3.0.1" } }, "wrappy": { @@ -460,20 +460,20 @@ "resolved": "https://registry.npmjs.org/yargs/-/yargs-4.8.1.tgz", "integrity": "sha1-wMQpJMpKqmsObaFznfshZDn53cA=", "requires": { - "cliui": "^3.2.0", - "decamelize": "^1.1.1", - "get-caller-file": "^1.0.1", - "lodash.assign": "^4.0.3", - "os-locale": "^1.4.0", - "read-pkg-up": "^1.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^1.0.1", - "set-blocking": "^2.0.0", - "string-width": "^1.0.1", - "which-module": "^1.0.0", - "window-size": "^0.2.0", - "y18n": "^3.2.1", - "yargs-parser": "^2.4.1" + "cliui": "3.2.0", + "decamelize": "1.2.0", + "get-caller-file": "1.0.2", + "lodash.assign": "4.2.0", + "os-locale": "1.4.0", + "read-pkg-up": "1.0.1", + "require-directory": "2.1.1", + "require-main-filename": "1.0.1", + "set-blocking": "2.0.0", + "string-width": "1.0.2", + "which-module": "1.0.0", + "window-size": "0.2.0", + "y18n": "3.2.1", + "yargs-parser": "2.4.1" } }, "yargs-parser": { @@ -481,8 +481,8 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-2.4.1.tgz", "integrity": "sha1-hVaN488VD/SfpRgl8DqMiA3cxcQ=", "requires": { - "camelcase": "^3.0.0", - "lodash.assign": "^4.0.6" + "camelcase": "3.0.0", + "lodash.assign": "4.2.0" } } } diff --git a/apps/explorer_web/assets/css/_layout.scss b/apps/explorer_web/assets/css/_layout.scss index fe21d3d162..7431c01404 100644 --- a/apps/explorer_web/assets/css/_layout.scss +++ b/apps/explorer_web/assets/css/_layout.scss @@ -5,5 +5,6 @@ main { flex-grow: 1; + background-color: #FBFAFC; } } diff --git a/apps/explorer_web/assets/css/_tooltip.scss b/apps/explorer_web/assets/css/_tooltip.scss index e69de29bb2..a660e7c4ea 100644 --- a/apps/explorer_web/assets/css/_tooltip.scss +++ b/apps/explorer_web/assets/css/_tooltip.scss @@ -0,0 +1,3 @@ +.tooltip { + min-width: 100px; +} diff --git a/apps/explorer_web/assets/css/_typography.scss b/apps/explorer_web/assets/css/_typography.scss index 4aa0c3eb48..7eccd5063a 100644 --- a/apps/explorer_web/assets/css/_typography.scss +++ b/apps/explorer_web/assets/css/_typography.scss @@ -4,19 +4,18 @@ body { } h1 { - font-size: 18px; - font-family: $font-family-sans-serif; - font-weight: 600; + font-size: 26px; + font-weight: 200; } h2 { font-size: 18px; - font-weight: 300; + font-weight: 200; } h3 { - font-size: 15px; - font-weight: 500; + font-size: 14px; + font-weight: 600; } h4 { diff --git a/apps/explorer_web/assets/css/app.scss b/apps/explorer_web/assets/css/app.scss index 1ce1e0fc87..668ff54d93 100644 --- a/apps/explorer_web/assets/css/app.scss +++ b/apps/explorer_web/assets/css/app.scss @@ -42,6 +42,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "node_modules/bootstrap/scss/card"; @import "node_modules/bootstrap/scss/forms"; @import "node_modules/bootstrap/scss/tooltip"; +@import "node_modules/bootstrap/scss/badge"; +@import "node_modules/bootstrap/scss/alert"; //Custom theme @import "theme/fonts"; @@ -66,6 +68,8 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts"; @import "components/card"; @import "components/tile"; @import "components/dashboard-banner"; +@import "components/icon-link"; +@import "components/badge"; :export { diff --git a/apps/explorer_web/assets/css/components/_badge.scss b/apps/explorer_web/assets/css/components/_badge.scss new file mode 100644 index 0000000000..7f32acab9a --- /dev/null +++ b/apps/explorer_web/assets/css/components/_badge.scss @@ -0,0 +1,3 @@ +.badge { + color: $white; +} diff --git a/apps/explorer_web/assets/css/components/_card.scss b/apps/explorer_web/assets/css/components/_card.scss index f4d99cf739..ffe710723e 100644 --- a/apps/explorer_web/assets/css/components/_card.scss +++ b/apps/explorer_web/assets/css/components/_card.scss @@ -4,3 +4,20 @@ border-radius: 0; margin-bottom: 3rem; } + +.card-header { + background-color: $white; + + &-tabs { + margin: (-$card-spacer-y) (-$card-spacer-x); + } +} + +.card-title { + line-height: 2.2rem; + margin-bottom: 2rem; +} + +.card-body { + padding: 2.25rem 1.25rem; +} diff --git a/apps/explorer_web/assets/css/components/_dashboard-banner.scss b/apps/explorer_web/assets/css/components/_dashboard-banner.scss index 5f0d2fad90..14a4031eb4 100644 --- a/apps/explorer_web/assets/css/components/_dashboard-banner.scss +++ b/apps/explorer_web/assets/css/components/_dashboard-banner.scss @@ -1,5 +1,6 @@ .dashboard-banner-container { position: relative; + margin-top: -3rem; background-color: $white; box-shadow: 0 5px 40px -5px rgba($black, 0.25); diff --git a/apps/explorer_web/assets/css/components/_footer.scss b/apps/explorer_web/assets/css/components/_footer.scss index f0507ef11b..1f6a3ccc1d 100644 --- a/apps/explorer_web/assets/css/components/_footer.scss +++ b/apps/explorer_web/assets/css/components/_footer.scss @@ -23,35 +23,13 @@ $footer-text-color: rgba($white, 0.7); position: relative; } -.footer .social-links { +.footer .icon-links { position: absolute; right: 0; - display: flex; - flex-direction: row; - align-items: center; @media (max-width: 768px) { position: static; justify-content: center; margin-bottom: 5px; } - - & > a { - display: flex; - align-items: center; - justify-content: center; - width: $social-link-size; - height: $social-link-size; - margin: 0 $footer-padding; - color: $footer-text-color; - background-color: rgba($white, 0.25); - border-radius: 50%; - transition: all 0.1s ease; - - &:hover { - background-color: $white; - color: $primary; - text-decoration: none; - } - } } diff --git a/apps/explorer_web/assets/css/components/_icon-link.scss b/apps/explorer_web/assets/css/components/_icon-link.scss new file mode 100644 index 0000000000..9622bc20c7 --- /dev/null +++ b/apps/explorer_web/assets/css/components/_icon-link.scss @@ -0,0 +1,39 @@ +.icon-links { + display: flex; + flex-direction: row; + align-items: center; + + .icon-link { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + margin: 0 .25rem; + color: $text-muted; + background-color: $gray-200; + border: none; + border-radius: 50%; + cursor: pointer; + transition: all 0.1s ease; + + &:hover { + background-color: $primary; + color: $white; + text-decoration: none; + } + } + + &.icon-links-primary { + + .icon-link { + color: $footer-text-color; + background-color: rgba($white, 0.25); + + &:hover { + background-color: $white; + color: $primary; + } + } + } +} diff --git a/apps/explorer_web/assets/css/components/_nav_tabs.scss b/apps/explorer_web/assets/css/components/_nav_tabs.scss index defa2022e9..d52ddd23c0 100644 --- a/apps/explorer_web/assets/css/components/_nav_tabs.scss +++ b/apps/explorer_web/assets/css/components/_nav_tabs.scss @@ -1,8 +1,31 @@ .nav-tabs { - border-bottom: none; .nav-link { - border-color: $border-color $border-color $border-color; - margin-right: 5px; + padding: 1.25rem 3rem; + color: $text-muted; + font-size: 14px; + border-top-left-radius: 0; + border-top-right-radius: 0; + + &:hover { + color: $primary; + } + + &.active { + color: $white; + background-color: $primary; + border-color: $primary; + } + + &:hover { + border-color: transparent; + } } } + + +.nav-tabs .nav-item.show .nav-link { + color: $white; + background-color: darken($primary, 10%); + border-color: darken($primary, 10%); +} diff --git a/apps/explorer_web/assets/css/components/_navbar.scss b/apps/explorer_web/assets/css/components/_navbar.scss index ad300ee2f5..c86440b913 100644 --- a/apps/explorer_web/assets/css/components/_navbar.scss +++ b/apps/explorer_web/assets/css/components/_navbar.scss @@ -1,3 +1,8 @@ +.navbar { + position: relative; + z-index: 10; +} + .navbar-logo { height: 36px; } @@ -9,6 +14,10 @@ } } +.navbar .nav-item { + font-size: 14px; +} + .navbar .nav-link { color: $white; } @@ -47,23 +56,21 @@ content: ""; position: absolute; display: block; - bottom: -0.25rem; + bottom: 0; left: 50%; - width: 0.25rem; - height: 0.25rem; + width: 100%; + height: 0.2rem; background-color: $white; opacity: 0; - transform: translateX(-50%); - transition: bottom 0.2s ease-in, opacity 0.2s ease, width 0.2s 0.3s ease-in-out, height 0.3s 0.1s ease-in-out; + transform: translateX(-50%) translateY(-0.5rem); + transition: all 0.3s ease; } &:hover { color: $white; &:before { - bottom: 0.25rem; - width: 100%; - height: 0.1rem; + transform: translateX(-50%) translateY(-0.25rem); opacity: 1; } } @@ -71,8 +78,8 @@ &:active { &:before { - width: 80%; - transition: width 0.1s ease; + transition: all 0.1s ease-out; + transform: translateX(-50%) translateY(-0.5rem); } } } diff --git a/apps/explorer_web/assets/css/components/_qr-code.scss b/apps/explorer_web/assets/css/components/_qr-code.scss index 5323908d28..5ef2394f06 100644 --- a/apps/explorer_web/assets/css/components/_qr-code.scss +++ b/apps/explorer_web/assets/css/components/_qr-code.scss @@ -3,5 +3,4 @@ margin-right: auto; margin-left: auto; width: 100%; - max-width: 60px; } diff --git a/apps/explorer_web/assets/css/components/_tile.scss b/apps/explorer_web/assets/css/components/_tile.scss index f795b4c652..487ca355d5 100644 --- a/apps/explorer_web/assets/css/components/_tile.scss +++ b/apps/explorer_web/assets/css/components/_tile.scss @@ -7,7 +7,7 @@ border-left: 4px solid $primary; border-radius: 2px; padding: 1rem; - box-shadow: 0 2px 5px rgba($black, 0.15); + box-shadow: 0 1px 5px rgba($black, 0.15); & + & { margin-top: 1rem; @@ -22,7 +22,7 @@ &-transaction { border-left: 4px solid $blue; - .tile-label { + .tile-label, .tile-text-highlight { color: $blue; } } @@ -30,7 +30,7 @@ &-contract { border-left: 4px solid $green; - .tile-label { + .tile-label, .tile-text-highlight { color: $green; } } @@ -38,7 +38,7 @@ &-contract-creation { border-left: 4px solid $pink; - .tile-label { + .tile-label, .tile-text-highlight { color: $pink; } } @@ -46,10 +46,18 @@ &-token { border-left: 4px solid $orange; - .tile-label { + .tile-label, .tile-text-highlight { color: $orange; } } + + &-internal-transaction { + border-left: 4px solid $teal; + + .tile-label, .tile-text-highlight { + color: $teal; + } + } } .tile-title { @@ -60,3 +68,18 @@ display: block; } } + +.tile-badge { + margin-bottom: 0.1rem; + padding: 0; + width: 2.5rem; + line-height: 1.25rem; + text-align: center; +} + +.tile-muted { + border-left: 1px solid $border-color; + background-color: $gray-100; + color: $text-muted; + box-shadow: none; +} diff --git a/apps/explorer_web/assets/css/theme/_poa_variables.scss b/apps/explorer_web/assets/css/theme/_poa_variables.scss index db6d94838b..b9571921bf 100644 --- a/apps/explorer_web/assets/css/theme/_poa_variables.scss +++ b/apps/explorer_web/assets/css/theme/_poa_variables.scss @@ -39,10 +39,10 @@ $indigo: #5b33a1 !default; $purple: #9987fc !default; $pink: #e83e8c !default; $red: #dc3545 !default; -$orange: #fd7e14 !default; +$orange: #ef9a60 !default; $yellow: #ffc107 !default; $green: #20b760 !default; -$teal: !default; +$teal: #009097 !default; $cyan: #90e1d8 !default; $colors: () !default; @@ -68,7 +68,7 @@ $success: $green !default; $info: $cyan !default; $warning: $orange !default; $danger: $red !default; -$light: $gray-100 !default; +$light: $gray-400 !default; $dark: $gray-800 !default; $theme-colors: () !default; @@ -208,7 +208,7 @@ $line-height-sm: 1.5 !default; $border-width: 1px !default; $border-color: $gray-300 !default; -$border-radius: .25rem !default; +$border-radius: .1rem !default; $border-radius-lg: .3rem !default; $border-radius-sm: .2rem !default; diff --git a/apps/explorer_web/lib/explorer_web/channels/address_channel.ex b/apps/explorer_web/lib/explorer_web/channels/address_channel.ex index 3831966e94..4c9b388c21 100644 --- a/apps/explorer_web/lib/explorer_web/channels/address_channel.ex +++ b/apps/explorer_web/lib/explorer_web/channels/address_channel.ex @@ -13,7 +13,7 @@ defmodule ExplorerWeb.AddressChannel do {:ok, %{}, socket} end - def handle_out("transaction", %{transaction: transaction}, socket) do + def handle_out("transaction", %{address: address, transaction: transaction}, socket) do Gettext.put_locale(ExplorerWeb.Gettext, socket.assigns.locale) rendered = @@ -21,6 +21,7 @@ defmodule ExplorerWeb.AddressChannel do AddressTransactionView, "_transaction.html", locale: socket.assigns.locale, + address: address, transaction: transaction ) diff --git a/apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex b/apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex index 10b980fa05..31c6f8abe8 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address/_link.html.eex @@ -1,11 +1,11 @@ <%= if @address_hash do %> - <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address_hash), "data-address-hash": @address_hash do %> + <%= link to: address_path(ExplorerWeb.Endpoint, :show, @locale, @address_hash), "data-address-hash": @address_hash, "data-test": "address_hash_link" do %> <%= if @contract do %> - <%= @address_hash %> - <%= @address_hash |> to_string() |> String.slice(0..5) %>–<%= @address_hash |> to_string() |> String.slice(-6..-1) %> + + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @address_hash %> + <% else %> - <%= @address_hash %> - <%= @address_hash |> to_string() |> String.slice(0..5) %>–<%= @address_hash |> to_string() |> String.slice(-6..-1) %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @address_hash %> <% end %> <% end %> <% end %> diff --git a/apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex b/apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex new file mode 100644 index 0000000000..5cda089ba4 --- /dev/null +++ b/apps/explorer_web/lib/explorer_web/templates/address/_responsive_hash.html.eex @@ -0,0 +1,2 @@ +<%= @address_hash %> +<%= @address_hash |> to_string() |> String.slice(0..5) %>–<%= @address_hash |> to_string() |> String.slice(-6..-1) %> diff --git a/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex index 7d608b0791..659922697c 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address/overview.html.eex @@ -1,27 +1,60 @@
-
-
-
-
- qr_code +
+
+
+
+
+ + + + + + +
+

<%= address_title(@address) %> Details

+

<%= @address %>

+
+ <%= Cldr.Number.to_string!(@transaction_count) %> <%= gettext "Transactions" %> +
-
-

<%= address_title(@address) %>

-

<%= @address %>

+
+
+
+

Balance

+ +
+

<%= balance(@address) %>

+ <%= formatted_usd(@address, @exchange_rate) %> +
+
+
+
-
-
-
-
- - <%= render "_values.html", address: @address, exchange_rate: @exchange_rate, transaction_count: @transaction_count %> -
-
+ + + diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex new file mode 100644 index 0000000000..50e96b91ed --- /dev/null +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex @@ -0,0 +1,31 @@ +
+
+
+ <%= gettext("Internal Transaction") %> +
+
+ <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %> + + <%= if @address.hash == @internal_transaction.from_address_hash do %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @internal_transaction.from_address_hash %> + <% else %> + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@internal_transaction.from_address), address_hash: @internal_transaction.from_address_hash %> + <% end %> + → + <%= if @address.hash == ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction) do %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction) %> + <% else %> + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@internal_transaction.to_address), address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction) %> + <% end %> + + <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> POA +
+
+ <%= if @address.hash == @internal_transaction.from_address_hash do %> + OUT + <% else %> + IN + <% end %> +
+
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex index 5a6796a62b..9b62af2122 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex @@ -1,11 +1,13 @@ -
+
<%= render ExplorerWeb.AddressView, "overview.html", assigns %>
-
    + + +
    • <%= link( gettext("Transactions"), @@ -35,6 +37,37 @@
      • <% end %>
    + + +
      +
    • + +
      + <%= link( + gettext("Transactions"), + class: "dropdown-item", + to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]) + ) %> + <%= link( + gettext("Internal Transactions"), + class: "dropdown-item", + "data-test": "internal_transactions_tab_link", + to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]) + ) %> + <%= if contract?(@address) do %> + <%= link( + to: address_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]), + class: "dropdown-item") do %> + <%= gettext("Code") %> + + <%= if smart_contract_verified?(@address) do %> + + <% end %> + <% end %> + <% end %> +
      +
      • +
@@ -75,52 +108,15 @@ ) %>
+

<%= gettext "Internal Transactions" %>

<%= if Enum.count(@internal_transactions) > 0 do %> - - - - - - - - - - <%= for internal_transaction <- @internal_transactions do %> - - - - - - - - - - - <% end %> -
<%= gettext "Parent Tx Hash" %><%= gettext "Block" %><%= gettext "Age" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)
- <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: internal_transaction.transaction_hash %> - - <%= link(internal_transaction.transaction.block, - to: block_path(@conn, :show, @conn.assigns.locale, internal_transaction.transaction.block) - ) %> - - <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(internal_transaction.from_address), address_hash: internal_transaction.from_address_hash %> - - <%= if ExplorerWeb.InternalTransactionView.create?(internal_transaction) do %> - - <%= link( - gettext("Contract Creation"), - class: "transaction__link", - "data-address-hash": internal_transaction.created_contract_address_hash, - to: address_path(ExplorerWeb.Endpoint, :show, @locale, internal_transaction.created_contract_address_hash), - title: internal_transaction.created_contract_address_hash - ) %> - <% else %> - <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(internal_transaction.to_address), address_hash: internal_transaction.to_address_hash %> - <% end %> - <%= ExplorerWeb.TransactionView.value(internal_transaction, include_label: false) %>
+ <%= for internal_transaction <- @internal_transactions do %> + <%= render "_internal_transaction.html", locale: @locale, address: @address, internal_transaction: internal_transaction %> + <% end %> <% else %> -

<%= gettext "There are no Internal Transactions" %>

+
+ <%= gettext "There are no internal transactions for this address." %> +
<% end %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex index 72a6e64d99..ac601cf664 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex @@ -1,35 +1,36 @@ - -
- - <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %> - - - <%= link( - @transaction.block, - to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) - ) %> - - - - <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), address_hash: @transaction.from_address_hash %> - - - - <%= cond do %> - <% @transaction.to_address_hash != nil -> %> - <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), address_hash: @transaction.to_address_hash %> - <% @transaction.created_contract_address_hash != nil -> %> - - <%= link( - gettext("Contract Creation"), - class: "transaction__link", - "data-address-hash": @transaction.created_contract_address_hash, - to: address_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.created_contract_address_hash), - title: @transaction.created_contract_address_hash - ) %> - <% true -> %> - <% end %> - - <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> - <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> - +
+
+
+ <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %> +
+
+ <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %> + + <%= if @address.hash == @transaction.from_address_hash do %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @transaction.from_address_hash %> + <% else %> + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), address_hash: @transaction.from_address_hash %> + <% end %> + → + <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction) %> + <% else %> + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction) %> + <% end %> + + <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> POA +
+
+ <%= if @address.hash == @transaction.from_address_hash do %> + OUT + <% else %> + IN + <% end %> + + <%= link( + gettext("Block #") <> "#{@transaction.block.number}", + to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) + ) %> +
+
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex index bdd4e75deb..146de72031 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex @@ -1,11 +1,13 @@ -
+
<%= render ExplorerWeb.AddressView, "overview.html", assigns %>
-
    + + +
    • <%= link( gettext("Transactions"), @@ -35,81 +37,99 @@
      • <% end %>
    + + +
      +
    • + +
      + <%= link( + gettext("Transactions"), + class: "dropdown-item", + to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]) + ) %> + <%= link( + gettext("Internal Transactions"), + class: "dropdown-item", + "data-test": "internal_transactions_tab_link", + to: address_internal_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]) + ) %> + <%= if contract?(@address) do %> + <%= link( + to: address_contract_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]), + class: "dropdown-item") do %> + <%= gettext("Code") %> + + <%= if smart_contract_verified?(@address) do %> + + <% end %> + <% end %> + <% end %> +
      +
      • +
+
- +
+ <%= gettext "More messages have come in" %> +
- +
+ <%= gettext "Connection Lost, click to load newer transactions" %> +
<%= link( - gettext("All"), - to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]), - class: "address__link address__link--active dropdown-item", - "data-test": "filter_option" - ) %> + gettext("All"), + to: address_transaction_path(@conn, :index, @conn.assigns.locale, @conn.params["address_id"]), + class: "address__link address__link--active dropdown-item", + "data-test": "filter_option" + ) %> <%= link( - gettext("To"), - to: address_transaction_path( - @conn, - :index, - @conn.assigns.locale, - @conn.params["address_id"], - filter: "to" - ), - class: "address__link address__link--active dropdown-item", - "data-test": "filter_option" - ) %> + gettext("To"), + to: address_transaction_path( + @conn, + :index, + @conn.assigns.locale, + @conn.params["address_id"], + filter: "to" + ), + class: "address__link address__link--active dropdown-item", + "data-test": "filter_option" + ) %> <%= link( - gettext("From"), - to: address_transaction_path( - @conn, - :index, - @conn.assigns.locale, - @conn.params["address_id"], - filter: "from" - ), - class: "address__link address__link--active dropdown-item", - "data-test": "filter_option" - ) %> + gettext("From"), + to: address_transaction_path( + @conn, + :index, + @conn.assigns.locale, + @conn.params["address_id"], + filter: "from" + ), + class: "address__link address__link--active dropdown-item", + "data-test": "filter_option" + ) %>
<%= if Enum.count(@transactions) > 0 do %> - - - - - - - - - - - - - - - - <%= for transaction <- @transactions do %> - <%= render "_transaction.html", locale: @locale, transaction: transaction %> - <% end %> - -
- <%= gettext "Status" %> - <%= gettext "Hash" %><%= gettext "Block" %><%= gettext "Age" %><%= gettext "From" %><%= gettext "To" %><%= gettext "Value" %> (<%= gettext "Ether" %>)<%= gettext "Fee" %>
+

<%= gettext "Transactions" %>

+ + <%= for transaction <- @transactions do %> + <%= render "_transaction.html", locale: @locale, address: @address, transaction: transaction %> + <% end %> + <% else %> -

<%= gettext "There are no Transactions" %>

+
+ <%= gettext "There are no transactions for this address." %> +
<% end %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex index 4454eaf609..bbb0ffdf42 100644 --- a/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/block_transaction/index.html.eex @@ -147,7 +147,7 @@ <%= for transaction <- @transactions do %> - +
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex index e8a0953b90..903b89d261 100644 --- a/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/chain/_transactions.html.eex @@ -3,7 +3,7 @@ <%= link(gettext("View All Transactions →"), to: transaction_path(@conn, :index, Gettext.get_locale), class: "button button--secondary button--xsmall float-right") %>

<%= gettext "Transactions" %>

<%= for transaction <- @chain.transactions do %> -
+
<%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %> @@ -13,7 +13,7 @@ <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), address_hash: transaction.from_address_hash %> → - <%= render ExplorerWeb.AddressView, "_link.html", ExplorerWeb.TransactionView.display_to_address(transaction, locale: @locale, contract: ExplorerWeb.AddressView.contract?(transaction.to_address)) %> + <%= render ExplorerWeb.AddressView, "_link.html", locale: @locale, contract: ExplorerWeb.AddressView.contract?(transaction.to_address), address_hash: ExplorerWeb.TransactionView.to_address_hash(transaction) %> <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> POA
diff --git a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex index 37938552be..f1494e4608 100644 --- a/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/layout/_footer.html.eex @@ -1,16 +1,16 @@