ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-09 17:52:38 -05:00
Code Issues 9 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"> <header class="header">
<button mat-stroked-button (click)="toggleLocked()" *ngIf="!locked"> <button mat-stroked-button (click)="toggleLocked()" *ngIf="!locked">
<mat-icon>lock_open</mat-icon> <mat-icon>lock_open</mat-icon>
@@ -9,23 +9,35 @@
Locked Locked
</button> </button>
</header> </header>
<gridster [options]="options"> <gridster class="content" [options]="options">
<gridster-item [item]="dashboard[0]"> <gridster-item [item]="dashboard[0]">
<div class="dashboard-item-header">Weather</div> <div class="dashboard-item">
<div class="dashboard-item-content"> <div class="dashboard-item-header">
<app-weather-current></app-weather-current> Weather
</div>
<div class="dashboard-item-content">
<app-weather-current></app-weather-current>
</div>
</div> </div>
</gridster-item> </gridster-item>
<gridster-item [item]="dashboard[1]"> <gridster-item [item]="dashboard[1]">
<div class="dashboard-item-header">Laundry</div> <div class="dashboard-item">
<div class="dashboard-item-content"> <div class="dashboard-item-header">
<app-laundry></app-laundry> Laundry
</div>
<div class="dashboard-item-content">
<app-laundry></app-laundry>
</div>
</div> </div>
</gridster-item> </gridster-item>
<gridster-item [item]="dashboard[2]"> <gridster-item [item]="dashboard[2]">
<div class="dashboard-item-header">Pressure Trend</div> <div class="dashboard-item">
<div class="dashboard-item-content"> <div class="dashboard-item-header">
<app-pressure-trend></app-pressure-trend> Pressure Trend
</div>
<div class="dashboard-item-content">
<app-pressure-trend></app-pressure-trend>
</div>
</div> </div>
</gridster-item> </gridster-item>
</gridster> </gridster>

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

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