Hi Chris,
here is the template:
<ion-header>
<ion-navbar color="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Dashboard</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
<h3 [hidden]="displayDataAvailable" padding-left padding-right text-center>Nothing to display (No permission)</h3>
<div [hidden]="!displayDataAvailable">
<ion-row padding-left>
<ion-col>
<h3>Incidents</h3>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-33>
<ion-card class="topPriority card-dashboard" (click)="goToIncidents(2);">
<ion-card-content>
<p text-center style="font-size:30px;">{{incidentStatistics.numberOfTopPriorityIncidents}}</p>
<p text-center>Top</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col width-33>
<ion-card class="highPriority card-dashboard" (click)="goToIncidents(1);">
<ion-card-content>
<p text-center style="font-size:30px;">{{incidentStatistics.numberOfHighPriorityIncidents}}</p>
<p text-center>High</p>
</ion-card-content>
</ion-card>
</ion-col>
<ion-col width-33>
<ion-card class="lowPriority card-dashboard" (click)="goToIncidents(0);">
<ion-card-content>
<p text-center style="font-size:30px;">{{incidentStatistics.numberOfNormalPriorityIncidents}}</p>
<p text-center>Normal</p>
</ion-card-content>
</ion-card>
</ion-col>
</ion-row>
<ion-row [hidden]="!openedAlarms" padding-left>
<ion-col>
<h3>Alarm stack</h3>
</ion-col>
</ion-row>
<ion-list [hidden]="!openedAlarms">
<ion-item-sliding #item *ngFor="let alarm of alarms" (ionDrag)="ondrag($event, item, alarm.id)">
<ion-item (click)="goToAlarmStack()" >
<h2>{{alarm.alarmName}}</h2>
<p>{{alarm.raised}}</p>
</ion-item>
<ion-item-options side="right">
<button ion-button text-right expandable (click)="showPrompt(alarm.id)">
<ion-icon name="checkmark" role="img" style="font-size:24px;">
</ion-icon>
Close
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</div>
</ion-content>
and the dashboard.scss
ion-card {
min-height: 6.5em;
margin:0;
width: 100%;
ion-card-content p {
color:color($colors, white) !important;
}
}
.card-dashboard{
margin:0;
width: 100%;
}
.topPriority {
background: color($colors, topPriority);
}
.highPriority {
background: color($colors, highPriority);
}
.lowPriority {
background: color($colors, lowPriority);
}
.closeButtonDashboard{
width: 100% !important;
background: rgba(0,166,91,1);
background: -moz-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,166,91,1)), color-stop(100%, rgba(0,166,91,0.7)));
background: -webkit-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
background: -o-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
background: -ms-linear-gradient(left, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
background: linear-gradient(to right, rgba(0,166,91,1) 0%, rgba(0,166,91,0.7) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a65b', endColorstr='#00a65b', GradientType=1 );
}
.testBlurBackground {
filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-ms-filter: blur(3px);
}
Cheers