machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

General responsive improvments.

Browse Source
This commit is contained in:
softsimon 2020-03-05 16:13:46 +07:00
parent 9851ae7169
commit b60d9cdfbc
16 changed files with 83 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/about/about.component.html
View File

@ -1,4 +1,4 @@
<div class="container-lg"> <div class="container-xl">
<div class="text-center"> <div class="text-center">
<br /> <br />
<img src="./assets/mempool-tube.png" width="63" height="63" /> <img src="./assets/mempool-tube.png" width="63" height="63" />

2
frontend/src/app/components/address/address.component.html
View File

@ -1,4 +1,4 @@
<div class="container-lg"> <div class="container-xl">
<h1 style="float: left;">Address</h1> <h1 style="float: left;">Address</h1>
<a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a> <a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a>
<app-clipboard [text]="addressString"></app-clipboard> <app-clipboard [text]="addressString"></app-clipboard>

6
frontend/src/app/components/block/block.component.html
View File

@ -1,4 +1,4 @@
<div class="container-lg"> <div class="container-xl">
<div style="position: relative;"> <div style="position: relative;">
<app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain> <app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
@ -41,11 +41,11 @@
<tbody> <tbody>
<tr> <tr>
<td>Hash</td> <td>Hash</td>
<td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 32 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td> <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 16 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
</tr> </tr>
<tr> <tr>
<td>Previous Block</td> <td>Previous Block</td>
<td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 32 }}</a></td> <td><a [routerLink]="['/block/', block.previousblockhash]" [state]="{ data: { blockHeight: blockHeight - 1 } }" title="{{ block.previousblockhash }}">{{ block.previousblockhash | shortenString : 16 }}</a></td>
</tr> </tr>
<ng-template [ngIf]="fees" [ngIfElse]="loadingFees"> <ng-template [ngIf]="fees" [ngIfElse]="loadingFees">
<tr> <tr>

55
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.scss
View File

