Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-19 17:00:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): improve electricity table styles

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-13 11:49:38 +03:00
parent 009e5788ac
commit 7616cb8a4a
6 changed files with 129 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/app/@theme/components/header/header.component.ts
View file

@ -2,6 +2,7 @@ import { Component } from '@angular/core';
import { NgaSidebarService, NgaMenuService } from '@akveo/nga-theme';
import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
import { UserService } from '../../../@core/data/users.service';
@Component({
selector: 'ngx-header',
@ -22,7 +23,7 @@ import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
<nga-user [menu]="userMenu" [name]="user.name" [picture]="user.picture"></nga-user>
</nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions>
@ -30,6 +31,8 @@ import { NgaThemeService } from '@akveo/nga-theme/services/theme.service';
})
export class HeaderComponent {
user: any;
userMenu = [
{
title: 'Profile',
@ -41,7 +44,9 @@ export class HeaderComponent {
constructor(private sidebarService: NgaSidebarService,
private menuService: NgaMenuService,
private themeService: NgaThemeService) {
private themeService: NgaThemeService,
private userService: UserService) {
this.user = this.userService.getUsers().nick;
}
toggleSidebar(): boolean {

2
src/app/pages/dashboard/contacts/contacts.component.scss
View file

@ -14,7 +14,7 @@
nga-tab {
flex: 1;
overflow-y: scroll;
overflow-y: auto;
padding: 0;
}

27
src/app/pages/dashboard/electricity/electricity.component.html
View file

@ -6,37 +6,20 @@
</div>
<nga-tabset fullWidth>
<nga-tab tabTitle="2015">
<div class="stats-row" *ngFor="let row of data[2015]">
<div class="month">
<span>{{ row.month }}</span>
<span class="delta" [ngClass]="{ 'down': row.down }">{{ row.delta }}</span>
</div>
<div class="results">
<b>{{ row.kWatts }}</b> kWh / <b>{{ row.cost }}</b> USD
</div>
</div>
</nga-tab>
<nga-tab tabTitle="2016" active>
<div class="stats-row" *ngFor="let row of data[2015]">
<nga-tab *ngFor="let year of data" [tabTitle]="year.title" [active]="year.active">
<div class="stats-month" *ngFor="let month of year.months">
<div>
<span class="month">{{ row.month }}</span>
<span class="delta" [ngClass]="{ 'down': row.down }">{{ row.delta }}</span>
<span class="month">{{ month.month }}</span>
<span class="delta" [ngClass]="{ 'down': month.down }">{{ month.delta }}</span>
</div>
<div class="results">
<b>{{ row.kWatts }}</b> kWh / <b>{{ row.cost }}</b> USD
<b>{{ month.kWatts }}</b> kWh / <b>{{ month.cost }}</b> USD
</div>
</div>
</nga-tab>
<nga-tab tabTitle="2017">
2017 year data
</nga-tab>
</nga-tabset>
</div>
<div class="chart">
</div>
</nga-card>

39
src/app/pages/dashboard/electricity/electricity.component.scss
View file

@ -14,12 +14,13 @@
flex-direction: column;
width: 20rem;
height: 100%;
z-index: 2;
box-shadow: nga-theme(card-shadow);
}
.table-header {
@include nga-card-header();
font-size: 1.5rem;
border-bottom: 1px solid nga-theme(separator);
.subtitle {
color: nga-theme(color-fg);
@ -31,10 +32,15 @@
nga-tabset /deep/ {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
ul {
align-items: center;
padding: 1rem;
border-top: 1px solid nga-theme(separator);
border-bottom: 1px solid nga-theme(separator);
}
ul li a {
@ -53,16 +59,26 @@
display: none;
}
}
nga-tab {
flex: 1;
overflow-y: auto;
}
}
.stats-row {
.stats-month {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
&:not(:first-child) {
border-top: 1px solid nga-theme(separator);
}
.month {
display: inline-block;
width: 2.75rem;
font-family: nga-theme(font-secondary);
font-size: 1.25rem;
font-weight: nga-theme(font-weight-bolder);
@ -70,15 +86,32 @@
}
.delta {
position: relative;
display: inline-block;
padding-left: 1rem;
font-size: 0.75rem;
font-weight: nga-theme(font-weight-light);
color: text-danger();
&::before {
position: absolute;
content: '';
bottom: 3px;
left: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid text-danger();
}
&.down {
color: text-success();
&::before {
top: 3px;
border-top: 8px solid text-success();
border-bottom: none;
}
}
}

55
src/app/pages/dashboard/electricity/electricity.component.ts
View file

@ -1,14 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
@Component({
selector: 'ngx-electricity',
styleUrls: ['./electricity.component.scss'],
templateUrl: './electricity.component.html',
})
export class ElectricityComponent implements OnInit {
export class ElectricityComponent {
data = {
2015: [
data = [
{
title: '2015',
months: [
{ month: 'Jan', delta: '0.97', down: true, kWatts: '816', cost: '97' },
{ month: 'Feb', delta: '1.83', down: true, kWatts: '806', cost: '95' },
{ month: 'Mar', delta: '0.64', down: true, kWatts: '803', cost: '94' },
@ -21,11 +23,42 @@ export class ElectricityComponent implements OnInit {
{ month: 'Oct', delta: '0.16', down: true, kWatts: '791', cost: '92' },
{ month: 'Nov', delta: '1.71', down: true, kWatts: '786', cost: '89' },
{ month: 'Dec', delta: '0.37', down: false, kWatts: '789', cost: '91' },
],
2016: [],
2017: [],
};
ngOnInit() {
}
]
},
{
title: '2016',
active: true,
months: [
{ month: 'Jan', delta: '1.56', down: true, kWatts: '789', cost: '91' },
{ month: 'Feb', delta: '0.33', down: false, kWatts: '791', cost: '92' },
{ month: 'Mar', delta: '0.62', down: true, kWatts: '790', cost: '92' },
{ month: 'Apr', delta: '1.93', down: true, kWatts: '783', cost: '87' },
{ month: 'May', delta: '2.52', down: true, kWatts: '771', cost: '83' },
{ month: 'Jun', delta: '0.39', down: false, kWatts: '774', cost: '85' },
{ month: 'Jul', delta: '1.61', down: true, kWatts: '767', cost: '81' },
{ month: 'Aug', delta: '1.41', down: true, kWatts: '759', cost: '76' },
{ month: 'Sept', delta: '1.03', down: true, kWatts: '752', cost: '74' },
{ month: 'Oct', delta: '2.94', down: false, kWatts: '769', cost: '82' },
{ month: 'Nov', delta: '0.26', down: true, kWatts: '767', cost: '81' },
{ month: 'Dec', delta: '1.62', down: true, kWatts: '760', cost: '76' },
]
},
{
title: '2017',
months: [
{ month: 'Jan', delta: '1.34', down: false, kWatts: '789', cost: '91' },
{ month: 'Feb', delta: '0.95', down: false, kWatts: '793', cost: '93' },
{ month: 'Mar', delta: '0.25', down: true, kWatts: '791', cost: '92' },
{ month: 'Apr', delta: '1.72', down: false, kWatts: '797', cost: '95' },
{ month: 'May', delta: '2.62', down: true, kWatts: '786', cost: '90' },
{ month: 'Jun', delta: '0.72', down: false, kWatts: '789', cost: '91' },
{ month: 'Jul', delta: '0.78', down: true, kWatts: '784', cost: '89' },
{ month: 'Aug', delta: '0.36', down: true, kWatts: '782', cost: '88' },
{ month: 'Sept', delta: '0.55', down: false, kWatts: '787', cost: '90' },
{ month: 'Oct', delta: '1.81', down: true, kWatts: '779', cost: '86' },
{ month: 'Nov', delta: '1.12', down: true, kWatts: '774', cost: '84' },
{ month: 'Dec', delta: '0.52', down: false, kWatts: '776', cost: '95' },
]
},
];
}

24
src/app/pages/dashboard/temperature/temperature.component.scss
View file

@ -74,6 +74,10 @@
}
}
.btn-group {
padding: 1.25rem;
}
.btn-icon {
display: flex;
align-items: center;
@ -82,12 +86,30 @@
border-color: nga-theme(form-control-border-color);
width: 4.5rem;
height: 4.5rem;
font-size: 2rem;
padding: 0;
margin: 0;
&.active {
border-color: nga-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nga-theme(color-fg-highlight), 0.25);
background-color: rgba(nga-theme(color-fg-highlight), 0.25);
}
i {
font-size: 2rem;
line-height: 1;
}
.ion-ios-snowy {
font-size: 2.5rem;
}
.ion-ios-sunny-outline {
font-size: 2.5rem;
}
.ion-ios-flame-outline {
font-size: 2.25rem;
}
.ion-ios-loop {
font-size: 1.75rem;
}
}
}