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 layout for dashboard cards

Browse source
This commit is contained in:
KostyaDanovsky 2017-09-15 17:15:59 +03:00
parent 96c5cbde66
commit 2f9287e937
9 changed files with 42 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/app/@theme/components/header/header.component.scss
View file

@ -144,11 +144,10 @@
i {
color: nb-theme(color-success);
font-size: 1.75rem;
font-size: 2.25rem;
@include nb-for-theme(cosmic) {
color: nb-theme(link-color-active);
text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
}
}
}

1
src/app/@theme/styles/theme.cosmic.ts
View file

@ -59,6 +59,7 @@ export const COSMIC_THEME = {
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)',
areaOpacity: '1',
shadowLineDarkBg: '#a695ff',
},

1
src/app/@theme/styles/theme.default.ts
View file

@ -53,6 +53,7 @@ export const DEFAULT_THEME = {
areaGradFrom: '#ebeef2',
areaGradTo: '#ebeef2',
areaOpacity: '0.5',
shadowLineDarkBg: 'rgba(0, 0, 0, 0)',
},

2
src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.ts
View file

@ -153,7 +153,7 @@ export class ElectricityChartComponent implements AfterViewInit {
offset: 1,
color: eTheme.areaGradTo,
}]),
opacity: 1,
opacity: eTheme.areaOpacity,
},
},
data: this.data.map(i => i.value),

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

@ -32,17 +32,17 @@
</div>
<div class="stats-block">
<div class="subtitle">Value</div>
<div class="subtitle">Spent</div>
<div>
<span class="value">91</span>
<span class="value">291</span>
<span class="unit">USD</span>
</div>
</div>
</div>
<div ngbDropdown [ngClass]="{'ghost-dropdown': currentTheme == 'default'}">
<div ngbDropdown>
<button type="button" ngbDropdownToggle class="btn"
[ngClass]="{ 'btn-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
[ngClass]="{ 'btn-outline-success': currentTheme == 'default', 'btn-primary': currentTheme != 'default'}">
{{ type }}
</button>
<ul class="dropdown-menu">

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

@ -22,12 +22,12 @@
.table-header {
@include nb-card-header();
font-size: 1.5rem;
font-size: 1.25rem;
.subtitle {
color: nb-theme(color-fg);
font-family: nb-theme(font-primary);
font-size: 1.125rem;
font-family: nb-theme(font-main);
font-size: 1rem;
font-weight: nb-theme(font-weight-light);
}
}
@ -82,7 +82,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
padding: nb-theme(padding);
color: nb-theme(color-fg);
&:not(:first-child) {
@ -153,7 +153,7 @@
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.75rem;
padding: 1rem 1.75rem 1rem 1rem;
}
.header-stats {
@ -162,21 +162,22 @@
}
.stats-block {
margin-right: 1rem;
display: flex;
flex-direction: column;
align-items: center;
color: nb-theme(color-fg);
&:first-child {
margin-right: 2.5rem;
}
padding: 0 1.5rem;
border-right: 1px solid nb-theme(separator);
.subtitle {
font-size: 1.125rem;
font-size: 1rem;
font-weight: nb-theme(font-weight-light);
}
.value {
font-family: nb-theme(font-secondary);
font-size: 2rem;
font-weight: nb-theme(font-weight-bolder);
font-size: 1.5rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(color-fg-heading);
}
@ -200,6 +201,10 @@
display: none;
}
}
.stats-block .value {
font-weight: nb-theme(font-weight-bolder);
}
}
@include media-breakpoint-between(md, xl) {

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

@ -124,7 +124,6 @@
@include nb-for-theme(cosmic) {
.cameras-filter a.active {
color: nb-theme(color-fg-highlight);
text-shadow: 0 0 12px rgba(nb-theme(color-fg-highlight), 0.4);
}
.camera {

20
src/app/pages/dashboard/status-card/status-card.component.scss
View file

@ -16,7 +16,6 @@
.icon-container {
height: 100%;
padding: 0.625rem;
border-right: 1px solid nb-theme(separator);
}
.icon {
@ -70,10 +69,6 @@
&.off {
color: nb-theme(card-fg);
.icon-container {
border-right: 1px solid nb-theme(separator);
}
.icon {
color: nb-theme(card-fg);
@ -93,19 +88,19 @@
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0 0.5rem 0 1.25rem;
padding: 0 0.5rem 0 0.75rem;
border-left: 1px solid transparent;
}
.title {
font-family: nb-theme(font-secondary);
font-size: 1.5rem;
font-size: 1.25rem;
font-weight: nb-theme(font-weight-bold);
color: nb-theme(card-fg-heading);
}
.status {
font-size: 1.125rem;
font-size: 1rem;
font-weight: nb-theme(font-weight-light);
text-transform: uppercase;
color: nb-theme(card-fg);
@ -114,9 +109,16 @@
@include nb-for-theme(cosmic) {
nb-card {
&.off .icon-container {
border-right: 1px solid nb-theme(separator);
}
.icon-container {
padding: 0;
border-right: none;
}
.details {
padding-left: 1.25rem;
}
.icon {

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

@ -4,10 +4,6 @@
@include nb-install-component() {
nb-card {
background-image: nb-theme(radial-gradient);
}
nb-tabset {
display: flex;
flex-direction: column;
@ -101,7 +97,6 @@
align-items: center;
justify-content: center;
border-color: nb-theme(separator);
width: 4.5rem;
height: 4.5rem;
padding: 0;
@ -120,15 +115,11 @@
}
@include nb-for-theme(cosmic) {
.btn-icon {
border-color: nb-theme(form-control-border-color);
&.active {
color: nb-theme(color-fg-heading);
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
}
.btn-icon.active {
color: nb-theme(color-fg-heading);
border-color: nb-theme(color-fg-highlight);
box-shadow: 0 2px 12px 0 rgba(nb-theme(color-fg-highlight), 0.25);
background-color: rgba(nb-theme(color-fg-highlight), 0.25);
}
}