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">
<br />
<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>
<a [routerLink]="['/address/', addressString]" style="line-height: 56px; margin-left: 10px;">{{ addressString }}</a>
<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;">
<app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
@ -41,11 +41,11 @@
<tbody>
<tr>
<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>
<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>
<ng-template [ngIf]="fees" [ngIfElse]="loadingFees">
<tr>

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

@ -60,44 +60,29 @@
z-index: 100;
}
@media (max-width: 767.98px) {
.block-height {
bottom: 125px;
left: inherit;
text-shadow: inherit;
z-index: inherit;
}
.blocks-container {
top: -40px;
}
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
position:absolute;
top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
@media (min-width: 768px) {
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
position:absolute;
top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
.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) {
const greenBackgroundHeight = 100 - (block.weight / 4000000) * 100;
if (window.innerWidth <= 768) {
return {
top: 155 * this.blocks.indexOf(block) + 'px',
background: `repeating-linear-gradient(#2d3348, #2d3348 ${greenBackgroundHeight}%,
#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%)`,
};
}
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;
}
@media (max-width: 767.98px) {
.position-container {
}
}
/*
@media (min-width: 1920px) {
.position-container {

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

@ -1,5 +1,5 @@
<footer class="footer">
<div class="container-lg">
<div class="container-xl">
<div class="row text-center" *ngIf="memPoolInfo">
<div class="col">
<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;
background-color: #1d1f31;
box-shadow: 15px 15px 15px 15px #000;
z-index: 10;
}
.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 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%;">Size</th>
<th style="width: 20%;">Filled</th>
</thead>
<tbody>
@ -13,10 +12,10 @@
<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 class="d-none d-lg-block">{{ block.tx_count }}</td>
<td class="d-none d-lg-block">{{ block.size | bytes: 2 }}</td>
<td>
<div class="progress position-relative">
<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>
</td>
</tr>
@ -26,7 +25,6 @@
<td class="d-none d-md-block"><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><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

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

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

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

@ -54,47 +54,37 @@
font-size: 12px;
}
@media (max-width: 767.98px) {
.mempool-blocks-container {
position: absolute;
left: -165px;
top: -40px;
}
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
position:absolute;
top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
@media (min-width: 768px) {
.bitcoin-block::after {
content: '';
width: 125px;
height: 24px;
position:absolute;
top: -24px;
left: -20px;
background-color: #232838;
transform:skew(40deg);
transform-origin:top;
}
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
.bitcoin-block::before {
content: '';
width: 20px;
height: 125px;
position: absolute;
top: -12px;
left: -20px;
background-color: #191c27;
transform: skewY(50deg);
transform-origin: top;
}
.mempool-block.bitcoin-block::after {
background-color: #403834;
}
.mempool-block.bitcoin-block::after {
background-color: #403834;
}
.mempool-block.bitcoin-block::before {
background-color: #2d2825;
}
.mempool-block.bitcoin-block::before {
background-color: #2d2825;
}
.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;">
<app-blockchain></app-blockchain>
</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">
<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;">
<app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
</div>
<div class="transaction-content">
<div class="title-block">
<h1 style="float: left;">Transaction</h1>
<a [routerLink]="['/tx/', txId]" style="line-height: 56px; margin-left: 10px;">{{ txId }}</a>
@ -138,6 +140,8 @@
<i>{{ error.error }}</i>
</div>
</ng-template>
</div>
</div>
<br>

3
frontend/src/styles.scss
View File

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