hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjust overall style to match common applications

Browse Source
This commit is contained in:
Tim Herbst 2020-12-23 14:31:44 +01:00
parent 7904963b3e
commit 575dad8646
2 changed files with 57 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
projects/project-3/frontend/src/app/dashboard/dashboard.component.html
View File

@ -36,28 +36,21 @@
</button>
</div>
</mat-sidenav>
<mat-sidenav-content>
<div class="container containter-map"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="mini-map"
fxFlex
>
<div class="map-frame" fxFlex>
<div fxFill id="map"></div>
<mat-sidenav-content fxFlex fxLayout="column" fxLayoutAlign="center">
<div class="container-map" fxFlex="100%" fxLayout="column">
<mat-card class="mat-card-map" fxFlex fxLayout="column">
<div class="mini-map" fxFlex fxLayout="column">
<div class="map-frame" fxFill>
<div fxFill id="minimap"></div>
</div>
</div>
</div>
</mat-card>
</div>
<div class="container container-top"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
<div class="container container-table"
fxFlex fxLayout="row" fxLayoutAlign="center"
>
<div class="dashboard-table-to"
fxFlex="40%"
@ -74,7 +67,7 @@
</ng-container>
<ng-container matColumnDef="avgDuration">
<th *matHeaderCellDef mat-header-cell> average Lend duration</th>
<th *matHeaderCellDef mat-header-cell> average lend duration</th>
<td *matCellDef="let element" mat-cell> {{element.avgDuration}} </td>
</ng-container>
@ -107,43 +100,30 @@
</div>
</div>
<div class="container container-middle"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="dashboard-chart-borrow-duration"
fxFlex="80%"
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex="90%" fxLayout="column"
>
<div id="Station-Dashboard-Borrow-Duration">
<apx-chart
[chart]="durationChartOptions.chart"
[dataLabels]="durationChartOptions.dataLabels"
[fill]="durationChartOptions.fill"
[legend]="durationChartOptions.legend"
[plotOptions]="durationChartOptions.plotOptions"
[series]="durationChartOptions.series"
[stroke]="durationChartOptions.stroke"
[xaxis]="durationChartOptions.xaxis"
[yaxis]="durationChartOptions.yaxis"
></apx-chart>
</div>
</div>
</div>
<div class="container container-bottom"
fxLayout
fxLayout.xs="column"
fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
>
<div class="dashboard-chart-borrow-time"
fxFlex
>
dashboard-chart-borrow-time
</div>
<mat-card-header>
<mat-card-title>Borrow Duration</mat-card-title>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<div fxFlex="80%" fxLayout="column" id="Station-Dashboard-Borrow-Duration">
<apx-chart
[chart]="durationChartOptions.chart"
[dataLabels]="durationChartOptions.dataLabels"
[fill]="durationChartOptions.fill"
[legend]="durationChartOptions.legend"
[plotOptions]="durationChartOptions.plotOptions"
[series]="durationChartOptions.series"
[stroke]="durationChartOptions.stroke"
[xaxis]="durationChartOptions.xaxis"
[yaxis]="durationChartOptions.yaxis"
></apx-chart>
</div>
</mat-card-content>
</mat-card>
</div>
</mat-sidenav-content>
</mat-sidenav-container>

31
projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
View File

@ -1,3 +1,7 @@
mat-sidenav-content {
background: #2f2f2f;
}
.toolbar-spacer {
flex: 1 1 auto;
}
@ -28,15 +32,28 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
margin-top: 100px;
}
.containter-map {
.mat-card {
padding: 1em 1em 1em;
margin: 3em;
}
.mat-card-map {
padding: 1px;
}
.mat-card-header {
display: flex;
justify-content: center;
}
.container-map {
height: 40vh;
}
.container-top {
.container-table {
height: 20vh;
}
.container-middle {
.container-borrow-duration {
height: 40vh
}
@ -52,14 +69,6 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
margin: 5px;
}
.mini-map {
margin: 5px;
}
.dashboard-chart-borrow-duration {
margin: 5px;
}
.dashboard-chart-borrow-time {
margin: 5px;
background: chartreuse;