Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-09-22 05:50:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(dashboard): improve dashboard responsiveness

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-11 19:37:55 +03:00
parent b7a8f6cb15
commit c533cd7d5c
5 changed files with 35 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
<nb-card size="large">
<nb-card [size]="breakpoint.width >= 1600 ? 'large' : 'xlarge'">
<nb-tabset fullWidth>
<nb-tab tabTitle="Contacts">
<div class="contact" *ngFor="let c of contacts">

10
src/app/pages/dashboard/contacts/contacts.component.ts
View file

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { NbThemeService, NbMediaBreakpoint } from '@nebular/theme';
import { UserService } from '../../../@core/data/users.service';
@ -10,10 +11,14 @@ import { UserService } from '../../../@core/data/users.service';
export class ContactsComponent implements OnInit {
contacts: any[];
recent: any[];
breakpoint: NbMediaBreakpoint;
constructor(private userService: UserService) {
constructor(private userService: UserService, private themeService: NbThemeService) {
themeService.onMediaQueryChange()
.subscribe(([oldValue, newValue]) => {
this.breakpoint = newValue;
});
}
ngOnInit() {
@ -41,5 +46,4 @@ export class ContactsComponent implements OnInit {
];
});
}
}

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

@ -25,27 +25,25 @@
</div>
<div class="row">
<div class="col-lg-3">
<div class="col-xxxl-3 col-xl-4 col-lg-5 col-md-12">
<ngx-temperature></ngx-temperature>
</div>
<div class="col-lg-9">
<div class="col-xxxl-9 col-xl-8 col-lg-7 col-md-12">
<ngx-electricity></ngx-electricity>
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="col-xxxl-9 col-xl-12">
<ngx-rooms></ngx-rooms>
</div>
<div class="col-lg-3">
<div class="col-xxxl-3 col-xxl-4 col-lg-7 col-md-6">
<ngx-contacts></ngx-contacts>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="col-xxxl-3 col-xxl-4 col-lg-5 col-md-6">
<nb-card size="xsmall" class="solar-card">
<nb-card-header>Solar Energy Consumption</nb-card-header>
<nb-card-body>
@ -56,12 +54,12 @@
<ngx-kitten></ngx-kitten>
</div>
<div class="col-lg-3">
<div class="col-xxxl-3 col-xxl-4 col-md-5">
<ngx-traffic></ngx-traffic>
<ngx-weather></ngx-weather>
</div>
<div class="col-lg-6">
<div class="col-xxxl-6 col-xxl-12 col-md-7">
<ngx-security-cameras></ngx-security-cameras>
</div>
</div>

4
src/app/pages/dashboard/security-cameras/security-cameras.component.html
View file

@ -28,10 +28,10 @@
<nb-card-footer>
<nb-actions size="medium" fullWidth>
<nb-action>
<i class="nb-pause"></i><span>Pause</span>
<i class="nb-pause-outline"></i><span>Pause</span>
</nb-action>
<nb-action>
<i class="nb-list"></i><span>Log View</span>
<i class="nb-list"></i><span>Logs</span>
</nb-action>
<nb-action>
<i class="nb-search"></i><span>Search</span>

20
src/app/pages/dashboard/security-cameras/security-cameras.component.scss
View file

@ -1,4 +1,6 @@
@import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';
@include nb-install-component() {
nb-card-header {
@ -103,10 +105,12 @@
}
nb-action {
padding: 0 0.5rem 0 0;
i {
color: nb-theme(color-fg);
font-size: 2rem;
margin-right: 1rem;
font-size: 3rem;
margin-right: 0.5rem;
}
span {
@ -137,4 +141,16 @@
font-weight: nb-theme(font-weight-bolder);
}
}
@include media-breakpoint-down(lg) {
nb-action {
padding: 0;
i {
margin: 0;
}
span {
display: none;
}
}
}
}