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

BEM-ified the lastest-blocks and latest-transactions components

Browse Source
This commit is contained in:
Darren Nelsen 2017-08-31 11:20:15 -04:00
parent 45a8c809a3
commit 93ad3534f6
5 changed files with 31 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
app/src/app/app.scss
View File

@ -29,6 +29,28 @@ body {
user-select: text;
}
.grid--table {
margin: 10px 0 20px;
.grid--table__row {
border-top: 1px solid #ccc;
&:first-child {
background-color: white;
border-top: none;
}
&:nth-child(even) {
background-color: #f4f4f4;
}
&:last-child {
background-color: white;
}
}
}
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//

10
app/src/components/latest-blocks/latest-blocks.html
View File

@ -5,9 +5,9 @@
</div>
<div *ngIf="!loading">
<ion-grid>
<ion-grid class="grid--table">
<ion-row>
<ion-row class="grid--table__row">
<ion-col><b>Height</b></ion-col>
<ion-col *ngIf="showTimeAs === 'age'"><b>Age</b></ion-col>
<ion-col *ngIf="showTimeAs === 'timestamp'"><b>Timestamp</b></ion-col>
@ -15,7 +15,8 @@
<ion-col hideWhen="portrait"><b>Mined By</b></ion-col>
<ion-col text-right><b>Size</b></ion-col>
</ion-row>
<ion-row *ngFor="let block of getBlocks()">
<ion-row *ngFor="let block of getBlocks()" class="grid--table__row">
<ion-col>
<a (click)="goToBlock(block.hash)">{{block.height}}</a>
</ion-col>
@ -35,7 +36,8 @@
{{ block.size }}
</ion-col>
</ion-row>
<ion-row *ngIf="showAllBlocksButton">
<ion-row *ngIf="showAllBlocksButton" class="grid--table__row">
<ion-col text-center>
<button ion-button (click)="goToBlocks()">See all blocks</button>
</ion-col>

21
app/src/components/latest-blocks/latest-blocks.scss
View File

@ -1,23 +1,2 @@
latest-blocks {
ion-grid {
// border: 2px solid green;
margin: 10px 0 20px;
ion-row {
border-top: 1px solid #ccc;
}
ion-row:nth-child(even) {
background-color: #f4f4f4;
}
ion-row:first-child {
background-color: white;
border-top: none;
}
ion-row:last-child {
background-color: white;
}
}
}

6
app/src/components/latest-transactions/latest-transactions.html
View File

@ -4,14 +4,14 @@
</div>
<div *ngIf="!loading">
<ion-grid>
<ion-grid class="grid--table">
<ion-row>
<ion-row class="grid--table__row">
<ion-col><b>Hash</b></ion-col>
<ion-col text-right><b>Value Out</b></ion-col>
</ion-row>
<ion-row *ngFor="let tx of transactions">
<ion-row *ngFor="let tx of transactions" class="grid--table__row">
<ion-col col-9>
<div class="ellipsis">
<a (click)="goToTx(tx.txid)">{{ tx.txid }}</a>

21
app/src/components/latest-transactions/latest-transactions.scss
View File

@ -1,23 +1,2 @@
latest-transactions {
ion-grid {
// border: 2px solid green;
margin: 10px 0 20px;
ion-row {
border-top: 1px solid #ccc;
}
ion-row:nth-child(even) {
background-color: #f4f4f4;
}
ion-row:first-child {
background-color: white;
border-top: none;
}
ion-row:last-child {
background-color: white;
}
}
}