Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-28 10:54:07 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(iot): weather widget

Browse source
This commit is contained in:
Sergey Andrievskiy 2019-06-18 17:21:21 +03:00
parent 4d2181f11e
commit c1d2ebbbd2
2 changed files with 74 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/app/pages/dashboard/weather/weather.component.html
View file

@ -1,58 +1,51 @@
<nb-card size="medium"> <nb-card size="medium">
<nb-card-body> <nb-card-body>
<div class="location"> <span class="h3 location">New York</span>
<span>New York</span> <span class="date">Mon 29 May</span>
<div class="today">
<span class="today-temperature h1">20&deg;</span>
<nb-icon icon="sun-outline" pack="eva" class="today-icon"></nb-icon>
</div> </div>
<div class="date">
<span>Mon 29 May</span> <div class="today-details">
</div> <div class="parameter">
<div class="daily-forecast"> <span class="caption parameter-name">max</span>
<div class="info"> <span class="parameter-value">23&deg;</span>
<div class="temperature">
<span>20&deg;</span>
</div>
<div class="icon">
<i class="ion-ios-sunny-outline"></i>
</div>
</div> </div>
<div class="details"> <div class="parameter">
<div class="parameter"> <span class="caption parameter-name">min</span>
<span class="parameter-name">max</span> <span class="parameter-value">19&deg;</span>
<span class="parameter-value">23&deg;</span> </div>
</div> <div class="parameter">
<div class="parameter"> <span class="caption parameter-name">wind</span>
<span class="parameter-name">min</span> <span class="parameter-value">4 km/h</span>
<span class="parameter-value">19&deg;</span> </div>
</div> <div class="parameter">
<div class="parameter"> <span class="caption parameter-name">hum</span>
<span class="parameter-name">wind</span> <span class="parameter-value">87%</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> </div>
<div class="weekly-forecast"> <div class="weekly-forecast">
<div class="day"> <div class="day">
<span class="caption">Sun</span> <span class="caption">Sun</span>
<i class="ion-ios-cloudy-outline"></i> <i class="weather-icon ion-ios-cloudy-outline"></i>
<span class="temperature">17&deg;</span> <span class="temperature">17&deg;</span>
</div> </div>
<div class="day"> <div class="day">
<span class="caption">Mon</span> <span class="caption">Mon</span>
<i class="ion-ios-sunny-outline"></i> <i class="weather-icon ion-ios-sunny-outline"></i>
<span class="temperature">19&deg;</span> <span class="temperature">19&deg;</span>
</div> </div>
<div class="day"> <div class="day">
<span class="caption">Tue</span> <span class="caption">Tue</span>
<i class="ion-ios-rainy-outline"></i> <i class="weather-icon ion-ios-rainy-outline"></i>
<span class="temperature">22&deg;</span> <span class="temperature">22&deg;</span>
</div> </div>
<div class="day"> <div class="day">
<span class="caption">Wed</span> <span class="caption">Wed</span>
<i class="ion-ios-partlysunny-outline"></i> <i class="weather-icon ion-ios-partlysunny-outline"></i>
<span class="temperature">21&deg;</span> <span class="temperature">21&deg;</span>
</div> </div>
</div> </div>

150
src/app/pages/dashboard/weather/weather.component.scss
View file

@ -1,132 +1,76 @@
@import '../../../@theme/styles/themes'; @import '../../../@theme/styles/themes';
@import '~@nebular/theme/styles/global/breakpoints';
@import '~bootstrap/scss/mixins/breakpoints';
@include nb-install-component() { @include nb-install-component() {
nb-card { nb-card-body {
background-image: nb-theme(radial-gradient); display: flex;
flex-direction: column;
} }
nb-card-body { .location,
height: 100%; .date {
padding: 2rem; display: block;
color: nb-theme(color-fg);
} }
.location { .location {
font-family: nb-theme(font-secondary); margin-bottom: 0.1rem;
font-size: 2.5rem;
font-weight: nb-theme(font-weight-normal);
color: nb-theme(color-fg-heading);
} }
.date { .today {
font-family: nb-theme(font-main); display: flex;
font-size: 1.25rem; justify-content: space-around;
line-height: 1.25rem;
font-weight: nb-theme(font-weight-light);
} }
.daily-forecast { .today-temperature {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: -1.5rem; justify-content: center;
margin: 2rem 1.5rem;
}
.info { .today-icon {
display: flex; color: nb-theme(color-primary-default);
justify-content: space-around; font-size: 10rem;
line-height: 1;
margin-top: -4rem;
margin-left: auto;
margin-right: 0.4rem;
}
.temperature { .today-details {
font-size: 5rem; display: flex;
font-weight: nb-theme(font-weight-bolder); justify-content: space-around;
font-family: nb-theme(font-secondary); margin-top: 2rem;
color: nb-theme(color-fg-heading); }
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 2rem;
}
.icon { .parameter {
font-size: 10rem; flex: 1 1 auto;
line-height: 10rem; text-align: center;
color: nb-theme(color-success); }
@include nb-for-theme(cosmic) { .parameter-name,
color: nb-theme(color-fg); .parameter-value {
text-shadow: 0 3px 0 #665ebd, display: block;
0 4px 10px rgba(33, 7, 77, 0.5), }
0 2px 10px #928dff;
}
@include nb-for-theme(corporate) { .caption {
color: nb-theme(color-warning); text-transform: uppercase;
}
}
}
.details {
display: flex;
justify-content: space-around;
.parameter {
display: flex;
flex-direction: column;
text-align: center;
.parameter-name {
font-family: nb-theme(font-main);
font-size: 1.25rem;
font-weight: nb-theme(font-weight-light);
line-height: 2rem;
}
.parameter-value {
font-family: nb-theme(font-secondary);
color: nb-theme(color-fg-heading);
font-weight: nb-theme(font-weight-bolder);
}
}
}
} }
.weekly-forecast { .weekly-forecast {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
margin-top: 2rem; margin: auto 0;
.day {
display: flex;
flex-direction: column;
text-align: center;
.caption {
text-transform: uppercase;
font-family: nb-theme(font-secondary);
color: nb-theme(color-fg-heading);
font-weight: nb-theme(font-weight-bold);
font-size: 1.25rem;
}
i {
font-size: 2.5rem;
line-height: 2.5rem;
}
.temperature {
color: nb-theme(color-fg-heading);
font-family: nb-theme(font-secondary);
font-weight: nb-theme(font-weight-bold);
font-size: 1.25rem;
}
}
} }
@include media-breakpoint-down(xs) { .day {
nb-card-body { display: flex;
padding-left: 1rem; flex-direction: column;
padding-right: 1rem; text-align: center;
} }
.weather-icon {
font-size: 2.5rem;
line-height: 2.5rem;
} }
} }