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

Merge pull request #3607 from mempool/nymkappa/clip-label-overflow

Browse Source 
Clip overflowing labels in pool component on mobile
This commit is contained in:
softsimon 2023-07-19 14:05:31 +09:00 committed by GitHub
commit 741571a93a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/app/components/pool/pool.component.html
View File

@ -92,9 +92,9 @@
<table class="table table-xs table-data"> <table class="table table-xs table-data">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.reward">Reward</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.reward">Reward</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -117,9 +117,9 @@
<table class="table table-xs table-data"> <table class="table table-xs table-data">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.reward">Reward</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.reward">Reward</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.hashrate">Hashrate (24h)</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="latest-blocks.avg_health" *ngIf="auditAvailable">Avg Health</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -143,9 +143,9 @@
<table class="table table-xs table-data"> <table class="table table-xs table-data">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -165,9 +165,9 @@
<table class="table table-xs table-data"> <table class="table table-xs table-data">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -382,9 +382,9 @@
<table class="table table-xs table-data text-center"> <table class="table table-xs table-data text-center">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.total-reward">Reward</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -407,9 +407,9 @@
<table class="table table-xs table-data text-center"> <table class="table table-xs table-data text-center">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.total-reward">Reward</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.total-reward">Reward</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.estimated">Hashrate (24h)</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th> <th scope="col" class="data-title clip text-center" style="width: 33%" i18n="mining.luck" *ngIf="auditAvailable">Avg Health</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -433,9 +433,9 @@
<table class="table table-xs table-data text-center"> <table class="table table-xs table-data text-center">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -458,9 +458,9 @@
<table class="table table-xs table-data text-center"> <table class="table table-xs table-data text-center">
<thead> <thead>
<tr> <tr>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="24h">Blocks 24h</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="1w">1w</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="1w">1w</th>
<th scope="col" class="block-count-title text-center" style="width: 33%" i18n="all">All</th> <th scope="col" class="data-title text-center" style="width: 33%" i18n="all">All</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

10
frontend/src/app/components/pool/pool.component.scss
View File

@ -188,11 +188,19 @@ div.scrollable {
} }
} }
.block-count-title { .data-title {
color: #4a68b9; color: #4a68b9;
font-size: 14px; font-size: 14px;
} }
.clip {
@media (max-width: 576px) {
max-width: 85px;
overflow: hidden;
text-overflow: ellipsis;
}
}
.table-data tr { .table-data tr {
background-color: transparent; background-color: transparent;
} }