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

Merge pull request #1382 from mempool/nymkappa/feature/coinbase-tooltip-style

Browse Source 
Apply coinbase style to blocks list tooltip
This commit is contained in:
softsimon 2022-03-16 21:10:20 +01:00 committed by GitHub
commit 35f9658d3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,7 +30,7 @@
onError="this.src = './resources/mining-pools/default.svg'"> onError="this.src = './resources/mining-pools/default.svg'">
<span class="pool-name">{{ block.extras.pool.name }}</span> <span class="pool-name">{{ block.extras.pool.name }}</span>
</a> </a>
<span class="tooltiptext">{{ block.extras.coinbaseRaw | hex2ascii }}</span> <span class="tooltiptext badge badge-secondary scriptmessage">{{ block.extras.coinbaseRaw | hex2ascii }}</span>
</div> </div>
</td> </td>
<td class="timestamp" *ngIf="!widget"> <td class="timestamp" *ngIf="!widget">

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

@ -34,8 +34,9 @@ td {
} }
.pool.widget { .pool.widget {
width: 40%; width: 40%;
@media (max-width: 576px) {
padding-left: 30px; padding-left: 30px;
@media (max-width: 576px) {
padding-left: 40px;
width: 60%; width: 60%;
} }
} }
@ -130,14 +131,12 @@ td {
.tooltip-custom .tooltiptext { .tooltip-custom .tooltiptext {
visibility: hidden; visibility: hidden;
background-color: black;
color: #fff; color: #fff;
text-align: center; text-align: center;
padding: 5px 0; padding: 5px 0;
border-radius: 6px; border-radius: 6px;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
// width: 120px;
top: -40px; top: -40px;
left: 0; left: 0;
} }
@ -146,3 +145,12 @@ td {
.tooltip-custom:hover .tooltiptext { .tooltip-custom:hover .tooltiptext {
visibility: visible; visibility: visible;
} }
.scriptmessage {
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
vertical-align: middle;
max-width: 50vw;
text-align: left;
}