ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-14 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Do dashboard item layout the right way

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-07 19:25:00 -04:00
parent ef46efbbc2
commit f6404fbcb2
2 changed files with 38 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Display/src/app/components/dashboard/dashboard.component.html
View File

@@ -1,4 +1,4 @@
<div class="content">
<div class="main">
<header class="header">
<button mat-stroked-button (click)="toggleLocked()" *ngIf="!locked">
<mat-icon>lock_open</mat-icon>
@@ -9,23 +9,35 @@
Locked
</button>
</header>
<gridster [options]="options">
<gridster class="content" [options]="options">
<gridster-item [item]="dashboard[0]">
<div class="dashboard-item-header">Weather</div>
<div class="dashboard-item-content">
<app-weather-current></app-weather-current>
<div class="dashboard-item">
<div class="dashboard-item-header">
Weather
</div>
<div class="dashboard-item-content">
<app-weather-current></app-weather-current>
</div>
</div>
</gridster-item>
<gridster-item [item]="dashboard[1]">
<div class="dashboard-item-header">Laundry</div>
<div class="dashboard-item-content">
<app-laundry></app-laundry>
<div class="dashboard-item">
<div class="dashboard-item-header">
Laundry
</div>
<div class="dashboard-item-content">
<app-laundry></app-laundry>
</div>
</div>
</gridster-item>
<gridster-item [item]="dashboard[2]">
<div class="dashboard-item-header">Pressure Trend</div>
<div class="dashboard-item-content">
<app-pressure-trend></app-pressure-trend>
<div class="dashboard-item">
<div class="dashboard-item-header">
Pressure Trend
</div>
<div class="dashboard-item-content">
<app-pressure-trend></app-pressure-trend>
</div>
</div>
</gridster-item>
</gridster>

23
Display/src/app/components/dashboard/dashboard.component.scss
View File

@@ -1,9 +1,4 @@
gridster {
background: #fafafa;
flex: 1 1 auto;
}
.content {
.main {
display: flex;
flex-flow: column;
height: 100%;
@@ -16,13 +11,25 @@ gridster {
text-align: right;
}
.content {
background: #fafafa;
flex: 1 1 auto;
}
.dashboard-item {
height: 100%;
display: flex;
flex-direction: column;
}
.dashboard-item-header {
color: white;
background-color: #673ab7;
padding: 10px;
flex: 0 0 auto;
}
.dashboard-item-content {
border: 1px solid lightgray;
height: calc(100% - 41px);
border: 1px solid lightgray;
flex: 1 1 auto;
}