Skip to content

Commit

Permalink
feat: mobile view details panel 2 (#1054)
Browse files Browse the repository at this point in the history
  • Loading branch information
@janmichek
janmichek authored Feb 3, 2025
1 parent 3fc0ab0 commit 8d91a26
Show file tree
Hide file tree
Showing 14 changed files with 359 additions and 158 deletions.
1 change: 1 addition & 0 deletions src/assets/styles/settings/_variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,5 @@
}

@custom-media --desktop (min-width: 1280px);
@custom-media --mobile (min-width: 640px);

41 changes: 31 additions & 10 deletions src/components/AccountDetailsPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</hint-tooltip>
Address
</th>
<td>
<td class="account-details-panel__data">
<div class="u-hidden-mobile">
<copy-chip :label="accountDetails.id"/>
</div>
Expand All @@ -44,7 +44,7 @@
</hint-tooltip>
Balance
</th>
<td>
<td class="account-details-panel__data">
<price-label :price="accountDetails.balance"/>
</td>
</tr>
Expand All @@ -56,7 +56,7 @@
</hint-tooltip>
Value
</th>
<td>
<td class="account-details-panel__data">
{{ sanitizedPrice }}
</td>
</tr>
Expand All @@ -67,7 +67,7 @@
</hint-tooltip>
Transactions
</th>
<td>
<td class="account-details-panel__data">
{{ formatNumber(accountDetails.totalTransactionsCount) }}
</td>
</tr>
Expand All @@ -80,7 +80,7 @@
</hint-tooltip>
Is Generalized
</th>
<td>
<td class="account-details-panel__data">
<app-chip size="sm">
Generalized
</app-chip>
Expand All @@ -95,7 +95,7 @@
</hint-tooltip>
Contract Id
</th>
<td>
<td class="account-details-panel__data">
<app-link :to="`/contracts/${accountDetails.contractId}`">
{{ accountDetails.contractId }}
</app-link>
Expand All @@ -110,7 +110,7 @@
</hint-tooltip>
Nonce
</th>
<td>
<td class="account-details-panel__data">
{{ accountDetails.nonce }}
</td>
</tr>
Expand All @@ -121,7 +121,7 @@
</hint-tooltip>
API Links
</th>
<td>
<td class="account-details-panel__data">
<app-link
:to="accountNodeUrl"
class="account-details-panel__link">
Expand Down Expand Up @@ -163,17 +163,38 @@ const sanitizedPrice = computed(() =>
<style scoped>
.account-details-panel {
&__table-header {
border-bottom: 1px solid var(--color-midnight-25);
display: block;
padding-bottom: 0;
@media (--desktop) {
@media (--mobile) {
padding-bottom: 8px;
width: var(--detail-column-width);
border-bottom: 1px solid var(--color-midnight-25);
display: table-cell;
}
}
&__row {
display: block;
@media (--mobile) {
display: table-row;
}
}
&__row:last-of-type &__table-header {
border-bottom: 0;
}
&__data {
display: block;
padding-left: 20px;
@media (--mobile) {
display: table-cell;
}
}
&__link {
display: inline-flex;
align-items: center;
Expand Down
39 changes: 28 additions & 11 deletions src/components/AeCoinPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
</hint-tooltip>
Symbol
</th>
<td>
<td class="ae-coin-panel__data">
<div class="ae-coin-panel__link">
<img
class="ae-coin-panel__icon"
Expand All @@ -26,7 +26,7 @@
</hint-tooltip>
Price
</th>
<td>
<td class="ae-coin-panel__data">
$ {{ formatNullable(price) }}
<trend-chip :delta="priceChange"/>
</td>
Expand All @@ -38,7 +38,7 @@
</hint-tooltip>
Total Supply
</th>
<td>
<td class="ae-coin-panel__data">
<price-label :price="MAX_AE_DISTRIBUTION"/>
</td>
</tr>
Expand All @@ -49,7 +49,7 @@
</hint-tooltip>
Circulating Supply
</th>
<td>
<td class="ae-coin-panel__data">
<price-label :price="totalTokenSupply"/>
</td>
</tr>
Expand All @@ -60,7 +60,7 @@
</hint-tooltip>
Decimals
</th>
<td>
<td class="ae-coin-panel__data">
18
</td>
</tr>
Expand Down Expand Up @@ -93,17 +93,38 @@ defineProps({
<style scoped>
.ae-coin-panel {
&__table-header {
border-bottom: 1px solid var(--color-midnight-25);
display: block;
padding-bottom: 0;
@media (--desktop) {
@media (--mobile) {
padding-bottom: 8px;
width: var(--detail-column-width);
border-bottom: 1px solid var(--color-midnight-25);
display: table-cell;
}
}
&__row {
display: block;
@media (--mobile) {
display: table-row;
}
}
&__row:last-of-type &__table-header {
border-bottom: 0;
}
&__data {
display: block;
padding-left: 20px;
@media (--mobile) {
display: table-cell;
}
}
&__link {
display: inline-flex;
align-items: center;
Expand All @@ -114,10 +135,6 @@ defineProps({
width: 28px;
height: 28px;
@media (--desktop) {
width: 24px;
height: 24px;
}
}
}
</style>
53 changes: 35 additions & 18 deletions src/components/ContractDetailsPanel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</hint-tooltip>
Smart Contract ID
</th>
<td>
<td class="contract-details-panel__data">
<div class="u-hidden-mobile">
<copy-chip :label="contractDetails.id"/>
</div>
Expand All @@ -32,7 +32,7 @@
</hint-tooltip>
Type
</th>
<td>
<td class="contract-details-panel__data">
<app-chip size="sm">
{{ contractDetails.contractType }}
</app-chip>
Expand All @@ -48,7 +48,7 @@
</hint-tooltip>
Token
</th>
<td>
<td class="contract-details-panel__data">
<div class="contract-details-panel__container">
<app-link
v-if="contractDetails.contractType === 'AEX-9'"
Expand All @@ -75,7 +75,7 @@
</hint-tooltip>
Create Transaction
</th>
<td>
<td class="contract-details-panel__data">
<app-link :to="`/transactions/${contractDetails.createTransactionHash}`">
<span class="u-hidden-mobile">
{{ contractDetails.createTransactionHash }}
Expand All @@ -93,7 +93,7 @@
</hint-tooltip>
Created Height
</th>
<td>
<td class="contract-details-panel__data">
<app-link :to="`/keyblocks/${contractDetails.creationHeight}`">
{{ contractDetails.creationHeight }}
</app-link>
Expand All @@ -106,7 +106,7 @@
</hint-tooltip>
Created
</th>
<td>
<td class="contract-details-panel__data">
<timestamp-label
:timestamp="contractDetails.creationDate"
:is-extended="true"/>
Expand All @@ -121,7 +121,7 @@
</hint-tooltip>
Created By
</th>
<td>
<td class="contract-details-panel__data">
<app-link :to="`/accounts/${contractDetails.createdBy}`">
<span class="u-hidden-mobile">
{{ contractDetails.createdBy }}
Expand All @@ -141,7 +141,7 @@
</hint-tooltip>
Bytecode
</th>
<td>
<td class="contract-details-panel__data">
<copy-chip
:label="formatEllipseHash(contractDetails.bytecode)"
:clipboard-text="contractDetails.bytecode"/>
Expand All @@ -154,7 +154,7 @@
</hint-tooltip>
Smart Contract’s Account
</th>
<td>
<td class="contract-details-panel__data">
<app-link :to="`/accounts/${contractDetails.contractAccount}`">
<span class="u-hidden-mobile">
{{ contractDetails.contractAccount }}
Expand All @@ -172,7 +172,7 @@
</hint-tooltip>
Smart Contract's Account Balance
</th>
<td>
<td class="contract-details-panel__data">
<price-label :price="0"/>
</td>
</tr>
Expand All @@ -183,7 +183,7 @@
</hint-tooltip>
Smart Contract Calls
</th>
<td>
<td class="contract-details-panel__data">
{{ contractDetails.callsCount }}
</td>
</tr>
Expand All @@ -194,7 +194,7 @@
</hint-tooltip>
API Links
</th>
<td>
<td class="contract-details-panel__data">
<app-link
:to="contractNodeUrl"
class="contract-details-panel__link">
Expand Down Expand Up @@ -241,19 +241,36 @@ const contractMiddlewareUrl = computed(() =>
<style scoped>
.contract-details-panel {
&__table-header {
border-bottom: 1px solid var(--color-midnight-25);
display: block;
padding-bottom: 0;
@media (--desktop) {
@media (--mobile) {
padding-bottom: 8px;
width: var(--detail-column-width);
border-bottom: 1px solid var(--color-midnight-25);
display: table-cell;
}
}
&__row:last-of-type &__table-header {
border-bottom: 0;
&__row {
display: block;
@media (--mobile) {
display: table-row;
}
}
&__data {
display: block;
padding-left: 20px;
@media (--mobile) {
display: table-cell;
}
}
&__container {
display: flex;
&__row:last-of-type &__table-header {
border-bottom: 0;
}
&__link {
Expand Down
Loading

0 comments on commit 8d91a26

Please sign in to comment.