mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2024-11-20 10:21:52 +01:00
Code Issues Projects Releases Wiki Activity

Fix block list component responsive

Browse Source
This commit is contained in:
nymkappa 2023-03-19 15:23:00 +09:00
parent 30686bd322
commit 194968d16f
No known key found for this signature in database
GPG Key ID: E155910B16E8BD04
4 changed files with 53 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/app/components/blocks-list/blocks-list.component.html
View File

@ -26,7 +26,7 @@
</thead> </thead>
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''"> <tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock"> <tr *ngFor="let block of blocks; let i= index; trackBy: trackByBlock">
<td class="text-left" [class]="widget ? 'widget' : ''"> <td class="height text-left" [class]="widget ? 'widget' : ''">
<a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a> <a [routerLink]="['/block' | relativeUrl, block.id]" [state]="{ data: { block: block } }">{{ block.height }}</a>
</td> </td>
<td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
@ -89,7 +89,6 @@
<span class="skeleton-loader" style="max-width: 75px"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>
<td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <td *ngIf="indexingAvailable" class="pool text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<img width="1" height="25" style="opacity: 0">
<span class="skeleton-loader" style="max-width: 125px"></span> <span class="skeleton-loader" style="max-width: 125px"></span>
</td> </td>
<td class="timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'"> <td class="timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
@ -98,7 +97,7 @@
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'"> <td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
<span class="skeleton-loader" style="max-width: 125px"></span> <span class="skeleton-loader" style="max-width: 125px"></span>
</td> </td>
<td *ngIf="auditAvailable" class="health text-left" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <td *ngIf="auditAvailable" class="health text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">
<span class="skeleton-loader" style="max-width: 75px"></span> <span class="skeleton-loader" style="max-width: 75px"></span>
</td> </td>
<td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}"> <td *ngIf="indexingAvailable" class="reward text-right" [ngClass]="{'widget': widget, 'legacy': !indexingAvailable}">

39
frontend/src/app/components/blocks-list/blocks-list.component.scss
View File

@ -51,7 +51,12 @@ tr, td, th {
.pool.widget { .pool.widget {
width: 40%; width: 40%;
padding-left: 24px; padding-left: 24px;
@media (max-width: 376px) { @media (min-width: 768px) AND (max-width: 926px) {
padding-left: 0px;
width: 60%;
}
@media (max-width: 430px) {
padding-left: 0px;
width: 60%; width: 60%;
} }
} }
@ -59,6 +64,10 @@ tr, td, th {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
padding-left: 10px; padding-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
} }
.height { .height {
@ -69,6 +78,12 @@ tr, td, th {
@media (max-width: 576px) { @media (max-width: 576px) {
width: 10%; width: 10%;
} }
@media (min-width: 768px) AND (max-width: 926px) {
width: 30%;
}
@media (max-width: 430px) {
width: 30%;
}
} }
.height.legacy { .height.legacy {
width: 15%; width: 15%;
@ -92,7 +107,7 @@ tr, td, th {
.mined { .mined {
width: 13%; width: 13%;
@media (max-width: 576px) { @media (max-width: 730px) {
display: none; display: none;
} }
} }
@ -138,7 +153,7 @@ tr, td, th {
.fees { .fees {
width: 8%; width: 8%;
@media (max-width: 650px) { @media (max-width: 820px) {
display: none; display: none;
} }
} }
@ -163,6 +178,16 @@ tr, td, th {
width: 30%; width: 30%;
padding-right: 0; padding-right: 0;
} }
@media (min-width: 768px) AND (max-width: 926px) {
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
@media (max-width: 430px) {
overflow: hidden;
text-overflow: ellipsis;
max-width: 90px;
}
} }
.size { .size {
@ -189,10 +214,10 @@ tr, td, th {
.health { .health {
width: 10%; width: 10%;
@media (max-width: 1000px) { @media (max-width: 1105px) {
width: 13%; width: 13%;
} }
@media (max-width: 950px) { @media (max-width: 560px) {
display: none; display: none;
} }
@ -202,7 +227,7 @@ tr, td, th {
} }
.health.widget { .health.widget {
width: 25%; width: 25%;
@media (max-width: 1000px) { @media (max-width: 1105px) {
display: none; display: none;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
@ -242,4 +267,4 @@ tr, td, th {
vertical-align: middle; vertical-align: middle;
max-width: 50vw; max-width: 50vw;
text-align: left; text-align: left;
} }

19
frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.html
View File

@ -2,17 +2,18 @@
<table class="table latest-adjustments"> <table class="table latest-adjustments">
<thead> <thead>
<tr> <tr>
<th class="d-none d-md-block" i18n="block.height">Height</th> <th class="" i18n="block.height">Height</th>
<th i18n="mining.adjusted" class="text-left">Adjusted</th> <th class="date text-left" i18n="mining.adjusted">Adjusted</th>
<th i18n="mining.difficulty" class="text-right">Difficulty</th> <th class="text-right" i18n="mining.difficulty">Difficulty</th>
<th i18n="mining.change" class="text-right">Change</th> <th class="text-right" i18n="mining.change">Change</th>
</tr> </tr>
</thead> </thead>
<tbody *ngIf="(hashrateObservable$ | async) as data"> <tbody *ngIf="(hashrateObservable$ | async) as data">
<tr *ngFor="let diffChange of data"> <tr *ngFor="let diffChange of data">
<td class="d-none d-md-block"><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height <td class="">
}}</a></td> <a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a>
<td class="text-left"> </td>
<td class="date text-left">
<app-time kind="since" [time]="diffChange.timestamp" [fastRender]="true"></app-time> <app-time kind="since" [time]="diffChange.timestamp" [fastRender]="true"></app-time>
</td> </td>
<td class="text-right">{{ diffChange.difficultyShorten }}</td> <td class="text-right">{{ diffChange.difficultyShorten }}</td>
@ -23,8 +24,8 @@
</tbody> </tbody>
<tbody *ngIf="isLoading"> <tbody *ngIf="isLoading">
<tr *ngFor="let item of [1,2,3,4,5,6]"> <tr *ngFor="let item of [1,2,3,4,5,6]">
<td class="d-none d-md-block w-75"><span class="skeleton-loader"></span></td> <td class=""><span class="skeleton-loader"></span></td>
<td class="text-left"><span class="skeleton-loader w-75"></span></td> <td class="date text-left"><span class="skeleton-loader w-75"></span></td>
<td class="text-right"><span class="skeleton-loader w-75"></span></td> <td class="text-right"><span class="skeleton-loader w-75"></span></td>
<td class="text-right"><span class="skeleton-loader w-75"></span></td> <td class="text-right"><span class="skeleton-loader w-75"></span></td>
</tr> </tr>

9
frontend/src/app/components/difficulty-adjustments-table/difficulty-adjustments-table.component.scss
View File

@ -17,3 +17,12 @@
} }
} }
} }
.date {
@media (min-width: 767px) AND (max-width: 991px) {
display: none;
}
@media (max-width: 500px) {
display: none;
}
}