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

fix(dashboard): improve cards sizes

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-10 19:57:04 +03:00
parent 60bd13a9f3
commit ae32ea40a7
13 changed files with 51 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/app/pages/charts/chart.js/chart-js.component.html
View file

@ -1,6 +1,6 @@
<div class="row">
<div class="col-md-4">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Pie</nga-card-header>
<nga-card-body>
<ngx-chart-js-pie></ngx-chart-js-pie>
@ -8,7 +8,7 @@
</nga-card>
</div>
<div class="col-md-4">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Bar</nga-card-header>
<nga-card-body>
<ngx-chart-js-bar></ngx-chart-js-bar>
@ -16,7 +16,7 @@
</nga-card>
</div>
<div class="col-md-4">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Line</nga-card-header>
<nga-card-body>
<ngx-chart-js-line></ngx-chart-js-line>

6
src/app/pages/charts/d3/d3.component.html
View file

@ -1,6 +1,6 @@
<div class="row">
<div class="col-md-6">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Pie</nga-card-header>
<nga-card-body>
<ngx-d3-pie></ngx-d3-pie>
@ -8,7 +8,7 @@
</nga-card>
</div>
<div class="col-md-6">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Bar</nga-card-header>
<nga-card-body>
<ngx-d3-bar></ngx-d3-bar>
@ -18,7 +18,7 @@
</div>
<div class="row">
<div class="col-md-6">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Line</nga-card-header>
<nga-card-body>
<ngx-d3-line></ngx-d3-line>

6
src/app/pages/charts/echarts/echarts.component.html
View file

@ -1,6 +1,6 @@
<div class="row">
<div class="col-md-6">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Pie</nga-card-header>
<nga-card-body>
<ngx-echarts-pie></ngx-echarts-pie>
@ -8,7 +8,7 @@
</nga-card>
</div>
<div class="col-md-6">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Bar</nga-card-header>
<nga-card-body>
<ngx-echarts-bar></ngx-echarts-bar>
@ -18,7 +18,7 @@
</div>
<div class="row">
<div class="col-md-6">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Line</nga-card-header>
<nga-card-body>
<ngx-echarts-line></ngx-echarts-line>

6
src/app/pages/dashboard/contacts/contacts.component.html
View file

@ -1,14 +1,14 @@
<nga-card size="xmedium">
<nga-card size="large">
<nga-tabset fullWidth>
<nga-tab tabTitle="Contacts">
<div class="contact" *ngFor="let c of contacts">
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user>
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nga-user>
<i class="i-contact ion-ios-telephone-outline"></i>
</div>
</nga-tab>
<nga-tab tabTitle="Recent">
<div class="contact" *ngFor="let c of recent">
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="xmedium"></nga-user>
<nga-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nga-user>
<span class="time">{{ c.time }}</span>
</div>
</nga-tab>

48
src/app/pages/dashboard/dashboard.component.html
View file

@ -7,7 +7,7 @@
</div>
<div class="col-lg-9">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>
Electricity
</nga-card-header>
@ -26,33 +26,29 @@
</div>
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-6">
<nga-card>
<nga-card-header>Solar Energy Consumption</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
<div class="col-lg-6">
<nga-card>
<nga-card-header>Traffic Consumption</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
<div class="col-lg-6">
<ngx-team></ngx-team>
</div>
<div class="col-lg-6">
<nga-card>
<nga-card-header>Calendar</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
</div>
<div class="col-lg-3">
<nga-card size="small">
<nga-card-header>Solar Energy Consumption</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
<ngx-team></ngx-team>
</div>
<div class="col-lg-3">
<nga-card size="small">
<nga-card-header>Traffic Consumption</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
<nga-card size="medium">
<nga-card-header>Calendar</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>
</div>
<div class="col-lg-6">
<nga-card>
<nga-card size="xlarge">
<nga-card-header>Security Cameras</nga-card-header>
<nga-card-body></nga-card-body>
</nga-card>

