Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01: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 { i {
color: nb-theme(color-success); color: nb-theme(color-success);
font-size: 1.75rem; font-size: 2.25rem;
@include nb-for-theme(cosmic) { @include nb-for-theme(cosmic) {
color: nb-theme(link-color-active); 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)', areaGradFrom: 'rgba(188, 92, 255, 0.5)',
areaGradTo: 'rgba(188, 92, 255, 0)', areaGradTo: 'rgba(188, 92, 255, 0)',
areaOpacity: '1',
shadowLineDarkBg: '#a695ff', shadowLineDarkBg: '#a695ff',
}, },

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

@ -53,6 +53,7 @@ export const DEFAULT_THEME = {
areaGradFrom: '#ebeef2', areaGradFrom: '#ebeef2',
areaGradTo: '#ebeef2', areaGradTo: '#ebeef2',
areaOpacity: '0.5',
shadowLineDarkBg: 'rgba(0, 0, 0, 0)', 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, offset: 1,
color: eTheme.areaGradTo, color: eTheme.areaGradTo,
}]), }]),
opacity: 1, opacity: eTheme.areaOpacity,
}, },
}, },
data: this.data.map(i => i.value), data: this.data.map(i => i.value),

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

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

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

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

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

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

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

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