RanchiMall/flosight-api
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #889 from bitjson/next

Browse Source 
theme, polish for first release
This commit is contained in:
Jason Dreyzehner 2018-02-02 20:08:01 -05:00 committed by GitHub
commit feb5bdd9c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 360 additions and 243 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/ionic.config.json
View File

@ -1,12 +1,14 @@
{ {
"name": "insight-ui", "name": "insight",
"app_id": "", "app_id": "",
"type": "ionic-angular", "type": "ionic-angular",
"integrations": { "integrations": {
"cordova": {} "cordova": {}
}, },
"proxies": [{ "proxies": [
"path": "/api", {
"proxyUrl": "https://bch-insight.bitpay.com/api" "path": "/api",
}] "proxyUrl": "https://bch-insight.bitpay.com/api"
}
]
} }

29
app/src/app/app.component.ts
View File

@ -1,20 +1,19 @@
import { Component, ViewChild } from '@angular/core'; import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular'; import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar'; import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen'; import { SplashScreen } from '@ionic-native/splash-screen';
import { import {
HomePage, HomePage,
BlocksPage, BlocksPage,
BroadcastTxPage, BroadcastTxPage
NodeStatusPage, // NodeStatusPage,
VerifyMessagePage // VerifyMessagePage
} from '../pages'; } from '../pages';
@Component({ @Component({
templateUrl: './app.html' templateUrl: './app.html'
}) })
export class InsightApp { export class InsightApp {
@ViewChild(Nav) public nav: Nav; @ViewChild(Nav) public nav: Nav;
private menu: MenuController; private menu: MenuController;
@ -23,10 +22,14 @@ export class InsightApp {
private status: StatusBar; private status: StatusBar;
public rootPage: any; public rootPage: any;
public pages: Array<{ title: string, component: any }>; public pages: Array<{ title: string; component: any }>;
constructor(platform: Platform, menu: MenuController, splash: SplashScreen, status: StatusBar) {
constructor(
platform: Platform,
menu: MenuController,
splash: SplashScreen,
status: StatusBar
) {
this.menu = menu; this.menu = menu;
this.platform = platform; this.platform = platform;
this.splash = splash; this.splash = splash;
@ -39,9 +42,9 @@ export class InsightApp {
this.pages = [ this.pages = [
{ title: 'Home', component: HomePage }, { title: 'Home', component: HomePage },
{ title: 'Blocks', component: BlocksPage }, { title: 'Blocks', component: BlocksPage },
{ title: 'Broadcast Transaction', component: BroadcastTxPage }, { title: 'Broadcast Transaction', component: BroadcastTxPage }
{ title: 'Verify Signed Message', component: VerifyMessagePage }, // { title: 'Verify Signed Message', component: VerifyMessagePage },
{ title: 'Node Status', component: NodeStatusPage } // { title: 'Node Status', component: NodeStatusPage }
]; ];
} }

35
app/src/app/app.scss
View File

@ -1,6 +1,5 @@
// http://ionicframework.com/docs/v2/theming/ // http://ionicframework.com/docs/v2/theming/
// App Global Sass // App Global Sass
// -------------------------------------------------- // --------------------------------------------------
// Put style rules here that you want to apply globally. These // Put style rules here that you want to apply globally. These
@ -12,6 +11,10 @@ body {
user-select: text; user-select: text;
} }
a {
cursor: pointer;
}
.ellipsis { .ellipsis {
display: block; display: block;
overflow: hidden; overflow: hidden;
@ -19,20 +22,29 @@ body {
white-space: nowrap; white-space: nowrap;
} }
.item-hash {
@extend .ellipsis;
opacity: 0.7;
}
.list--summary { .list--summary {
ion-label { ion-label {
color: #333; color: #334;
font-weight: bold; font-weight: bold;
} }
ion-item { ion-item {
color: #999; color: #99a;
font-size: 1.125rem; font-size: 1.125rem;
@media screen and (min-width: $desktop-min-width) {
font-size: 1.4rem;
}
padding: 0;
} }
ion-note { ion-note {
color: #999; color: #99a;
max-width: 50%; max-width: 80%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -42,25 +54,28 @@ body {
.grid--table { .grid--table {
margin: 10px 0 20px; margin: 10px 0 20px;
.col {
padding: 1em 0.6em;
}
ion-row { ion-row {
border-top: 1px solid #ccc; border-top: 1px solid #dde;
&:first-child { &:first-child {
background-color: white; background-color: #fff;
border-top: none; border-top: none;
} }
&:nth-child(even) { &:nth-child(even) {
background-color: #f4f4f4; background-color: #f8f8f9;
} }
&:last-child { &:last-child {
background-color: white; background-color: #fff;
} }
} }
} }
// Shared Sass variables, which can be used to adjust Ionic's // Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss". // default Sass variables, belong in "theme/variables.scss".
// //

7
app/src/components/head-nav/head-nav.html
View File

@ -1,11 +1,12 @@
<ion-navbar color="primary"> <ion-navbar color="brand">
<button ion-button menuToggle> <button ion-button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
<ion-title>{{title}}</ion-title> <ion-title>{{title}}</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button (click)="changeCurrency($event)"> <button ion-button (click)="changeCurrency($event)">
<ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }} <ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon>
<ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }}
</button> </button>
<button ion-button icon-only (click)="toggleSearch()"> <button ion-button icon-only (click)="toggleSearch()">
<ion-icon name="search"></ion-icon> <ion-icon name="search"></ion-icon>
@ -15,4 +16,4 @@
<form (ngSubmit)="search($event)"> <form (ngSubmit)="search($event)">
<ion-searchbar [hidden]="!showSearch" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search"></ion-searchbar> <ion-searchbar [hidden]="!showSearch" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" name="search"></ion-searchbar>
</form> </form>

56
app/src/components/transaction/transaction.html
View File

@ -2,7 +2,11 @@
<ion-row> <ion-row>
<ion-col col-7> <ion-col col-7>
<div class="ellipsis"> <div class="ellipsis">
<ion-icon name="add-circle" [hidden]="expanded" (click)="toggleExpanded()"></ion-icon><ion-icon name="remove-circle" [hidden]="!expanded" (click)="toggleExpanded()"></ion-icon> <span><a (click)="goToTx(tx.txid)">{{ tx.txid }}</a></span> <ion-icon name="add-circle" [hidden]="expanded" (click)="toggleExpanded()"></ion-icon>
<ion-icon name="remove-circle" [hidden]="!expanded" (click)="toggleExpanded()"></ion-icon>
<span>
<a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>
</span>
</div> </div>
</ion-col> </ion-col>
<ion-col col-5 text-right> <ion-col col-5 text-right>
@ -12,7 +16,8 @@
</ion-note> </ion-note>
<ion-note [hidden]="!tx.blocktime && tx.firstSeenTs"> <ion-note [hidden]="!tx.blocktime && tx.firstSeenTs">
<span translate>mined</span> <span translate>mined</span>
<time>{{tx.time * 1000 | date:'MMM d, y'}}</time> <time>{{tx.time * 1000 | date:'hh:mm:ss a'}}</time> <time>{{tx.time * 1000 | date:'MMM d, y'}}</time>
<time>{{tx.time * 1000 | date:'hh:mm:ss a'}}</time>
</ion-note> </ion-note>
</ion-col> </ion-col>
</ion-row> </ion-row>
@ -30,15 +35,20 @@
<ion-item *ngFor="let vin of aggregateItems(tx.vin)"> <ion-item *ngFor="let vin of aggregateItems(tx.vin)">
<div> <div>
<div class="ellipsis"> <div class="ellipsis">
<p><a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a></p> <p>
<a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a>
</p>
</div> </div>
<div [hidden]="!expanded"> <div [hidden]="!expanded">
<p *ngIf="vin.confirmations"><b>Confirmations</b> {{vin.confirmations}}</p> <p *ngIf="vin.confirmations">
<p><b>scriptSig</b></p> <b>Confirmations</b> {{vin.confirmations}}</p>
<p>
<b>Unlocking Script</b>
</p>
<div *ngFor="let item of vin.items"> <div *ngFor="let item of vin.items">
<div *ngIf="item.scriptSig"> <div *ngIf="item.scriptSig">
<div *ngFor="let scriptSig of item.scriptSig.asm | split:' '"> <div *ngFor="let scriptSig of item.scriptSig.asm | split:' '">
<div class="ellipsis"> <div class="unlocking-script">
<p>{{ scriptSig }}</p> <p>{{ scriptSig }}</p>
</div> </div>
</div> </div>
@ -64,12 +74,19 @@
<ion-item *ngFor="let vout of tx.vout"> <ion-item *ngFor="let vout of tx.vout">
<div> <div>
<div class="ellipsis"> <div class="ellipsis">
<p><a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a></p> <p>
<a (click)="goToAddress(getAddress(vout))">{{ getAddress(vout) }}</a>
</p>
</div> </div>
<div [hidden]="!expanded"> <div [hidden]="!expanded">
<p><b>Type</b> {{vout.scriptPubKey.type}}</p> <p>
<p><b>scriptPubKey</b></p> <b>Script Template</b>
<div class="ellipsis"> <i>{{vout.scriptPubKey.type}}</i>
</p>
<p>
<b>Locking Script</b>
</p>
<div class="locking-script">
<p>{{vout.scriptPubKey.asm}}</p> <p>{{vout.scriptPubKey.asm}}</p>
</div> </div>
</div> </div>
@ -89,17 +106,26 @@
<ion-col col-6> <ion-col col-6>
<div [hidden]="tx.isCoinBase"> <div [hidden]="tx.isCoinBase">
<ion-chip> <ion-chip>
<ion-label>Fee <span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span></ion-label> <ion-label>Fee
<span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span>
</ion-label>
</ion-chip> </ion-chip>
</div> </div>
</ion-col> </ion-col>
<ion-col col-6 text-right> <ion-col col-6 text-right>
<ion-chip color="primary"> <ion-chip color="danger" *ngIf="tx.confirmations === 0">
<ion-label>{{ tx.confirmations | number }} Confirmation<span *ngIf="tx.confirmations !== 1">s</span></ion-label> <ion-label>Unconfirmed</ion-label>
</ion-chip> </ion-chip>
<ion-chip color="secondary"> <ion-chip color="warning" *ngIf="tx.confirmations === 1">
<ion-label>1 Confirmation</ion-label>
</ion-chip>
<ion-chip color="primary" *ngIf="tx.confirmations > 1">
<ion-label>{{ tx.confirmations | number }} Confirmations
</ion-label>
</ion-chip>
<ion-chip color="brand">
<ion-label>{{ currency.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currency.currencySymbol }}</ion-label> <ion-label>{{ currency.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currency.currencySymbol }}</ion-label>
</ion-chip> </ion-chip>
</ion-col> </ion-col>
</ion-row> </ion-row>
</ion-grid> </ion-grid>

42
app/src/components/transaction/transaction.scss
View File

@ -3,12 +3,12 @@ transaction {
// See http://ionicframework.com/docs/api/components/grid/Grid/#customizing-the-grid // See http://ionicframework.com/docs/api/components/grid/Grid/#customizing-the-grid
ion-grid { ion-grid {
background-color: #F4F4F4; background-color: #f7f7f7;
border: 1px solid #eee; border: 1px solid #f3f3f3;
border-radius: 2px; border-radius: 3px;
ion-row { ion-row {
border: 1px solid #eee; border: 1px solid #f3f3f3;
&.small { &.small {
font-size: 1.1rem; font-size: 1.1rem;
@ -22,19 +22,47 @@ transaction {
} }
} }
.item, .item p { ion-icon {
color: rgba(0, 0, 0, 0.25);
}
.item,
.item p {
font-size: 1.4rem; font-size: 1.4rem;
} }
$transaction-item-boarder-radius: 3px;
.item:first-of-type {
border-top-left-radius: $transaction-item-boarder-radius;
border-top-right-radius: $transaction-item-boarder-radius;
}
.item:last-of-type {
border-bottom-left-radius: $transaction-item-boarder-radius;
border-bottom-right-radius: $transaction-item-boarder-radius;
}
.list { .list {
margin-bottom: 5px margin-bottom: 5px;
} }
.chip { .chip {
//background-color: red; padding-left: 1em;
padding-right: 1em;
border-radius: 3px;
-webkit-font-smoothing: subpixel-antialiased;
&.chip-md-primary { &.chip-md-primary {
//background-color: blue; //background-color: blue;
} }
} }
.note-md {
color: #888;
}
.unlocking-script,
.locking-script {
white-space: normal;
font-family: monospace;
}
} }

179
app/src/pages/block-detail/block-detail.html
View File

@ -7,98 +7,105 @@
<ion-spinner name="crescent"></ion-spinner> <ion-spinner name="crescent"></ion-spinner>
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading" class="page-content">
<h1>Block #{{ block.height }}</h1> <h1>Block #{{ block.height }}</h1>
<p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p> <p class="item-hash">
<b>Block Hash</b> {{ block.hash }}</p>
<h2>Summary</h2> <h2>Summary</h2>
<ion-list *ngIf="!loading" class="list--summary"> <ion-list *ngIf="!loading" class="list--summary">
<ion-item> <ion-grid>
Number of Transactions <ion-row>
<ion-note item-end> <ion-col col-12 col-md class="allow-truncated-text">
{{ block.tx.length }} <ion-item>
</ion-note> Number of Transactions
</ion-item> <ion-note item-end>
<ion-item> {{ block.tx.length }}
Height </ion-note>
<ion-note item-end> </ion-item>
{{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span> <ion-item>
</ion-note> Height
</ion-item> <ion-note item-end>
<ion-item> {{ block.height }}
Block Reward <span [hidden]="!block.isMainChain">(Mainchain)</span>
<ion-note item-end> </ion-note>
{{ currency.getConvertedNumber(block.reward) | number:'1.0-8' }} {{ currency.currencySymbol }} </ion-item>
</ion-note> <ion-item>
</ion-item> Block Reward
<ion-item> <ion-note item-end>
Timestamp {{ currency.getConvertedNumber(block.reward) | number:'1.0-8' }} {{ currency.currencySymbol }}
<ion-note item-end> </ion-note>
{{ block.time * 1000 | date:'medium' }} </ion-item>
</ion-note> <ion-item>
</ion-item> Timestamp
<ion-item> <ion-note item-end>
Mined by {{ block.time * 1000 | date:'medium' }}
<ion-note item-end *ngIf="block.poolInfo"> </ion-note>
<a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a> </ion-item>
</ion-note> <ion-item>
</ion-item> Mined by
<ion-item> <ion-note item-end *ngIf="block.poolInfo">
Merkle Root <a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
<ion-note item-end> </ion-note>
{{ block.merkleroot }} </ion-item>
</ion-note> <ion-item>
</ion-item> Merkle Root
<ion-item> <ion-note item-end>
Previous Block {{ block.merkleroot }}
<ion-note item-end> </ion-note>
<a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a> </ion-item>
</ion-note> <ion-item>
</ion-item> Previous Block
<ion-item> <ion-note item-end>
Difficulty <a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
<ion-note item-end> </ion-note>
{{ block.difficulty }} </ion-item>
</ion-note> </ion-col>
</ion-item> <ion-col col-12 col-md class="allow-truncated-text">
<ion-item> <ion-item>
Bits Difficulty
<ion-note item-end> <ion-note item-end>
{{ block.bits }} {{ block.difficulty }}
</ion-note> </ion-note>
</ion-item> </ion-item>
<ion-item> <ion-item>
Size (bytes) Bits
<ion-note item-end> <ion-note item-end>
{{ block.size }} {{ block.bits }}
</ion-note> </ion-note>
</ion-item> </ion-item>
<ion-item> <ion-item>
Version Size (bytes)
<ion-note item-end> <ion-note item-end>
{{ block.version }} {{ block.size }}
</ion-note> </ion-note>
</ion-item> </ion-item>
<ion-item> <ion-item>
Nonce Version
<ion-note item-end> <ion-note item-end>
{{ block.nonce }} {{ block.version }}
</ion-note> </ion-note>
</ion-item> </ion-item>
<ion-item> <ion-item>
Next Block Nonce
<ion-note item-end> <ion-note item-end>
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a> {{ block.nonce }}
</ion-note> </ion-note>
</ion-item> </ion-item>
<ion-item>
Next Block
<ion-note item-end>
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
</ion-note>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list> </ion-list>
<div *ngIf="!loading"> <h2>Transactions</h2>
<h2>Transactions</h2> <transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
<transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
</div>
</div> </div>
</ion-content> </ion-content>

5
app/src/pages/block-detail/block-detail.scss
View File

@ -1,3 +1,6 @@
page-block-detail { page-block-detail {
// https://css-tricks.com/flexbox-truncated-text/
.allow-truncated-text {
overflow: hidden;
}
} }

4
app/src/pages/blocks/blocks.html
View File

@ -7,8 +7,8 @@
<ion-spinner name="crescent"></ion-spinner> <ion-spinner name="crescent"></ion-spinner>
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading" class="page-content">
<h1>Blocks</h1> <h1>Blocks</h1>
<latest-blocks [numBlocks]="100" [showTimeAs]="'timestamp'" [showAllBlocksButton]="false"></latest-blocks> <latest-blocks [numBlocks]="100" [showTimeAs]="'timestamp'" [showAllBlocksButton]="false"></latest-blocks>
</div> </div>
</ion-content> </ion-content>

40
app/src/pages/broadcastTxPage/broadcastTxPage.html
View File

@ -1,5 +1,5 @@
<ion-header> <ion-header>
<ion-navbar color="primary"> <ion-navbar color="brand">
<button ion-button menuToggle> <button ion-button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -8,24 +8,26 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<form [formGroup]="txForm"> <div class="page-content">
<ion-list> <form [formGroup]="txForm">
<ion-item> <ion-list>
<p>This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.</p> <ion-item>
</ion-item> <p>This form can be used to broadcast a raw transaction in hex format over the Bitcoin network.</p>
</ion-item>
<ion-item> <ion-item>
<ion-label floating>Raw transaction data</ion-label> <ion-label floating>Raw transaction data</ion-label>
<ion-input type="text" [(ngModel)]="transaction" formControlName="rawData"></ion-input> <ion-input type="text" [(ngModel)]="transaction" formControlName="rawData"></ion-input>
</ion-item> </ion-item>
<ion-item *ngIf="!txForm.controls.rawData.valid"> <ion-item *ngIf="!txForm.controls.rawData.valid">
<p>Raw transaction data must be a valid hexadecimal string.</p> <p>Raw transaction data must be a valid hexadecimal string.</p>
</ion-item> </ion-item>
<ion-item> <ion-item>
<button ion-button outline (click)="send()" [disabled]="!txForm.touched || !txForm.valid">Send transaction</button> <button ion-button outline (click)="send()" [disabled]="!txForm.touched || !txForm.valid">Send transaction</button>
</ion-item> </ion-item>
</ion-list> </ion-list>
</form> </form>
</ion-content> </div>
</ion-content>

54
app/src/pages/home/home.html
View File

@ -5,37 +5,43 @@
Ionic pages and navigation. Ionic pages and navigation.
--> -->
<ion-header> <ion-header>
<head-nav [title]="'Home'"></head-nav> <head-nav [title]="'Insight'"></head-nav>
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<div class="page-content">
<div> <div class="latest-blocks">
<h1>Latest Blocks</h1> <h1>Latest Blocks</h1>
<latest-blocks [numBlocks]="6" [showTimeAs]="'age'" [showAllBlocksButton]="true"></latest-blocks> <latest-blocks [numBlocks]="13" [showTimeAs]="'age'" [showAllBlocksButton]="true"></latest-blocks>
</div> </div>
<!--
<div>
<h1>Latest Transactions</h1>
<latest-transactions [refreshSeconds]="8"></latest-transactions>
</div>
-->
<div class="about"> <!--
<h2>About</h2> <div>
<p><strong>insight</strong> is an <a href="https://insight.is/" <h1>Latest Transactions</h1>
target="_blank">open-source Bitcoin blockchain explorer</a> 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 <a href="https://github.com/bitpay/insight-ui" target="_blank">source code</a>.</p> <latest-transactions [refreshSeconds]="8"></latest-transactions>
<p><strong>insight</strong> is still in development, so be sure to report any bugs and provide feedback for improvement at our <a href="https://github.com/bitpay/insight/issues" target="_blank">github issue tracker</a>.</p> </div>
<div id="powered" class="row"> -->
<div class="powered-text">
<small class="text-muted">Powered by</small> <div class="about">
<p>
<strong>Insight</strong> is an open-source Bitcoin blockchain explorer developed by
<a href="https://bitpay.com/" target="_blank">BitPay</a>. 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.</p>
<p>
The Insight project is available
<a href="https://github.com/bitpay/insight" target="_blank">on GitHub</a>.</p>
<div id="powered" class="row">
<div class="powered-text">
<small class="text-muted">Powered by</small>
</div>
<a href="http://bitcore.io" target="_blank" class="bitcore" title="Bitcore"></a>
<a href="https://angular.io/" target="_blank" class="angular" title="Angular"></a>
<a href="https://code.google.com/p/leveldb/" target="_blank" class="leveldb" title="LevelDB"></a>
<a href="http://nodejs.org" target="_blank" class="nodejs" title="NodeJs"></a>
</div> </div>
<a href="http://bitcore.io" target="_blank" class="bitcore" title="Bitcore"></a>
<a href="http://angularjs.org" target="_blank" class="angularjs" title="AngularJS"></a>
<a href="https://code.google.com/p/leveldb/" target="_blank" class="leveldb" title="LevelDB"></a>
<a href="http://nodejs.org" target="_blank" class="nodejs" title="NodeJs"></a>
</div> </div>
</div> </div>
</ion-content> </ion-content>

16
app/src/pages/home/home.scss
View File

@ -1,6 +1,17 @@
page-home { page-home {
@media screen and (min-width: 768px) {
.latest-blocks {
width: 68%;
display: inline-block;
}
.about {
width: 30%;
float: right;
}
}
.about { .about {
background-color: #F4F4F4; background-color: #f4f4f4;
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 5px; border-radius: 5px;
padding: 14px; padding: 14px;
@ -36,7 +47,7 @@ page-home {
background-size: 80px; background-size: 80px;
width: 30%; width: 30%;
} }
#powered a.angularjs { #powered a.angular {
background-image: url('../../assets/img/angularjs.png'); background-image: url('../../assets/img/angularjs.png');
background-size: 50px; background-size: 50px;
width: 20%; width: 20%;
@ -46,5 +57,4 @@ page-home {
background-size: 50px; background-size: 50px;
width: 20%; width: 20%;
} }
} }

8
app/src/pages/nodeStatusPage/nodeStatusPage.html
View File

@ -1,5 +1,5 @@
<ion-header> <ion-header>
<ion-navbar color="primary"> <ion-navbar color="brand">
<button ion-button menuToggle> <button ion-button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -8,5 +8,7 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Node Status</h1> <div class="page-content">
</ion-content> <h1>Node Status</h1>
</div>
</ion-content>

15
app/src/pages/pages.scss Normal file
View File

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

7
app/src/pages/transaction/transaction.html
View File

@ -7,9 +7,10 @@
<ion-spinner name="crescent"></ion-spinner> <ion-spinner name="crescent"></ion-spinner>
</div> </div>
<div *ngIf="!loading"> <div *ngIf="!loading" class="page-content">
<h1>Transaction</h1> <h1>Transaction</h1>
<p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p> <p class="item-hash">
<b>Transaction Hash</b> {{ tx.txid }}</p>
<h2>Summary</h2> <h2>Summary</h2>
@ -45,4 +46,4 @@
<transaction [tx]="tx"></transaction> <transaction [tx]="tx"></transaction>
</div> </div>
</ion-content> </ion-content>

48
app/src/pages/verifyMessagePage/verifyMessagePage.html
View File

@ -1,5 +1,5 @@
<ion-header> <ion-header>
<ion-navbar color="primary"> <ion-navbar color="brand">
<button ion-button menuToggle> <button ion-button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</button> </button>
@ -8,31 +8,33 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<ion-list> <div class="page-content">
<ion-item>
<p>Bitcoin comes with a way of signing arbitrary messages.</p>
<p>This form can be used to verify that a message comes from a specific Bitcoin address.</p> <ion-list>
</ion-item> <ion-item>
<p>Bitcoin comes with a way of signing arbitrary messages.</p>
<ion-item> <p>This form can be used to verify that a message comes from a specific Bitcoin address.</p>
<ion-label floating>Address</ion-label> </ion-item>
<ion-input type="text"></ion-input>
</ion-item>
<ion-item> <ion-item>
<ion-label floating>Signature</ion-label> <ion-label floating>Address</ion-label>
<ion-input type="text"></ion-input> <ion-input type="text"></ion-input>
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label floating>Message</ion-label> <ion-label floating>Signature</ion-label>
<ion-input type="text"></ion-input> <ion-input type="text"></ion-input>
</ion-item> </ion-item>
<ion-item> <ion-item>
<button ion-button outline>Verify</button> <ion-label floating>Message</ion-label>
</ion-item> <ion-input type="text"></ion-input>
</ion-list> </ion-item>
</ion-content> <ion-item>
<button ion-button outline>Verify</button>
</ion-item>
</ion-list>
</div>
</ion-content>

46
app/src/theme/variables.scss
View File

@ -1,9 +1,8 @@
// Ionic Variables and Theming. For more info, please see: // Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/v2/theming/ // http://ionicframework.com/docs/v2/theming/
$font-path: "../assets/fonts"; $font-path: '../assets/fonts';
@import "ionic.globals";
@import 'ionic.globals';
// Shared Variables // Shared Variables
// -------------------------------------------------- // --------------------------------------------------
@ -12,9 +11,6 @@ $font-path: "../assets/fonts";
// To view all the possible Ionic variables, see: // To view all the possible Ionic variables, see:
// http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/
// Named Color Variables // Named Color Variables
// -------------------------------------------------- // --------------------------------------------------
// Named colors makes it easy to reuse colors on various components. // 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. // The "primary" color is the only required color in the map.
$colors: ( $colors: (
primary: #8dc429, brand: #8dc429,
secondary: #32db64, primary: #2fa4d7,
danger: #f53d3d, secondary: #8dc429,
light: #f4f4f4, danger: #f53d3d,
dark: #373D42 warning: #ffa400,
light: #f4f4f4,
dark: #373d42
); );
// App iOS Variables // App iOS Variables
// -------------------------------------------------- // --------------------------------------------------
// iOS only Sass variables can go here // iOS only Sass variables can go here
// App Material Design Variables // App Material Design Variables
// -------------------------------------------------- // --------------------------------------------------
// Material Design only Sass variables can go here // Material Design only Sass variables can go here
// App Windows Variables // App Windows Variables
// -------------------------------------------------- // --------------------------------------------------
// Windows only Sass variables can go here // Windows only Sass variables can go here
// App Theme // App Theme
// -------------------------------------------------- // --------------------------------------------------
// Ionic apps can have different themes applied, which can // Ionic apps can have different themes applied, which can
@ -60,19 +48,25 @@ $colors: (
// so that the above variables are used and Ionic's // so that the above variables are used and Ionic's
// default are overridden. // 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 // Ionicons
// -------------------------------------------------- // --------------------------------------------------
// The premium icon font for Ionic. For more info, please see: // The premium icon font for Ionic. For more info, please see:
// http://ionicframework.com/docs/v2/ionicons/ // http://ionicframework.com/docs/v2/ionicons/
@import "ionic.ionicons"; @import 'ionic.ionicons';
// Fonts // Fonts
// -------------------------------------------------- // --------------------------------------------------
@import "roboto"; @import 'roboto';
@import "noto-sans"; @import 'noto-sans';
// Other globals
$desktop-min-width: 1288px;