Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-24 03:10:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: update to Angular 8, Nebular 4 (#2114)

Browse source
This commit is contained in:
Dmitry Nehaychik 2019-07-02 16:18:09 +03:00 • committed by Sergey Andrievskiy
parent 537e6a77b0
commit e9600b4a07
323 changed files with 7421 additions and 14161 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-body>
<div class="location">
<span>New York</span>
<span class="h3 location">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 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 class="today-details">
<div class="parameter">
<span class="caption parameter-name">max</span>
<span class="parameter-value">23&deg;</span>
</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 class="parameter">
<span class="caption parameter-name">min</span>
<span class="parameter-value">19&deg;</span>
</div>
<div class="parameter">
<span class="caption parameter-name">wind</span>
<span class="parameter-value">4 km/h</span>
</div>
<div class="parameter">
<span class="caption parameter-name">hum</span>
<span class="parameter-value">87%</span>
</div>
</div>
<div class="weekly-forecast">
<div class="day">
<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>
</div>
<div class="day">
<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>
</div>
<div class="day">
<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>
</div>
<div class="day">
<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>
</div>
</div>

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

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