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; 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 // 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".
// //

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

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

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

@ -1,23 +1,2 @@
latest-blocks { 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>
<div *ngIf="!loading"> <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><b>Hash</b></ion-col>
<ion-col text-right><b>Value Out</b></ion-col> <ion-col text-right><b>Value Out</b></ion-col>
</ion-row> </ion-row>
<ion-row *ngFor="let tx of transactions"> <ion-row *ngFor="let tx of transactions" class="grid--table__row">
<ion-col col-9> <ion-col col-9>
<div class="ellipsis"> <div class="ellipsis">
<a (click)="goToTx(tx.txid)">{{ tx.txid }}</a> <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 { 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;
}
}
} }