fix table mobile and adress one line

This commit is contained in:
Phillip Lang Martinez 2022-08-24 16:21:04 +03:00
parent b83106d984
commit fa9765e510
2 changed files with 28 additions and 10 deletions

View File

@ -201,9 +201,9 @@ export const pageStyles = css`
.tableGrid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(
0,
1fr
2fr
) minmax(0, 1fr);
align-items: center;
gap: 5px;
@ -214,6 +214,16 @@ export const pageStyles = css`
}
.header {
align-self: flex-start;
}
.header p {
word-break: break-word ;
}
.grid-item {
text-align: center;
@ -331,6 +341,7 @@ export const pageStyles = css`
text-decoration: none;
margin: 0px;
margin-right: 10px;
word-break: break-word;
}
.grid-item {

View File

@ -119,6 +119,7 @@ class SponsorshipList extends LitElement {
const address =
window.parent.reduxStore.getState().app?.selectedAddress
?.address
let rewardShares = await this.getRewardShareRelationship(
address
)
@ -420,7 +421,7 @@ class SponsorshipList extends LitElement {
render() {
console.log({sponsors: this.sponsorships})
return html`
${
this.isPageLoading
@ -452,17 +453,17 @@ class SponsorshipList extends LitElement {
<p>${translate("sponsorshipspage.schange1")}</p>
</div>
<div class="tableGrid table-header">
<div class="grid-item">
<div class="grid-item header">
<p>${translate("sponsorshipspage.schange2")}</p>
</div>
<div class="grid-item">
<div class="grid-item header">
<p>${translate("walletprofile.blocksminted")}</p>
</div>
<div class="grid-item">
<div class="grid-item header">
<p>${translate("becomeMinterPage.bchange17")}</p>
</div>
<div class="grid-item">
<div class="grid-item header">
</div>
</div>
@ -472,17 +473,23 @@ class SponsorshipList extends LitElement {
(sponsorship) => html`
<ul class="tableGrid">
<li class="grid-item">
<p class="grid-item-text">
Account Address
</p>
${sponsorship.address}
</li>
<li class="grid-item">
<p class="grid-item-text">
Blocks Minted
</p>
${+sponsorship.blocksMinted +
+sponsorship.blocksMintedAdjustment}
</li>
<li class="grid-item">
<p class="grid-item-text">
Copy Sponsorship Key
</p>
<button-icon-copy
title="${translate(
"becomeMinterPage.bchange17"