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

Merge pull request #3378 from mempool/nymkappa/responsive

Browse Source 
Fix block list component responsive
This commit is contained in:
softsimon 2023-03-19 16:48:47 +09:00 committed by GitHub
commit 5839ed428e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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>
<tbody *ngIf="blocks$ | async as blocks; else skeleton" [style]="isLoading ? 'opacity: 0.75' : ''">
<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>
</td>
<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>
</td>
<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>
</td>
<td class="timestamp" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
@ -98,7 +97,7 @@
<td class="mined" *ngIf="!widget" [class]="indexingAvailable ? '' : 'legacy'">
<span class="skeleton-loader" style="max-width: 125px"></span>
</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>
</td>
<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 {
width: 40%;
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%;
}
}
@ -59,6 +64,10 @@ tr, td, th {
display: inline-block;
vertical-align: text-top;
padding-left: 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.height {
@ -69,6 +78,12 @@ tr, td, th {
@media (max-width: 576px) {
width: 10%;
}
@media (min-width: 768px) AND (max-width: 926px) {
width: 30%;
}
@media (max-width: 430px) {
width: 30%;
}
}
.height.legacy {
width: 15%;
@ -92,7 +107,7 @@ tr, td, th {
.mined {
width: 13%;
@media (max-width: 576px) {
@media (max-width: 730px) {
display: none;
}
}
@ -138,7 +153,7 @@ tr, td, th {
.fees {
width: 8%;
@media (max-width: 650px) {
@media (max-width: 820px) {
display: none;
}
}
@ -163,6 +178,16 @@ tr, td, th {
width: 30%;
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 {
@ -189,10 +214,10 @@ tr, td, th {
.health {
width: 10%;
@media (max-width: 1000px) {
@media (max-width: 1105px) {
width: 13%;
}
@media (max-width: 950px) {
@media (max-width: 560px) {
display: none;
}
@ -202,7 +227,7 @@ tr, td, th {
}
.health.widget {
width: 25%;
@media (max-width: 1000px) {
@media (max-width: 1105px) {
display: none;
}
@media (max-width: 767px) {
@ -242,4 +267,4 @@ tr, td, th {
vertical-align: middle;
max-width: 50vw;
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">
<thead>
<tr>
<th class="d-none d-md-block" i18n="block.height">Height</th>
<th i18n="mining.adjusted" class="text-left">Adjusted</th>
<th i18n="mining.difficulty" class="text-right">Difficulty</th>
<th i18n="mining.change" class="text-right">Change</th>
<th class="" i18n="block.height">Height</th>
<th class="date text-left" i18n="mining.adjusted">Adjusted</th>
<th class="text-right" i18n="mining.difficulty">Difficulty</th>
<th class="text-right" i18n="mining.change">Change</th>
</tr>
</thead>
<tbody *ngIf="(hashrateObservable$ | async) as data">
<tr *ngFor="let diffChange of data">
<td class="d-none d-md-block"><a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height
}}</a></td>
<td class="text-left">
<td class="">
<a [routerLink]="['/block' | relativeUrl, diffChange.height]">{{ diffChange.height }}</a>
</td>
<td class="date text-left">
<app-time kind="since" [time]="diffChange.timestamp" [fastRender]="true"></app-time>
</td>
<td class="text-right">{{ diffChange.difficultyShorten }}</td>
@ -23,8 +24,8 @@
</tbody>
<tbody *ngIf="isLoading">
<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="text-left"><span class="skeleton-loader w-75"></span></td>
<td class=""><span class="skeleton-loader"></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>
</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;
}
}