Merge pull request #1428 from mempool/bugfix/blocks-list-css

Fix blocks list mobile layout
This commit is contained in:
softsimon 2022-03-25 16:52:45 +04:00 committed by GitHub
commit f87da211dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 2 deletions

View file

@ -1,4 +1,4 @@
<div class="container-xl" [class]="widget ? 'widget' : ''"> <div class="container-xl" [class]="widget ? 'widget' : 'full-height'">
<h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1> <h1 *ngIf="!widget" class="float-left" i18n="latest-blocks.blocks">Blocks</h1>
<div class="clearfix"></div> <div class="clearfix"></div>
@ -91,7 +91,7 @@
</table> </table>
<ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''" <ngb-pagination *ngIf="!widget" class="pagination-container float-right mt-2" [class]="isLoading ? 'disabled' : ''"
[collectionSize]="blocksCount" [rotate]="true" [maxSize]="5" [pageSize]="15" [(page)]="page" [collectionSize]="blocksCount" [rotate]="true" [maxSize]="maxSize" [pageSize]="15" [(page)]="page"
(pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false"> (pageChange)="pageChange(page)" [boundaryLinks]="true" [ellipses]="false">
</ngb-pagination> </ngb-pagination>
</div> </div>

View file

@ -22,6 +22,7 @@ export class BlocksList implements OnInit {
paginationMaxSize: number; paginationMaxSize: number;
page = 1; page = 1;
lastPage = 1; lastPage = 1;
maxSize = window.innerWidth <= 767.98 ? 3 : 5;
blocksCount: number; blocksCount: number;
fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight); fromHeightSubject: BehaviorSubject<number> = new BehaviorSubject(this.fromBlockHeight);
skeletonLines: number[] = []; skeletonLines: number[] = [];

View file

@ -66,6 +66,11 @@ body {
.container-xl { .container-xl {
padding-bottom: 60px; padding-bottom: 60px;
} }
.full-height {
@media (max-width: 767.98px) {
min-height: 100vh;
}
}
:focus { :focus {
outline: none !important; outline: none !important;