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

Merge pull request #4979 from mempool/natsoni/improve-tooltip-positioning

Browse Source 
Fix cropped transaction tooltip in block overview on mobile
This commit is contained in:
softsimon 2024-04-19 16:23:10 +07:00 committed by GitHub
commit 5e6e2c037e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.html
View File

@ -3,7 +3,7 @@
class="block-overview-tooltip" class="block-overview-tooltip"
[class.clickable]="clickable" [class.clickable]="clickable"
[style.visibility]="tx ? 'visible' : 'hidden'" [style.visibility]="tx ? 'visible' : 'hidden'"
[style.left]="tooltipPosition.x + 'px'" [style.left]="getTooltipLeftPosition()"
[style.top]="tooltipPosition.y + 'px'" [style.top]="tooltipPosition.y + 'px'"
> >
<table class="table-fixed"> <table class="table-fixed">

4
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.scss
View File

@ -10,7 +10,7 @@
padding: 10px 15px; padding: 10px 15px;
text-align: left; text-align: left;
min-width: 340px; min-width: 340px;
max-width: 340px; max-width: 400px;
pointer-events: none; pointer-events: none;
z-index: 11; z-index: 11;
@ -41,7 +41,7 @@ th, td {
flex-wrap: wrap; flex-wrap: wrap;
row-gap: 0.25em; row-gap: 0.25em;
margin-top: 0.2em; margin-top: 0.2em;
max-width: 100%; max-width: 310px;
.badge { .badge {
border-radius: 0.2rem; border-radius: 0.2rem;

4
frontend/src/app/components/block-overview-tooltip/block-overview-tooltip.component.ts
View File

@ -96,4 +96,8 @@ export class BlockOverviewTooltipComponent implements OnChanges {
this.cd.markForCheck(); this.cd.markForCheck();
} }
} }
getTooltipLeftPosition(): string {
return window.innerWidth < 392 ? '-50px' : this.tooltipPosition.x + 'px';
}
} }