Browse Source

fix(client): resolve divider alignment

pull/8131/head
KenTandrian 3 days ago
parent
commit
52296d9811
  1. 50
      apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

50
apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@ -1,5 +1,5 @@
<div class="container p-0">
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Time in Market</div>
<div class="justify-content-end">
<gf-value
@ -10,7 +10,7 @@
</div>
</div>
@if (isLoading) {
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="d-flex flex-grow-1 indent-1 text-truncate">
<ngx-skeleton-loader
animation="pulse"
@ -19,7 +19,7 @@
</div>
</div>
} @else {
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="d-flex flex-grow-1 indent-1 text-truncate">
{{ summary?.activityCount }}
<ng-container i18n>{summary?.activityCount, plural,
@ -39,7 +39,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Buy</div>
<div class="justify-content-end">
<gf-value
@ -53,7 +53,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Sell</div>
<div class="justify-content-end">
<gf-value
@ -70,7 +70,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Invested Capital</div>
<div class="justify-content-end">
<gf-value
@ -84,7 +84,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Absolute Gross Performance</div>
<div class="justify-content-end">
<gf-value
@ -98,7 +98,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1 text-muted">
<div class="d-flex py-1 text-muted">
<div class="flex-grow-1 indent-1 text-truncate" i18n>thereof Dividend</div>
<div class="justify-content-end">
<gf-value
@ -112,7 +112,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Fees</div>
<div class="d-flex justify-content-end">
@if (isNumber(summary?.fees)) {
@ -132,7 +132,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Absolute Net Performance</div>
<div class="justify-content-end">
<gf-value
@ -146,7 +146,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 indent-1 text-truncate">
<ng-container i18n>Net Performance</ng-container>
@if (
@ -173,7 +173,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1 text-muted">
<div class="d-flex py-1 text-muted">
<div class="flex-grow-1 indent-2 text-truncate">
<ng-container i18n>thereof Dividend Performance</ng-container>
</div>
@ -191,7 +191,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Total Assets</div>
<div class="flex-column flex-wrap justify-content-end">
<gf-value
@ -206,7 +206,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div
class="align-items-center d-flex flex-grow-1 indent-1"
[class.cursor-pointer]="hasHoldingsBreakdown"
@ -253,7 +253,7 @@
</div>
</div>
@if (hasHoldingsBreakdown && isHoldingsExpanded) {
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 indent-2 text-truncate" i18n>Investments</div>
<div class="flex-column flex-wrap justify-content-end">
<gf-value
@ -268,7 +268,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 indent-2 text-truncate" i18n>Emergency Fund</div>
<div class="flex-column flex-wrap justify-content-end">
<gf-value
@ -284,7 +284,7 @@
</div>
</div>
}
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div
class="align-items-center d-flex flex-grow-1 indent-1"
[class.cursor-pointer]="hasCashBreakdown"
@ -331,7 +331,7 @@
</div>
</div>
@if (hasCashBreakdown && isCashExpanded) {
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 indent-2 text-truncate" i18n>Buying Power</div>
<div class="flex-column flex-wrap justify-content-end">
<gf-value
@ -346,7 +346,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 indent-2 text-truncate" i18n>Emergency Fund</div>
<div class="flex-column flex-wrap justify-content-end">
<gf-value
@ -362,7 +362,7 @@
</div>
</div>
}
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="align-items-center d-flex flex-grow-1">
<ng-container i18n>Excluded from Analysis</ng-container>
@if (
@ -394,7 +394,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Liabilities</div>
<div class="d-flex justify-content-end">
@if (isNumber(summary?.liabilitiesInBaseCurrency)) {
@ -414,7 +414,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 font-weight-bold text-truncate" i18n>Net Worth</div>
<div class="justify-content-end">
<gf-value
@ -428,7 +428,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 indent-1 text-truncate">
<ng-container i18n>Annualized Performance</ng-container>
</div>
@ -447,7 +447,7 @@
<div class="row">
<div class="col"><hr /></div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="align-items-center d-flex flex-grow-1">
<ng-container i18n>Emergency Fund</ng-container>
@if (
@ -503,7 +503,7 @@
/>
</div>
</div>
<div class="d-flex px-3 py-1">
<div class="d-flex py-1">
<div class="flex-grow-1 text-truncate" i18n>Interest</div>
<div class="justify-content-end">
<gf-value

Loading…
Cancel
Save