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

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

@ -36,28 +36,21 @@
</button> </button>
</div> </div>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content> <mat-sidenav-content fxFlex fxLayout="column" fxLayoutAlign="center">
<div class="container containter-map"
fxLayout <div class="container-map" fxFlex="100%" fxLayout="column">
fxLayout.xs="column" <mat-card class="mat-card-map" fxFlex fxLayout="column">
fxLayoutAlign="center" <div class="mini-map" fxFlex fxLayout="column">
fxLayoutGap="10px" <div class="map-frame" fxFill>
fxLayoutGap.xs="0" <div fxFill id="minimap"></div>
>
<div class="mini-map"
fxFlex
>
<div class="map-frame" fxFlex>
<div fxFill id="map"></div>
</div> </div>
</div> </div>
</mat-card>
</div> </div>
<div class="container container-top"
fxLayout
fxLayout.xs="column" <div class="container container-table"
fxLayoutAlign="center" fxFlex fxLayout="row" fxLayoutAlign="center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
> >
<div class="dashboard-table-to" <div class="dashboard-table-to"
fxFlex="40%" fxFlex="40%"
@ -74,7 +67,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="avgDuration"> <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> <td *matCellDef="let element" mat-cell> {{element.avgDuration}} </td>
</ng-container> </ng-container>
@ -107,17 +100,15 @@
</div> </div>
</div> </div>
<div class="container container-middle"
fxLayout <div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
fxLayout.xs="column" <mat-card fxFlex="90%" fxLayout="column"
fxLayoutAlign="center center"
fxLayoutGap="10px"
fxLayoutGap.xs="0"
> >
<div class="dashboard-chart-borrow-duration" <mat-card-header>
fxFlex="80%" <mat-card-title>Borrow Duration</mat-card-title>
> </mat-card-header>
<div id="Station-Dashboard-Borrow-Duration"> <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<div fxFlex="80%" fxLayout="column" id="Station-Dashboard-Borrow-Duration">
<apx-chart <apx-chart
[chart]="durationChartOptions.chart" [chart]="durationChartOptions.chart"
[dataLabels]="durationChartOptions.dataLabels" [dataLabels]="durationChartOptions.dataLabels"
@ -130,20 +121,9 @@
[yaxis]="durationChartOptions.yaxis" [yaxis]="durationChartOptions.yaxis"
></apx-chart> ></apx-chart>
</div> </div>
</mat-card-content>
</mat-card>
</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>
</div>
</mat-sidenav-content> </mat-sidenav-content>
</mat-sidenav-container> </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 { .toolbar-spacer {
flex: 1 1 auto; flex: 1 1 auto;
} }
@ -28,15 +32,28 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
margin-top: 100px; 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; height: 40vh;
} }
.container-top { .container-table {
height: 20vh; height: 20vh;
} }
.container-middle { .container-borrow-duration {
height: 40vh height: 40vh
} }
@ -52,14 +69,6 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
margin: 5px; margin: 5px;
} }
.mini-map {
margin: 5px;
}
.dashboard-chart-borrow-duration {
margin: 5px;
}
.dashboard-chart-borrow-time { .dashboard-chart-borrow-time {
margin: 5px; margin: 5px;
background: chartreuse; background: chartreuse;