2
src/app/pages/dashboard/rooms/rooms.component.ts
View file

@ -4,7 +4,7 @@ import { Component } from '@angular/core';
selector: 'ngx-rooms',
styleUrls: ['./rooms.component.scss'],
template: `
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>
Room Management
</nga-card-header>

8
src/app/pages/dashboard/status-cards/status-cards.component.scss
View file

@ -17,8 +17,12 @@
$border-radius: nga-theme(card-border-radius);
.icon-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 7rem;
font-size: 4em;
padding: 0.5rem 1.75rem;
border-radius: $border-radius 0 0 $border-radius;
transition: all 0.1s ease-out, color 0s;
@ -109,7 +113,9 @@
border-left: 1px solid transparent;
}
.title {
font-family: nga-theme(font-secondary);
font-size: 1.5rem;
font-weight: nga-theme(font-weight-bolder);
}
.status {
font-size: 1.125rem;

6
src/app/pages/dashboard/status-cards/status-cards.component.ts
View file

@ -5,7 +5,7 @@ import { Component } from '@angular/core';
styleUrls: ['./status-cards.component.scss'],
template: `
<div class="row">
<div class="col-lg-3" *ngFor="let card of statusCards">
<div class="col-lg-3" *ngFor="let card of statusCards" size="xsmall">
<nga-card (click)="card.on = !card.on" [ngClass]="{'off': !card.on}">
<div class="icon-container {{card.type}}">
<i class="{{card.icon}}"></i>
@ -22,8 +22,8 @@ import { Component } from '@angular/core';
})
export class StatusCardsComponent {
statusCards = [
{ title: 'Light', on: true, type: 'primary', icon: 'ion-ios-game-controller-b-outline' },
{ title: 'RollerShades', on: true, type: 'success', icon: 'ion-ios-game-controller-b-outline' },
{ title: 'Light', on: true, type: 'primary', icon: 'ion-ios-lightbulb-outline' },
{ title: 'Roller Shades', on: true, type: 'success', icon: 'ion-ios-photos-outline' },
{ title: 'Wireless Audio', on: true, type: 'info', icon: 'ion-ios-game-controller-b-outline' },
{ title: 'Coffee Maker', on: true, type: 'warning', icon: 'ion-ios-game-controller-b-outline' },
];

2
src/app/pages/dashboard/team/team.component.html
View file

@ -1,4 +1,4 @@
<nga-card>
<nga-card size="medium">
<nga-card-body>
<div class="team-photo">
<a href="mailto:contact@akveo.com">

4
src/app/pages/dashboard/temperature/temperature.component.html
View file

@ -1,4 +1,4 @@
<nga-card size="xmedium">
<nga-card size="large">
<nga-tabset fullWidth>
<nga-tab tabTitle="Temperature">
@ -25,7 +25,7 @@
<input type="radio" value="cool"/><i class="ion-ios-snowy"></i>
</label>
<label class="btn btn-outline-primary btn-icon">
<input type="radio" value="heat"/><i class="ion-flame"></i>
<input type="radio" value="heat"/><i class="ion-ios-flame-outline"></i>
</label>
<label class="btn btn-outline-primary btn-icon">
<input type="radio" value="cool2"/><i class="ion-ios-snowy"></i>

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

@ -28,6 +28,7 @@
}
ngx-temperature-dragger {
margin-top: -3.5rem;
width: 80%;
}

2
src/app/pages/maps/gmaps/gmaps.component.html
View file

@ -1,6 +1,6 @@
<div class="row">
<div class="col-md-12">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Gmaps</nga-card-header>
<nga-card-body>
<agm-map [latitude]="lat" [longitude]="lng">

2
src/app/pages/maps/leaflet/leaflet.component.html
View file

@ -1,6 +1,6 @@
<div class="row">
<div class="col-md-12">
<nga-card size="xmedium">
<nga-card size="large">
<nga-card-header>Leaflet</nga-card-header>
<nga-card-body>
<div leaflet [leafletOptions]="options">