Skip to content

Commit

Permalink
Merge pull request #1507 from sultanmyrza/feature-adjust-wallet-page-…
Browse files Browse the repository at this point in the history
…and-transfer-page-UI-for-screen-size-less-than-360px-with-media-query

Feature adjust wallet page and transfer page UI for screen size less than 360px with media query
  • Loading branch information
shc261392 authored Apr 6, 2022
2 parents c8b6fa5 + 94e5f82 commit 43690b2
Show file tree
Hide file tree
Showing 4 changed files with 47 additions and 5 deletions.
4 changes: 2 additions & 2 deletions src/app/features/wallets/transfer/transfer.page.html
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,11 @@ <h5>
<ion-icon name="wallet"></ion-icon>
</ion-col>
<ion-col size="5" *ngrxLet="gasFee$ as gasFee">
<h6>
<h6 class="gas-fee-text">
{{ t('wallets.gasFee') }}:
{{ gasFee > 0 ? (gasFee | number: '1.2-2') : t('wallets.pending') }}
</h6>
<h4>
<h4 class="wallet-total-text">
{{ t('wallets.total') }} {{ totalCost$ | ngrxPush | currency }}
</h4>
</ion-col>
Expand Down
26 changes: 26 additions & 0 deletions src/app/features/wallets/transfer/transfer.page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,24 @@ ion-card {
margin-bottom: 0;
}

h6.gas-fee-text {
@media (max-width: 360px) {
font-size: 14px;
}
}

h4 {
margin-top: 2%;
font-weight: bold;
letter-spacing: 0.02em;
}

h4.wallet-total-text {
@media (max-width: 360px) {
font-size: 14px;
}
}

#deposit-withdraw-btn-col {
padding-left: 0;
padding-right: 0;
Expand All @@ -53,6 +65,10 @@ ion-card {
width: 80%;

--border-radius: 10px;

@media (max-width: 360px) {
font-size: 12px;
}
}
}

Expand All @@ -73,6 +89,16 @@ ion-card {
margin-top: 0;
font-weight: bold;
letter-spacing: 0.02em;

@media (max-width: 360px) {
font-size: 16px;
}
}

h1 {
@media (max-width: 360px) {
font-size: 20px;
}
}
}

Expand Down
6 changes: 4 additions & 2 deletions src/app/features/wallets/wallets.page.html
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,16 @@
<ion-row>
<ion-col size="8">
<ion-text class="text-black">
<h1>{{ totalBalance$ | ngrxPush | currency }} NUM</h1>
<h1 class="balance-text">
{{ totalBalance$ | ngrxPush | currency }} NUM
</h1>
</ion-text>
</ion-col>
<ion-col offset="0.3">
<ion-row id="num-icon-row">
<ion-img src="../../../assets/images/num-icon.svg"></ion-img>
<ion-text class="text-black">
<h3>NUM</h3>
<h3 class="num-text">NUM</h3>
</ion-text>
</ion-row>
</ion-col>
Expand Down
16 changes: 15 additions & 1 deletion src/app/features/wallets/wallets.page.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,32 @@ ion-card {
margin-left: 12px;
margin-right: 8px;

h1.balance-text {
@media (max-width: 360px) {
font-size: 20px;
}
}

#num-icon-row {
ion-img {
margin-top: 10px;
width: 29px;

@media (max-width: 360px) {
width: 20px;
}
}

h3 {
h3.num-text {
flex: none;
order: 1;
flex-grow: 0;
margin-top: 21px;
margin-left: 7px;

@media (max-width: 360px) {
font-size: 20px;
}
}
}

Expand Down

0 comments on commit 43690b2

Please sign in to comment.