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

feat(dashboard): add a weather widget (#14)

Browse source
This commit is contained in:
Lex Zhukov 2017-07-12 19:33:43 +03:00 • committed by GitHub
parent 05c15bb314
commit 92c59b2834
6 changed files with 186 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -36,11 +36,7 @@
<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>
<ngx-weather></ngx-weather>
</div>
<div class="col-lg-6">

2
src/app/pages/dashboard/dashboard.module.ts
View file

@ -12,6 +12,7 @@ import { TemperatureDraggerComponent } from './temperature/temperature-dragger/t
import { TeamComponent } from './team/team.component';
import { SecurityCamerasComponent } from './security-cameras/security-cameras.component';
import { ElectricityComponent } from './electricity/electricity.component';
import { WeatherComponent } from './weather/weather.component';
@NgModule({
imports: [
@ -30,6 +31,7 @@ import { ElectricityComponent } from './electricity/electricity.component';
TeamComponent,
SecurityCamerasComponent,
ElectricityComponent,
WeatherComponent,
],
})
export class DashboardModule { }

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

@ -72,7 +72,7 @@
position: absolute;
width: 100%;
height: 210px;
opacity: 0.5;
opacity: 0.2;
transition: 0.1s;
}

60
src/app/pages/dashboard/weather/weather.component.html Normal file
View file

@ -0,0 +1,60 @@
<nga-card size="medium">
<nga-card-body>
<div class="location">
<span>Minsk</span>
</div>
<div class="date">
<span>Mon 29 May</span>
</div>
<div class="daily-forecast">
<div class="info">
<div class="temperature">
<span>20&deg;</span>
</div>
<div class="icon">
<i class="ion-ios-sunny-outline"></i>
</div>
</div>
<div class="details">
<div class="parameter">
<span class="parameter-name">max</span>
<span class="parameter-value">23&deg;</span>
</div>
<div class="parameter">
<span class="parameter-name">min</span>
<span class="parameter-value">19&deg;</span>
</div>
<div class="parameter">
<span class="parameter-name">wind</span>
<span class="parameter-value">4 km/h</span>
</div>
<div class="parameter">
<span class="parameter-name">hum</span>
<span class="parameter-value">87%</span>
</div>
</div>
</div>
<div class="weekly-forecast">
<div class="day">
<span class="caption">Sun</span>
<i class="ion-ios-cloudy-outline"></i>
<span class="temperature">17&deg;</span>
</div>
<div class="day">
<span class="caption">Mon</span>
<i class="ion-ios-sunny-outline"></i>
<span class="temperature">19&deg;</span>
</div>
<div class="day">
<span class="caption">Tue</span>
<i class="ion-ios-rainy-outline"></i>
<span class="temperature">22&deg;</span>
</div>
<div class="day">
<span class="caption">Wed</span>
<i class="ion-ios-partlysunny-outline"></i>
<span class="temperature">21&deg;</span>
</div>
</div>
</nga-card-body>
</nga-card>

112
src/app/pages/dashboard/weather/weather.component.scss Normal file
View file

@ -0,0 +1,112 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
nga-card {
nga-card-body {
height: 100%;
padding: 2rem;
background-image: radial-gradient(circle at 50% 50%, #423f8c, #302c6e);
}
}
.location {
font-family: nga-theme(font-secondary);
font-size: 3rem;
line-height: 3rem;
font-weight: nga-theme(font-weight-light);
color: nga-theme(color-fg-heading);
}
.date {
font-family: nga-theme(font-main);
font-size: 1.25rem;
line-height: 1.25rem;
font-weight: nga-theme(font-weight-light);
}
.daily-forecast {
display: flex;
flex-direction: column;
margin-top: -1.5rem;
.info {
display: flex;
justify-content: space-around;
.temperature {
font-size: 5rem;
font-weight: nga-theme(font-weight-bolder);
font-family: nga-theme(font-secondary);
color: nga-theme(color-fg-heading);
display: flex;
flex-direction: column;
justify-content: center;
}
.icon {
font-size: 10rem;
line-height: 10rem;
text-shadow: 0 3px 0 #665ebd,
0 4px 10px rgba(33, 7, 77, 0.5),
0 2px 10px #928dff;
}
}
.details {
display: flex;
justify-content: space-around;
.parameter {
display: flex;
flex-direction: column;
text-align: center;
.parameter-name {
font-family: nga-theme(font-main);
font-size: 1.25rem;
font-weight: nga-theme(font-weight-light);
line-height: 2rem;
}
.parameter-value {
font-family: nga-theme(font-secondary);
color: nga-theme(color-fg-heading);
font-weight: nga-theme(font-weight-bolder);
}
}
}
}
.weekly-forecast {
display: flex;
justify-content: space-around;
margin-top: 2rem;
.day {
display: flex;
flex-direction: column;
text-align: center;
.caption {
text-transform: uppercase;
font-family: nga-theme(font-secondary);
color: nga-theme(color-fg-heading);
font-weight: nga-theme(font-weight-bold);
font-size: 1.25rem;
}
i {
font-size: 2.5rem;
line-height: 2.5rem;
}
.temperature {
color: nga-theme(color-fg-heading);
font-family: nga-theme(font-secondary);
font-weight: nga-theme(font-weight-bold);
font-size: 1.25rem;
}
}
}
}

10
src/app/pages/dashboard/weather/weather.component.ts Normal file
View file

@ -0,0 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-weather',
styleUrls: ['./weather.component.scss'],
templateUrl: './weather.component.html',
})
export class WeatherComponent {
}