ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-02-16 10:58:32 -05:00
Code Issues 9 Packages Projects Releases Wiki Activity

More dashboard layout - getting there

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-06 20:19:08 -04:00
parent 7c062dbc04
commit ef46efbbc2
4 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,13 +11,22 @@
</header> </header>
<gridster [options]="options"> <gridster [options]="options">
<gridster-item [item]="dashboard[0]"> <gridster-item [item]="dashboard[0]">
<app-weather-current></app-weather-current> <div class="dashboard-item-header">Weather</div>
<div class="dashboard-item-content">
<app-weather-current></app-weather-current>
</div>
</gridster-item> </gridster-item>
<gridster-item [item]="dashboard[1]"> <gridster-item [item]="dashboard[1]">
<app-laundry></app-laundry> <div class="dashboard-item-header">Laundry</div>
<div class="dashboard-item-content">
<app-laundry></app-laundry>
</div>
</gridster-item> </gridster-item>
<gridster-item [item]="dashboard[2]"> <gridster-item [item]="dashboard[2]">
<app-pressure-trend></app-pressure-trend> <div class="dashboard-item-header">Pressure Trend</div>
<div class="dashboard-item-content">
<app-pressure-trend></app-pressure-trend>
</div>
</gridster-item> </gridster-item>
</gridster> </gridster>
</div> </div>

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

@@ -15,3 +15,14 @@ gridster {
flex: 0 0 auto; flex: 0 0 auto;
text-align: right; text-align: right;
} }
.dashboard-item-header {
color: white;
background-color: #673ab7;
padding: 10px;
}
.dashboard-item-content {
border: 1px solid lightgray;
height: calc(100% - 41px);
}

4
Display/src/app/components/weather/pressure-trend/pressure-trend.component.html
View File

@@ -1 +1,3 @@
<mat-icon id="pressure-arrow" *ngIf="pressureDifference !== null" [ngClass]="rotationClass()">arrow_right_alt</mat-icon> <div class="pressure-trend-container">
<mat-icon id="pressure-arrow" *ngIf="pressureDifference !== null" [ngClass]="rotationClass()">arrow_right_alt</mat-icon>
</div>

4
Display/src/app/components/weather/pressure-trend/pressure-trend.component.scss
View File

@@ -1,3 +1,7 @@
.pressure-trend-container {
height: calc(100% - 40px);
}
#pressure-arrow { #pressure-arrow {
position: relative; position: relative;
top: 50%; top: 50%;