highperfocused/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-04-10 21:09:30 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improvments to responsiveness

Browse Source
This commit is contained in:
softsimon 2020-03-03 17:47:01 +07:00
parent 2fe7af0c22
commit c1a8863861
12 changed files with 76 additions and 32 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">
<div class="container-lg">
<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">
<div class="container-lg">
<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,6 +1,8 @@
<div class="container">
<div class="container-lg">
<app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
<div style="position: relative;">
<app-blockchain position="top" [markHeight]="blockHeight"></app-blockchain>
</div>
<div class="title-block">
<h1>Block <ng-template [ngIf]="blockHeight"><a [routerLink]="['/block/', blockHash]">#{{ blockHeight }}</a></ng-template></h1>

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

@ -67,6 +67,10 @@
text-shadow: inherit;
z-index: inherit;
}
.blocks-container {
top: -40px;
}
}
@media (min-width: 768px) {

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

@ -27,20 +27,17 @@
}
@media (max-width: 767.98px) {
#divider {
top: -50px;
height: 1300px;
}
.position-container {
top: 100px;
}
}
/*
@media (min-width: 1920px) {
.position-container {
transform: scale(1.3);
}
}
*/
.black-background {
background-color: #11131f;

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

@ -1,18 +1,19 @@
<footer class="footer">
<div class="container">
<div class="container-lg">
<div class="row text-center" *ngIf="memPoolInfo">
<div class="col">
<span class="txPerSecond">Tx weight per second:</span>&nbsp;
<div class="progress">
<span class="txPerSecond">Tx weight per second:</span>
<div class="progress sub-text">
<div class="progress-bar {{ progressClass }}" role="progressbar" [ngStyle]="{'width': progressWidth}">{{ memPoolInfo?.vBytesPerSecond | ceil | number }} vBytes/s</div>
</div>
</div>
<div class="col">
<span class="unconfirmedTx">Unconfirmed transactions:</span>&nbsp;<b>{{ memPoolInfo?.memPoolInfo?.size | number }}</b>
<span class="unconfirmedTx">Unconfirmed<span class="extra-text"> transactions</span>:</span>
<div class="sub-text">{{ memPoolInfo?.memPoolInfo?.size | number }}</div>
</div>
<div class="col">
<span class="mempoolSize">Mempool size:</span>&nbsp;<b>{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</b>
<span class="mempoolSize">Mempool size:</span>
<div class="sub-text">{{ mempoolSize | bytes }} ({{ mempoolBlocks }} block<span [hidden]="mempoolBlocks <= 1">s</span>)</div>
</div>
</div>
</div>

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

@ -7,8 +7,29 @@
box-shadow: 15px 15px 15px 15px #000;
}
.footer > .container {
margin-top: 17px;
.sub-text {
display: block;
font-weight: bold;
}
.footer > div {
margin-top: 3px;
}
@media (min-width: 1200px) {
.footer > div {
margin-top: 17px;
}
.sub-text {
margin-left: 5px;
display: inline-block;
}
}
@media (max-width: 767.98px) {
.extra-text {
display: none;
}
}
.txPerSecond {

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

@ -3,18 +3,18 @@
<th style="width: 210px;">Height</th>
<th class="d-none d-md-block" style="width: 210px;">Timestamp</th>
<th style="width: 210px;">Mined</th>
<th style="width: 150px;">Transactions</th>
<th style="width: 175px;">Size</th>
<th class="d-none d-md-block">Filled</th>
<th class="d-none d-lg-block" style="width: 150px;">Transactions</th>
<th class="d-none d-lg-block" style="width: 175px;">Size</th>
<th>Filled</th>
</thead>
<tbody>
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td><a [routerLink]="['/block', block.id]" [state]="{ data: { block: block } }">#{{ block.height }}</a></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>{{ block.tx_count }}</td>
<td>{{ block.size | bytes: 2 }}</td>
<td class="d-none d-md-block">
<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>
@ -23,10 +23,10 @@
<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-md-block"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td><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><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

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

@ -1,3 +1,18 @@
.progress-mempool {
background: repeating-linear-gradient(to right, #2d3348, #2d3348 0%, #105fb0 0%, #9339f4 100%);
}
}
.progress {
background-color: #2d3348;
}
@media (min-width: 768px) {
.d-md-block {
display: table-cell !important;
}
}
@media (min-width: 992px) {
.d-lg-block {
display: table-cell !important;
}
}

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

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

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

@ -1,4 +1,4 @@
<div class="container" style="max-width: 100%;">
<div class="container-lg" 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,6 +1,8 @@
<div class="container">
<div class="container-lg">
<app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
<div style="position: relative;">
<app-blockchain position="top" [txFeePerVSize]="tx?.fee / (tx?.weight / 4)" [markHeight]="tx?.status?.block_height"></app-blockchain>
</div>
<div class="title-block">
<h1 style="float: left;">Transaction</h1>