diff --git a/app/ionic.config.json b/app/ionic.config.json index 9ffab3a..b8b1ec4 100644 --- a/app/ionic.config.json +++ b/app/ionic.config.json @@ -1,12 +1,14 @@ { - "name": "insight-ui", + "name": "insight", "app_id": "", "type": "ionic-angular", "integrations": { "cordova": {} }, - "proxies": [{ - "path": "/api", - "proxyUrl": "https://bch-insight.bitpay.com/api" - }] + "proxies": [ + { + "path": "/api", + "proxyUrl": "https://bch-insight.bitpay.com/api" + } + ] } diff --git a/app/src/app/app.component.ts b/app/src/app/app.component.ts index f089c75..9b683c0 100644 --- a/app/src/app/app.component.ts +++ b/app/src/app/app.component.ts @@ -1,20 +1,19 @@ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild } from '@angular/core'; import { Platform, MenuController, Nav } from 'ionic-angular'; -import { StatusBar } from '@ionic-native/status-bar'; -import { SplashScreen } from '@ionic-native/splash-screen'; +import { StatusBar } from '@ionic-native/status-bar'; +import { SplashScreen } from '@ionic-native/splash-screen'; import { HomePage, BlocksPage, - BroadcastTxPage, - NodeStatusPage, - VerifyMessagePage + BroadcastTxPage + // NodeStatusPage, + // VerifyMessagePage } from '../pages'; @Component({ templateUrl: './app.html' }) export class InsightApp { - @ViewChild(Nav) public nav: Nav; private menu: MenuController; @@ -23,10 +22,14 @@ export class InsightApp { private status: StatusBar; public rootPage: any; - public pages: Array<{ title: string, component: any }>; - - constructor(platform: Platform, menu: MenuController, splash: SplashScreen, status: StatusBar) { + public pages: Array<{ title: string; component: any }>; + constructor( + platform: Platform, + menu: MenuController, + splash: SplashScreen, + status: StatusBar + ) { this.menu = menu; this.platform = platform; this.splash = splash; @@ -39,9 +42,9 @@ export class InsightApp { this.pages = [ { title: 'Home', component: HomePage }, { title: 'Blocks', component: BlocksPage }, - { title: 'Broadcast Transaction', component: BroadcastTxPage }, - { title: 'Verify Signed Message', component: VerifyMessagePage }, - { title: 'Node Status', component: NodeStatusPage } + { title: 'Broadcast Transaction', component: BroadcastTxPage } + // { title: 'Verify Signed Message', component: VerifyMessagePage }, + // { title: 'Node Status', component: NodeStatusPage } ]; } diff --git a/app/src/app/app.scss b/app/src/app/app.scss index 28da551..8129a84 100644 --- a/app/src/app/app.scss +++ b/app/src/app/app.scss @@ -1,6 +1,5 @@ // http://ionicframework.com/docs/v2/theming/ - // App Global Sass // -------------------------------------------------- // Put style rules here that you want to apply globally. These @@ -12,6 +11,10 @@ body { user-select: text; } +a { + cursor: pointer; +} + .ellipsis { display: block; overflow: hidden; @@ -19,20 +22,29 @@ body { white-space: nowrap; } +.item-hash { + @extend .ellipsis; + opacity: 0.7; +} + .list--summary { ion-label { - color: #333; + color: #334; font-weight: bold; } ion-item { - color: #999; + color: #99a; font-size: 1.125rem; + @media screen and (min-width: $desktop-min-width) { + font-size: 1.4rem; + } + padding: 0; } ion-note { - color: #999; - max-width: 50%; + color: #99a; + max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -42,25 +54,28 @@ body { .grid--table { margin: 10px 0 20px; + .col { + padding: 1em 0.6em; + } + ion-row { - border-top: 1px solid #ccc; + border-top: 1px solid #dde; &:first-child { - background-color: white; + background-color: #fff; border-top: none; } &:nth-child(even) { - background-color: #f4f4f4; + background-color: #f8f8f9; } &:last-child { - background-color: white; + background-color: #fff; } } } - // Shared Sass variables, which can be used to adjust Ionic's // default Sass variables, belong in "theme/variables.scss". // diff --git a/app/src/components/head-nav/head-nav.html b/app/src/components/head-nav/head-nav.html index c439265..07bbd27 100644 --- a/app/src/components/head-nav/head-nav.html +++ b/app/src/components/head-nav/head-nav.html @@ -1,11 +1,12 @@ - + {{title}} @@ -8,24 +8,26 @@ -
- - -

This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.

- +
+ + + +

This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.

+ - - Raw transaction data - - + + Raw transaction data + + - -

Raw transaction data must be a valid hexadecimal string.

- + +

Raw transaction data must be a valid hexadecimal string.

+ - - - - - - + + + + + +
+
 \ No newline at end of file diff --git a/app/src/pages/home/home.html b/app/src/pages/home/home.html index 029561b..27202c9 100644 --- a/app/src/pages/home/home.html +++ b/app/src/pages/home/home.html @@ -5,37 +5,43 @@ Ionic pages and navigation. --> - + +
-
-

Latest Blocks

- -
+
+

Latest Blocks

+ +
- -
-

About

-

insight is an open-source Bitcoin blockchain explorer with complete REST and websocket APIs that can be used for writing web wallets and other apps that need more advanced blockchain queries than provided by bitcoind RPC. Check out the source code.

-

insight is still in development, so be sure to report any bugs and provide feedback for improvement at our github issue tracker.

-
-
- Powered by + + +
+

+ Insight is an open-source Bitcoin blockchain explorer developed by + BitPay. Insight also provides a complete REST and websocket API, giving developers access to more advanced blockchain + queries than those provided by many Bitcoin node implementations.

+

+ The Insight project is available + on GitHub.

+
+
+ Powered by +
+ + + +
- - - -
- + \ No newline at end of file diff --git a/app/src/pages/home/home.scss b/app/src/pages/home/home.scss index 91b4923..f2cacc3 100644 --- a/app/src/pages/home/home.scss +++ b/app/src/pages/home/home.scss @@ -1,6 +1,17 @@ page-home { + @media screen and (min-width: 768px) { + .latest-blocks { + width: 68%; + display: inline-block; + } + .about { + width: 30%; + float: right; + } + } + .about { - background-color: #F4F4F4; + background-color: #f4f4f4; border: 1px solid #eee; border-radius: 5px; padding: 14px; @@ -36,7 +47,7 @@ page-home { background-size: 80px; width: 30%; } - #powered a.angularjs { + #powered a.angular { background-image: url('../../assets/img/angularjs.png'); background-size: 50px; width: 20%; @@ -46,5 +57,4 @@ page-home { background-size: 50px; width: 20%; } - } diff --git a/app/src/pages/nodeStatusPage/nodeStatusPage.html b/app/src/pages/nodeStatusPage/nodeStatusPage.html index 52424bc..68df7da 100644 --- a/app/src/pages/nodeStatusPage/nodeStatusPage.html +++ b/app/src/pages/nodeStatusPage/nodeStatusPage.html @@ -1,5 +1,5 @@ - + @@ -8,5 +8,7 @@ -

Node Status

- +
+

Node Status

+
+ \ No newline at end of file diff --git a/app/src/pages/pages.scss b/app/src/pages/pages.scss new file mode 100644 index 0000000..c78882c --- /dev/null +++ b/app/src/pages/pages.scss @@ -0,0 +1,15 @@ +.page-content { + max-width: 1280px; + margin-left: auto; + margin-right: auto; +} + +@media screen and (min-width: $desktop-min-width) { + .page-content { + margin-top: 1.5em; + } + + ion-navbar.toolbar-md { + padding: 4px calc((100vw - 1244px) / 2) 4px calc((100vw - 1332px) / 2); + } +} diff --git a/app/src/pages/transaction/transaction.html b/app/src/pages/transaction/transaction.html index 9b922cc..ed5da82 100644 --- a/app/src/pages/transaction/transaction.html +++ b/app/src/pages/transaction/transaction.html @@ -7,9 +7,10 @@
-
+

Transaction

-

Transaction {{ tx.txid }}

+

+ Transaction Hash {{ tx.txid }}

Summary

@@ -45,4 +46,4 @@
- + \ No newline at end of file diff --git a/app/src/pages/verifyMessagePage/verifyMessagePage.html b/app/src/pages/verifyMessagePage/verifyMessagePage.html index d827d74..e3d82a9 100644 --- a/app/src/pages/verifyMessagePage/verifyMessagePage.html +++ b/app/src/pages/verifyMessagePage/verifyMessagePage.html @@ -1,5 +1,5 @@ - + @@ -8,31 +8,33 @@ - - -

Bitcoin comes with a way of signing arbitrary messages.

+
-

This form can be used to verify that a message comes from a specific Bitcoin address.

- + + +

Bitcoin comes with a way of signing arbitrary messages.

- - Address - - +

This form can be used to verify that a message comes from a specific Bitcoin address.

+ - - Signature - - + + Address + + - - Message - - + + Signature + + - - - - + + Message + + - + + + + +
+ \ No newline at end of file diff --git a/app/src/theme/variables.scss b/app/src/theme/variables.scss index 5b3925d..52f351e 100644 --- a/app/src/theme/variables.scss +++ b/app/src/theme/variables.scss @@ -1,9 +1,8 @@ // Ionic Variables and Theming. For more info, please see: // http://ionicframework.com/docs/v2/theming/ -$font-path: "../assets/fonts"; - -@import "ionic.globals"; +$font-path: '../assets/fonts'; +@import 'ionic.globals'; // Shared Variables // -------------------------------------------------- @@ -12,9 +11,6 @@ $font-path: "../assets/fonts"; // To view all the possible Ionic variables, see: // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ - - - // Named Color Variables // -------------------------------------------------- // Named colors makes it easy to reuse colors on various components. @@ -24,35 +20,27 @@ $font-path: "../assets/fonts"; // The "primary" color is the only required color in the map. $colors: ( - primary: #8dc429, - secondary: #32db64, - danger: #f53d3d, - light: #f4f4f4, - dark: #373D42 + brand: #8dc429, + primary: #2fa4d7, + secondary: #8dc429, + danger: #f53d3d, + warning: #ffa400, + light: #f4f4f4, + dark: #373d42 ); - // App iOS Variables // -------------------------------------------------- // iOS only Sass variables can go here - - - // App Material Design Variables // -------------------------------------------------- // Material Design only Sass variables can go here - - - // App Windows Variables // -------------------------------------------------- // Windows only Sass variables can go here - - - // App Theme // -------------------------------------------------- // Ionic apps can have different themes applied, which can @@ -60,19 +48,25 @@ $colors: ( // so that the above variables are used and Ionic's // default are overridden. -@import "ionic.theme.default"; +@import 'ionic.theme.default'; +$chip-ios-background-color: rgba(0, 0, 0, 0.06); +$chip-md-background-color: rgba(0, 0, 0, 0.06); +$chip-wp-background-color: rgba(0, 0, 0, 0.06); // Ionicons // -------------------------------------------------- // The premium icon font for Ionic. For more info, please see: // http://ionicframework.com/docs/v2/ionicons/ -@import "ionic.ionicons"; - +@import 'ionic.ionicons'; // Fonts // -------------------------------------------------- -@import "roboto"; -@import "noto-sans"; +@import 'roboto'; +@import 'noto-sans'; + +// Other globals + +$desktop-min-width: 1288px;