@ -60,44 +60,29 @@
z-index: 100; z-index: 100;
} }
@media (max-width: 767.98px) { .bitcoin-block::after {
.block-height { content: '';
bottom: 125px; width: 125px;
left: inherit; height: 24px;
text-shadow: inherit; position:absolute;
z-index: inherit; top: -24px;
} left: -20px;
background-color: #232838;
.blocks-container { transform:skew(40deg);
top: -40px; transform-origin:top;
}
} }
@media (min-width: 768px) { .bitcoin-block::before {
.bitcoin-block::after { content: '';
content: ''; width: 20px;
width: 125px; height: 125px;
height: 24px; position: absolute;
position:absolute; top: -12px;
top: -24px; left: -20px;
left: -20px; background-color: #191c27;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
.bitcoin-block::before { transform: skewY(50deg);
content: ''; transform-origin: top;
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
} }
.black-background { .black-background {

18
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -62,19 +62,11 @@ export class BlockchainBlocksComponent implements OnInit, OnChanges, OnDestroy {
getStyleForBlock(block: Block) { getStyleForBlock(block: Block) {
const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100; const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
if (window.innerWidth <= 768) { return {
return { left: 155 * this.blocks.indexOf(block) + 'px',
top: 155 * this.blocks.indexOf(block) + 'px', background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%, #9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`, };
};
} else {
return {
left: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#9339f4 ${Math.max(greenBackgroundHeight, 0)}%, #105fb0 100%)`,
};
}
} }
} }

5
frontend/src/app/components/blockchain/blockchain.component.scss
View File

@ -26,11 +26,6 @@
top: 75px; top: 75px;
} }
@media (max-width: 767.98px) {
.position-container {
}
}
/* /*
@media (min-width: 1920px) { @media (min-width: 1920px) {
.position-container { .position-container {

2
frontend/src/app/components/footer/footer.component.html
View File

@ -1,5 +1,5 @@
<footer class="footer"> <footer class="footer">
<div class="container-lg"> <div class="container-xl">
<div class="row text-center" *ngIf="memPoolInfo"> <div class="row text-center" *ngIf="memPoolInfo">
<div class="col"> <div class="col">
<span class="txPerSecond">Tx weight per second:</span> <span class="txPerSecond">Tx weight per second:</span>

1
frontend/src/app/components/footer/footer.component.scss
View File

@ -5,6 +5,7 @@
height: 60px; height: 60px;
background-color: #1d1f31; background-color: #1d1f31;
box-shadow: 15px 15px 15px 15px #000; box-shadow: 15px 15px 15px 15px #000;
z-index: 10;
} }
.sub-text { .sub-text {

4
frontend/src/app/components/latest-blocks/latest-blocks.component.html
View File

@ -4,7 +4,6 @@
<th class="d-none d-md-block" style="width: 20%;">Timestamp</th> <th class="d-none d-md-block" style="width: 20%;">Timestamp</th>
<th style="width: 20%;">Mined</th> <th style="width: 20%;">Mined</th>
<th class="d-none d-lg-block" style="width: 15%;">Transactions</th> <th class="d-none d-lg-block" style="width: 15%;">Transactions</th>
<th class="d-none d-lg-block" style="width: 15%;">Size</th>
<th style="width: 20%;">Filled</th> <th style="width: 20%;">Filled</th>
</thead> </thead>
<tbody> <tbody>
@ -13,10 +12,10 @@
<td class="d-none d-md-block">{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td> <td class="d-none d-md-block">{{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}</td>
<td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</td> <td><app-time-since [time]="block.timestamp" [fastRender]="true"></app-time-since> ago</td>
<td class="d-none d-lg-block">{{ block.tx_count }}</td> <td class="d-none d-lg-block">{{ block.tx_count }}</td>
<td class="d-none d-lg-block">{{ block.size | bytes: 2 }}</td>
<td> <td>
<div class="progress position-relative"> <div class="progress position-relative">
<div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div> <div class="progress-bar progress-mempool" role="progressbar" [ngStyle]="{'width': (block.weight / 4000000)*100 + '%' }"></div>
<div class="progress-text">{{ block.size | bytes: 2 }}</div>
</div> </div>
</td> </td>
</tr> </tr>
@ -26,7 +25,6 @@
<td class="d-none d-md-block"><span class="skeleton-loader"></span></td> <td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-block"><span class="skeleton-loader"></span></td> <td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
</ng-template> </ng-template>

6
frontend/src/app/components/latest-blocks/latest-blocks.component.scss
View File

@ -16,3 +16,9 @@
display: table-cell !important; display: table-cell !important;
} }
} }
.progress-text {
position: absolute;
width: 100%;
text-align: center;
}

12
frontend/src/app/components/latest-transactions/latest-transactions.component.html
View File

@ -1,9 +1,9 @@
<table class="table table-borderless"> <table class="table table-borderless">
<thead> <thead>
<th>Transaction ID</th> <th style="width: 58%">Transaction ID</th>
<th class="d-none d-xl-block" style="width: 180px;">Value</th> <th class="d-none d-xl-block" style="width: 12%;">Value</th>
<th style="width: 125px;">Size</th> <th style="width: 10%;">Size</th>
<th>Fee</th> <th style="width: 15%">Fee</th>
</thead> </thead>
<tbody> <tbody>
<ng-container *ngIf="(transactions$ | async) as transactions"> <ng-container *ngIf="(transactions$ | async) as transactions">
@ -20,8 +20,8 @@
<ng-template [ngIf]="isLoading"> <ng-template [ngIf]="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]"> <tr *ngFor="let item of [1,2,3,4,5,6,7,8,9,10]">
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-block"><span class="skeleton-loader"></span></td> <td class="d-none d-lg-block" style="width: 25%;"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td style="width: 25%;"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td> <td><span class="skeleton-loader"></span></td>
</tr> </tr>
</ng-template> </ng-template>

62
frontend/src/app/components/mempool-blocks/mempool-blocks.component.scss
View File

@ -54,47 +54,37 @@
font-size: 12px; font-size: 12px;
} }
@media (max-width: 767.98px) { .bitcoin-block::after {
.mempool-blocks-container { content: '';
position: absolute; width: 125px;
left: -165px; height: 24px;
top: -40px; position:absolute;
} top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
} }
@media (min-width: 768px) { .bitcoin-block::before {
.bitcoin-block::after { content: '';
content: ''; width: 20px;
width: 125px; height: 125px;
height: 24px; position: absolute;
position:absolute; top: -12px;
top: -24px; left: -20px;
left: -20px; background-color: #191c27;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
.bitcoin-block::before { transform: skewY(50deg);
content: ''; transform-origin: top;
width: 20px; }
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg); .mempool-block.bitcoin-block::after {
transform-origin: top; background-color: #403834;
} }
.mempool-block.bitcoin-block::after { .mempool-block.bitcoin-block::before {
background-color: #403834; background-color: #2d2825;
}
.mempool-block.bitcoin-block::before {
background-color: #2d2825;
}
} }
.black-background { .black-background {

2
frontend/src/app/components/start/start.component.html
View File

@ -1,4 +1,4 @@
<div class="container-lg"> <div class="container-xl">
<div style="position: relative;"> <div style="position: relative;">
<app-blockchain></app-blockchain> <app-blockchain></app-blockchain>
</div> </div>

2
frontend/src/app/components/statistics/statistics.component.html
View File

@ -1,4 +1,4 @@
<div class="container-lg" style="max-width: 100%;"> <div class="container-xl" style="max-width: 100%;">
<!-- <!--
<ul class="nav nav-pills" id="myTab" role="tablist"> <ul class="nav nav-pills" id="myTab" role="tablist">
<li class="nav-item"> <li class="nav-item">

6
frontend/src/app/components/transaction/transaction.component.html
View File

@ -1,9 +1,11 @@
<div class="container-lg"> <div class="container-xl">
<div style="position: relative;"> <div style="position: relative;">
<app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain> <app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
</div> </div>
<div class="transaction-content">
<div class="title-block"> <div class="title-block">
<h1 style="float: left;">Transaction</h1> <h1 style="float: left;">Transaction</h1>
<a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a> <a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
@ -138,6 +140,8 @@
<i>{{ error.error }}</i> <i>{{ error.error }}</i>
</div> </div>
</ng-template> </ng-template>
</div>
</div> </div>
<br> <br>

3
frontend/src/styles.scss
View File

@ -314,3 +314,6 @@ hr {
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
} }
tr {
white-space: nowrap;
}