Feature/various layout improvements (#224)
* Various layout improvements * Update changelogpull/229/head
Thomas
3 years ago
committed by
GitHub
parent
6996e5a140
commit
cdcbe3ab71
@ -1,87 +1,108 @@
|
|||||||
<div class="container">
|
<ng-container *ngIf="hasPositions || !historicalDataItems">
|
||||||
<div class="row">
|
<div class="container overview position-relative">
|
||||||
<a
|
<div class="row">
|
||||||
class="chart-container col mr-3"
|
<a
|
||||||
[routerLink]="[]"
|
class="chart-container col mr-3"
|
||||||
[queryParams]="{performanceChartDialog: true}"
|
[routerLink]="[]"
|
||||||
>
|
[queryParams]="{performanceChartDialog: true}"
|
||||||
<gf-line-chart
|
>
|
||||||
symbol="Performance"
|
<gf-line-chart
|
||||||
[historicalDataItems]="historicalDataItems"
|
symbol="Performance"
|
||||||
[showLoader]="false"
|
[historicalDataItems]="historicalDataItems"
|
||||||
[showXAxis]="false"
|
[showLoader]="false"
|
||||||
[showYAxis]="false"
|
[showXAxis]="false"
|
||||||
></gf-line-chart>
|
[showYAxis]="false"
|
||||||
</a>
|
></gf-line-chart>
|
||||||
</div>
|
</a>
|
||||||
<div class="overview-container row mb-5 mt-1">
|
</div>
|
||||||
<div class="col">
|
<div class="overview-container row mb-5 mt-1">
|
||||||
<gf-portfolio-performance-summary
|
<div class="col">
|
||||||
class="pb-4"
|
<gf-portfolio-performance-summary
|
||||||
[baseCurrency]="user?.settings?.baseCurrency"
|
class="pb-4"
|
||||||
[isLoading]="isLoadingPerformance"
|
[baseCurrency]="user?.settings?.baseCurrency"
|
||||||
[locale]="user?.settings?.locale"
|
|
||||||
[performance]="performance"
|
|
||||||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio"
|
|
||||||
></gf-portfolio-performance-summary>
|
|
||||||
<div class="text-center">
|
|
||||||
<gf-toggle
|
|
||||||
[defaultValue]="dateRange"
|
|
||||||
[isLoading]="isLoadingPerformance"
|
[isLoading]="isLoadingPerformance"
|
||||||
[options]="dateRangeOptions"
|
[locale]="user?.settings?.locale"
|
||||||
(change)="onChangeDateRange($event.value)"
|
[performance]="performance"
|
||||||
></gf-toggle>
|
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio"
|
||||||
|
></gf-portfolio-performance-summary>
|
||||||
|
<div class="text-center">
|
||||||
|
<gf-toggle
|
||||||
|
[defaultValue]="dateRange"
|
||||||
|
[isLoading]="isLoadingPerformance"
|
||||||
|
[options]="dateRangeOptions"
|
||||||
|
(change)="onChangeDateRange($event.value)"
|
||||||
|
></gf-toggle>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
</div>
|
class="button-container d-flex justify-content-center position-absolute"
|
||||||
|
>
|
||||||
<div class="container">
|
<a
|
||||||
<div class="row mb-3">
|
*ngIf="showPositionsButton"
|
||||||
<div class="col">
|
[routerLink]="['/home']"
|
||||||
<mat-card class="p-0">
|
fragment="positions-container"
|
||||||
<mat-card-content>
|
i18n
|
||||||
<gf-positions
|
mat-flat-button
|
||||||
[baseCurrency]="user?.settings?.baseCurrency"
|
(click)="showPositionsButton = false"
|
||||||
[deviceType]="deviceType"
|
>Positions</a
|
||||||
[locale]="user?.settings?.locale"
|
>
|
||||||
[positions]="positions"
|
|
||||||
[range]="dateRange"
|
|
||||||
></gf-positions>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-12 col-md-6 mb-3">
|
<div id="positions-container" class="container positions">
|
||||||
<mat-card class="h-100">
|
<div class="row mb-3">
|
||||||
<mat-card-header>
|
<div class="col">
|
||||||
<mat-card-title i18n>Performance</mat-card-title>
|
<mat-card class="p-0">
|
||||||
</mat-card-header>
|
<mat-card-content>
|
||||||
<mat-card-content>
|
<gf-positions
|
||||||
<gf-portfolio-performance
|
[baseCurrency]="user?.settings?.baseCurrency"
|
||||||
[baseCurrency]="user?.settings?.baseCurrency"
|
[deviceType]="deviceType"
|
||||||
[isLoading]="isLoadingPerformance"
|
[locale]="user?.settings?.locale"
|
||||||
[locale]="user?.settings?.locale"
|
[positions]="positions"
|
||||||
[performance]="performance"
|
[range]="dateRange"
|
||||||
></gf-portfolio-performance>
|
></gf-positions>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 col-md-6 mb-3">
|
<div class="row">
|
||||||
<mat-card class="h-100">
|
<div class="col-xs-12 col-md-6 mb-3">
|
||||||
<mat-card-header>
|
<mat-card class="h-100">
|
||||||
<mat-card-title i18n>Summary</mat-card-title>
|
<mat-card-header>
|
||||||
</mat-card-header>
|
<mat-card-title i18n>Performance</mat-card-title>
|
||||||
<mat-card-content>
|
</mat-card-header>
|
||||||
<gf-portfolio-overview
|
<mat-card-content>
|
||||||
[baseCurrency]="user?.settings?.baseCurrency"
|
<gf-portfolio-performance
|
||||||
[isLoading]="isLoadingOverview"
|
[baseCurrency]="user?.settings?.baseCurrency"
|
||||||
[locale]="user?.settings?.locale"
|
[isLoading]="isLoadingPerformance"
|
||||||
[overview]="overview"
|
[locale]="user?.settings?.locale"
|
||||||
></gf-portfolio-overview>
|
[performance]="performance"
|
||||||
</mat-card-content>
|
></gf-portfolio-performance>
|
||||||
</mat-card>
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
|
<div class="col-xs-12 col-md-6 mb-3">
|
||||||
|
<mat-card class="h-100">
|
||||||
|
<mat-card-header>
|
||||||
|
<mat-card-title i18n>Summary</mat-card-title>
|
||||||
|
</mat-card-header>
|
||||||
|
<mat-card-content>
|
||||||
|
<gf-portfolio-overview
|
||||||
|
[baseCurrency]="user?.settings?.baseCurrency"
|
||||||
|
[isLoading]="isLoadingOverview"
|
||||||
|
[locale]="user?.settings?.locale"
|
||||||
|
[overview]="overview"
|
||||||
|
></gf-portfolio-overview>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container *ngIf="!hasPositions && historicalDataItems">
|
||||||
|
<div class="d-flex justify-content-center my-5">
|
||||||
|
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
|
||||||
|
</div>
|
||||||
|
</ng-container>
|
||||||
|
|||||||
@ -1,32 +1,65 @@
|
|||||||
<div *ngIf="hasPositions || !historicalDataItems" class="container">
|
<ng-container *ngIf="hasPositions || !historicalDataItems">
|
||||||
<div class="row">
|
<div class="container overview position-relative">
|
||||||
<div class="chart-container col mr-3">
|
<div class="row">
|
||||||
<gf-line-chart
|
<div class="chart-container col mr-3">
|
||||||
symbol="Performance"
|
<gf-line-chart
|
||||||
[historicalDataItems]="historicalDataItems"
|
symbol="Performance"
|
||||||
[showLoader]="false"
|
[historicalDataItems]="historicalDataItems"
|
||||||
[showXAxis]="false"
|
[showLoader]="false"
|
||||||
[showYAxis]="false"
|
[showXAxis]="false"
|
||||||
></gf-line-chart>
|
[showYAxis]="false"
|
||||||
|
></gf-line-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="overview-container row mb-5 mt-1">
|
||||||
|
<div class="col">
|
||||||
|
<gf-portfolio-performance-summary
|
||||||
|
class="pb-4"
|
||||||
|
[baseCurrency]="user?.settings?.baseCurrency"
|
||||||
|
[isLoading]="isLoadingPerformance"
|
||||||
|
[locale]="user?.settings?.locale"
|
||||||
|
[performance]="performance"
|
||||||
|
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio"
|
||||||
|
></gf-portfolio-performance-summary>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="button-container d-flex justify-content-center position-absolute"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
*ngIf="showPositionsButton"
|
||||||
|
[routerLink]="['/zen']"
|
||||||
|
fragment="positions-container"
|
||||||
|
i18n
|
||||||
|
mat-flat-button
|
||||||
|
(click)="showPositionsButton = false"
|
||||||
|
>Positions</a
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="overview-container row mb-5 mt-1">
|
|
||||||
<div class="col">
|
<div id="positions-container" class="container positions">
|
||||||
<gf-portfolio-performance-summary
|
<div class="row mb-3">
|
||||||
class="pb-4"
|
<div class="col">
|
||||||
[baseCurrency]="user?.settings?.baseCurrency"
|
<mat-card class="p-0">
|
||||||
[isLoading]="isLoadingPerformance"
|
<mat-card-content>
|
||||||
[locale]="user?.settings?.locale"
|
<gf-positions
|
||||||
[performance]="performance"
|
[baseCurrency]="user?.settings?.baseCurrency"
|
||||||
[showDetails]="!hasImpersonationId || hasPermissionToReadForeignPortfolio"
|
[deviceType]="deviceType"
|
||||||
></gf-portfolio-performance-summary>
|
[locale]="user?.settings?.locale"
|
||||||
|
[positions]="positions"
|
||||||
|
[range]="dateRange"
|
||||||
|
></gf-positions>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ng-container>
|
||||||
|
|
||||||
<div
|
<ng-container *ngIf="!hasPositions && historicalDataItems">
|
||||||
*ngIf="!hasPositions && historicalDataItems"
|
<div class="d-flex justify-content-center my-5">
|
||||||
class="d-flex justify-content-center my-5"
|
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
|
||||||
>
|
</div>
|
||||||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
|
</ng-container>
|
||||||
</div>
|
|
||||||
|
|||||||
@ -1,38 +1,73 @@
|
|||||||
|
@import '~apps/client/src/styles/ghostfolio-style';
|
||||||
|
|
||||||
:host {
|
:host {
|
||||||
color: rgb(var(--dark-primary-text));
|
color: rgb(var(--dark-primary-text));
|
||||||
display: block;
|
display: block;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&.overview {
|
||||||
|
min-height: calc(100vh - 5rem);
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
bottom: 3rem;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
|
||||||
.chart-container {
|
.mat-flat-button {
|
||||||
aspect-ratio: 16 / 9;
|
background-color: rgba(0, 0, 0, $alpha-hover);
|
||||||
margin-top: 3rem;
|
border-radius: 2rem;
|
||||||
max-height: 50vh;
|
}
|
||||||
|
|
||||||
// Fallback for aspect-ratio (using padding hack)
|
|
||||||
@supports not (aspect-ratio: 16 / 9) {
|
|
||||||
&::before {
|
|
||||||
float: left;
|
|
||||||
padding-top: 56.25%;
|
|
||||||
content: '';
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
.chart-container {
|
||||||
display: block;
|
aspect-ratio: 16 / 9;
|
||||||
content: '';
|
margin-top: 3rem;
|
||||||
clear: both;
|
max-height: 50vh;
|
||||||
|
|
||||||
|
// Fallback for aspect-ratio (using padding hack)
|
||||||
|
@supports not (aspect-ratio: 16 / 9) {
|
||||||
|
&::before {
|
||||||
|
float: left;
|
||||||
|
padding-top: 56.25%;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
display: block;
|
||||||
|
content: '';
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
gf-line-chart {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
gf-line-chart {
|
&.positions {
|
||||||
bottom: 0;
|
padding-top: 5rem;
|
||||||
left: 0;
|
min-height: calc(100vh - 5rem);
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:host-context(.is-dark-theme) {
|
:host-context(.is-dark-theme) {
|
||||||
color: rgb(var(--light-primary-text));
|
color: rgb(var(--light-primary-text));
|
||||||
|
|
||||||
|
.container {
|
||||||
|
&.overview {
|
||||||
|
.button-container {
|
||||||
|
.mat-flat-button {
|
||||||
|
background-color: rgba(255, 255, 255, $alpha-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in new issue