topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Feature/improve mobile layout of portfolio summary (#1982) 

* Improve layout for mobile

* Update changelog
pull/1983/head
Thomas Kaul 2 years ago
committed by GitHub
parent
4b3afb5c97
commit
cdb8dc72c7
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 100
      apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

1
CHANGELOG.md
View File

@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- Improved the mobile layout of the portfolio summary tab on the home page
- Improved the language localization for German (`de`) - Improved the language localization for German (`de`)
### Fixed ### Fixed

100
apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html
View File

@ -1,16 +1,16 @@
<div class="container p-0"> <div class="container p-0">
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Time in Market</div> <div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value class="justify-content-end" [value]="timeInMarket"></gf-value> <gf-value class="justify-content-end" [value]="timeInMarket"></gf-value>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col"><hr /></div> <div class="col"><hr /></div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Buy</div> <div class="flex-grow-1 text-truncate" i18n>Buy</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -19,9 +19,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Sell</div> <div class="flex-grow-1 text-truncate" i18n>Sell</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -33,9 +33,9 @@
<div class="row"> <div class="row">
<div class="col"><hr /></div> <div class="col"><hr /></div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Investment</div> <div class="flex-grow-1 text-truncate" i18n>Investment</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -44,9 +44,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Absolute Gross Performance</div> <div class="flex-grow-1 text-truncate" i18n>Absolute Gross Performance</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -55,9 +55,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1 ml-3" i18n>Gross Performance (TWR)</div> <div class="flex-grow-1 ml-3 text-truncate" i18n>Gross Performance</div>
<div class="d-flex flex-column flex-wrap justify-content-end"> <div class="flex-column flex-wrap justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
position="end" position="end"
@ -70,8 +70,8 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n> <div class="flex-grow-1 text-truncate" i18n>
Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1 Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1
{transaction} other {transactions}} {transaction} other {transactions}}
</div> </div>
@ -88,9 +88,9 @@
<div class="row"> <div class="row">
<div class="col"><hr /></div> <div class="col"><hr /></div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Absolute Net Performance</div> <div class="flex-grow-1 text-truncate" i18n>Absolute Net Performance</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -99,9 +99,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1 ml-3" i18n>Net Performance (TWR)</div> <div class="flex-grow-1 text-truncate ml-3" i18n>Net Performance</div>
<div class="d-flex flex-column flex-wrap justify-content-end"> <div class="flex-column flex-wrap justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
position="end" position="end"
@ -115,9 +115,9 @@
<div class="row"> <div class="row">
<div class="col"><hr /></div> <div class="col"><hr /></div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Total Assets</div> <div class="flex-grow-1 text-truncate" i18n>Total Assets</div>
<div class="d-flex flex-column flex-wrap justify-content-end"> <div class="flex-column flex-wrap justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
position="end" position="end"
@ -127,9 +127,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Valuables</div> <div class="flex-grow-1 text-truncate" i18n>Valuables</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -138,8 +138,8 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Emergency Fund</div> <div class="flex-grow-1 text-truncate" i18n>Emergency Fund</div>
<div <div
class="align-items-center d-flex justify-content-end" class="align-items-center d-flex justify-content-end"
[ngClass]="{ 'cursor-pointer': hasPermissionToUpdateUserSettings }" [ngClass]="{ 'cursor-pointer': hasPermissionToUpdateUserSettings }"
@ -158,9 +158,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Buying Power</div> <div class="flex-grow-1 text-truncate" i18n>Buying Power</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -169,9 +169,9 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Excluded from Analysis</div> <div class="flex-grow-1 text-truncate" i18n>Excluded from Analysis</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -183,9 +183,9 @@
<div class="row"> <div class="row">
<div class="col"><hr /></div> <div class="col"><hr /></div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1 font-weight-bold" i18n>Net Worth</div> <div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"
@ -194,9 +194,11 @@
></gf-value> ></gf-value>
</div> </div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1 ml-3" i18n>Annualized Performance</div> <div class="flex-grow-1 ml-3 text-truncate" i18n>
<div class="d-flex flex-column flex-wrap justify-content-end"> Annualized Performance
</div>
<div class="flex-column flex-wrap justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
position="end" position="end"
@ -210,9 +212,9 @@
<div class="row"> <div class="row">
<div class="col"><hr /></div> <div class="col"><hr /></div>
</div> </div>
<div class="row px-3 py-1"> <div class="flex-nowrap px-3 py-1 row">
<div class="d-flex flex-grow-1" i18n>Dividend</div> <div class="flex-grow-1 text-truncate" i18n>Dividend</div>
<div class="d-flex justify-content-end"> <div class="justify-content-end">
<gf-value <gf-value
class="justify-content-end" class="justify-content-end"
[currency]="baseCurrency" [currency]="baseCurrency"

Write Preview
Loading…
Cancel
Save