mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<link rel="stylesheet" href="style.css">
|
|
<ion-view>
|
|
<background-cycler class="bg-fade" [image]="activeBgImage"></background-cycler>
|
|
|
|
<ion-toolbar id="header" class="no-border"><ion-title><span class="city"><i id="city-nav-icon" class="icon ion-navigate"></i> {{currentLocationString}}</span><br><current-time localtz="current.local_tz_short"></current-time></ion-title><button (click)="showSettings()" class="toolbar-secondary-item"><i class="icon ion-ios-gear"></i></button></ion-toolbar>
|
|
|
|
<ion-content>
|
|
<div id="main-content">
|
|
<current-weather [current]="current"></current-weather>
|
|
|
|
<div id="forecast" class="weather-box">
|
|
<h4 class="title">Forecast</h4>
|
|
<ion-scroll scroll-x="true" id="forecast-scroll">
|
|
<div id="hourly-forecast" *ng-if="current">
|
|
<div class="hourly-hour" *ng-for="#hour of current.hourly.data">
|
|
<div class="time" [inner-html]="hour.time_date"></div><!-- * 1000 | date:'h a'"></div>-->
|
|
<weather-icon [icon]="hour.icon"></weather-icon>
|
|
<div class="temp">{{hour.temperature}}°</div>
|
|
</div>
|
|
</div>
|
|
</ion-scroll>
|
|
<div *ng-if="current">
|
|
<div class="row" *ng-for="#day of current.daily.data">
|
|
<div class="col"><span [inner-html]="day.time_date"></span></div>
|
|
<div class="col"><weather-icon [icon]="day.icon"></weather-icon></div>
|
|
<div class="col">
|
|
<span class="temp-high">{{day.temperatureMax}}°</span>
|
|
<span class="temp-low">{{day.temperatureMin}}°</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clearfix">
|
|
<div class="credit">
|
|
Powered by <a href="http://forecast.io" target="_blank">forecast.io</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</ion-content>
|
|
</ion-view>
|
|
|
|
<style>
|
|
.row {
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -moz-box;
|
|
display: -moz-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 5px;
|
|
width: 100%; }
|
|
|
|
.row + .row {
|
|
margin-top: -5px;
|
|
padding-top: 0; }
|
|
|
|
.col {
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-moz-box-flex: 1;
|
|
-moz-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
display: block;
|
|
padding: 5px;
|
|
width: 100%; }
|
|
</style>
|