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

fix(client): resolve divider alignment

pull/8131/head
KenTandrian 3 days ago
parent
c382f40079
commit
52296d9811
1 changed files with 25 additions and 25 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. 50
      apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

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

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

Write Preview
Loading…
Cancel
Save