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">
|
||||
<div class="row">
|
||||
<a
|
||||
class="chart-container col mr-3"
|
||||
[routerLink]="[]"
|
||||
[queryParams]="{performanceChartDialog: true}"
|
||||
>
|
||||
<gf-line-chart
|
||||
symbol="Performance"
|
||||
[historicalDataItems]="historicalDataItems"
|
||||
[showLoader]="false"
|
||||
[showXAxis]="false"
|
||||
[showYAxis]="false"
|
||||
></gf-line-chart>
|
||||
</a>
|
||||
</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 class="text-center">
|
||||
<gf-toggle
|
||||
[defaultValue]="dateRange"
|
||||
<ng-container *ngIf="hasPositions || !historicalDataItems">
|
||||
<div class="container overview position-relative">
|
||||
<div class="row">
|
||||
<a
|
||||
class="chart-container col mr-3"
|
||||
[routerLink]="[]"
|
||||
[queryParams]="{performanceChartDialog: true}"
|
||||
>
|
||||
<gf-line-chart
|
||||
symbol="Performance"
|
||||
[historicalDataItems]="historicalDataItems"
|
||||
[showLoader]="false"
|
||||
[showXAxis]="false"
|
||||
[showYAxis]="false"
|
||||
></gf-line-chart>
|
||||
</a>
|
||||
</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"
|
||||
[options]="dateRangeOptions"
|
||||
(change)="onChangeDateRange($event.value)"
|
||||
></gf-toggle>
|
||||
[locale]="user?.settings?.locale"
|
||||
[performance]="performance"
|
||||
[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 class="container">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<mat-card class="p-0">
|
||||
<mat-card-content>
|
||||
<gf-positions
|
||||
[baseCurrency]="user?.settings?.baseCurrency"
|
||||
[deviceType]="deviceType"
|
||||
[locale]="user?.settings?.locale"
|
||||
[positions]="positions"
|
||||
[range]="dateRange"
|
||||
></gf-positions>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div
|
||||
class="button-container d-flex justify-content-center position-absolute"
|
||||
>
|
||||
<a
|
||||
*ngIf="showPositionsButton"
|
||||
[routerLink]="['/home']"
|
||||
fragment="positions-container"
|
||||
i18n
|
||||
mat-flat-button
|
||||
(click)="showPositionsButton = false"
|
||||
>Positions</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-md-6 mb-3">
|
||||
<mat-card class="h-100">
|
||||
<mat-card-header>
|
||||
<mat-card-title i18n>Performance</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<gf-portfolio-performance
|
||||
[baseCurrency]="user?.settings?.baseCurrency"
|
||||
[isLoading]="isLoadingPerformance"
|
||||
[locale]="user?.settings?.locale"
|
||||
[performance]="performance"
|
||||
></gf-portfolio-performance>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<div id="positions-container" class="container positions">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<mat-card class="p-0">
|
||||
<mat-card-content>
|
||||
<gf-positions
|
||||
[baseCurrency]="user?.settings?.baseCurrency"
|
||||
[deviceType]="deviceType"
|
||||
[locale]="user?.settings?.locale"
|
||||
[positions]="positions"
|
||||
[range]="dateRange"
|
||||
></gf-positions>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</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 class="row">
|
||||
<div class="col-xs-12 col-md-6 mb-3">
|
||||
<mat-card class="h-100">
|
||||
<mat-card-header>
|
||||
<mat-card-title i18n>Performance</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<gf-portfolio-performance
|
||||
[baseCurrency]="user?.settings?.baseCurrency"
|
||||
[isLoading]="isLoadingPerformance"
|
||||
[locale]="user?.settings?.locale"
|
||||
[performance]="performance"
|
||||
></gf-portfolio-performance>
|
||||
</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>
|
||||
</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">
|
||||
<div class="row">
|
||||
<div class="chart-container col mr-3">
|
||||
<gf-line-chart
|
||||
symbol="Performance"
|
||||
[historicalDataItems]="historicalDataItems"
|
||||
[showLoader]="false"
|
||||
[showXAxis]="false"
|
||||
[showYAxis]="false"
|
||||
></gf-line-chart>
|
||||
<ng-container *ngIf="hasPositions || !historicalDataItems">
|
||||
<div class="container overview position-relative">
|
||||
<div class="row">
|
||||
<div class="chart-container col mr-3">
|
||||
<gf-line-chart
|
||||
symbol="Performance"
|
||||
[historicalDataItems]="historicalDataItems"
|
||||
[showLoader]="false"
|
||||
[showXAxis]="false"
|
||||
[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 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 id="positions-container" class="container positions">
|
||||
<div class="row mb-3">
|
||||
<div class="col">
|
||||
<mat-card class="p-0">
|
||||
<mat-card-content>
|
||||
<gf-positions
|
||||
[baseCurrency]="user?.settings?.baseCurrency"
|
||||
[deviceType]="deviceType"
|
||||
[locale]="user?.settings?.locale"
|
||||
[positions]="positions"
|
||||
[range]="dateRange"
|
||||
></gf-positions>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<div
|
||||
*ngIf="!hasPositions && historicalDataItems"
|
||||
class="d-flex justify-content-center my-5"
|
||||
>
|
||||
<gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
|
||||
</div>
|
||||
<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,38 +1,73 @@
|
||||
@import '~apps/client/src/styles/ghostfolio-style';
|
||||
|
||||
:host {
|
||||
color: rgb(var(--dark-primary-text));
|
||||
display: block;
|
||||
min-height: 100vh;
|
||||
|
||||
.container {
|
||||
&.overview {
|
||||
min-height: calc(100vh - 5rem);
|
||||
|
||||
.button-container {
|
||||
bottom: 3rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.chart-container {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-top: 3rem;
|
||||
max-height: 50vh;
|
||||
|
||||
// Fallback for aspect-ratio (using padding hack)
|
||||
@supports not (aspect-ratio: 16 / 9) {
|
||||
&::before {
|
||||
float: left;
|
||||
padding-top: 56.25%;
|
||||
content: '';
|
||||
.mat-flat-button {
|
||||
background-color: rgba(0, 0, 0, $alpha-hover);
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: block;
|
||||
content: '';
|
||||
clear: both;
|
||||
.chart-container {
|
||||
aspect-ratio: 16 / 9;
|
||||
margin-top: 3rem;
|
||||
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 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
&.positions {
|
||||
padding-top: 5rem;
|
||||
min-height: calc(100vh - 5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.is-dark-theme) {
|
||||
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