mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-08 15:51:16 +08:00
Cleaned up examples folder
This commit is contained in:
Max Lynch
73
examples/starters/map/index.html
Normal file
73
examples/starters/map/index.html
Normal file
@ -0,0 +1,73 @@
|
||||
<html ng-app="ionic.example">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Map</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="/dist/css/ionic.css">
|
||||
<style>
|
||||
#map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<script src="/dist/js/ionic.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
<script type="text/javascript"
|
||||
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es&sensor=true"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
</script>
|
||||
</head>
|
||||
<body ng-controller="MapCtrl">
|
||||
<div class="bar bar-header bar-dark">
|
||||
<h1 class="title">Map</h1>
|
||||
</div>
|
||||
<content has-header="true" has-footer="true">
|
||||
<div id="map"></div>
|
||||
</content>
|
||||
<div class="bar bar-footer bar-dark">
|
||||
<button ng-click="centerOnMe()" class="button button-icon"><i class="icon-ios7-navigate"></i></button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
angular.module('ionic.example', ['ionic.ui.content', 'ionic.ui.list', 'ionic.service.loading'])
|
||||
|
||||
.controller('MapCtrl', function($scope, Loading) {
|
||||
function initialize() {
|
||||
var mapOptions = {
|
||||
center: new google.maps.LatLng(43.07493,-89.381388),
|
||||
zoom: 16,
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
};
|
||||
var map = new google.maps.Map(document.getElementById("map"),
|
||||
mapOptions);
|
||||
$scope.map = map;
|
||||
}
|
||||
google.maps.event.addDomListener(window, 'load', initialize);
|
||||
$scope.centerOnMe = function() {
|
||||
if(!$scope.map) {
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.loading = Loading.show({
|
||||
content: 'Getting current location...',
|
||||
showBackdrop: false
|
||||
});
|
||||
|
||||
navigator.geolocation.getCurrentPosition(function(pos) {
|
||||
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
|
||||
$scope.loading.hide();
|
||||
}, function(error) {
|
||||
alert('Unable to get location: ' + error.message);
|
||||
});
|
||||
};
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
BIN
examples/starters/profile/bg.jpg
Normal file
BIN
examples/starters/profile/bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
187
examples/starters/profile/index.html
Normal file
187
examples/starters/profile/index.html
Normal file
@ -0,0 +1,187 @@
|
||||
<html ng-app="ionic.example">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Profile</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="/dist/css/ionic.css">
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<script src="/dist/js/ionic.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
<style>
|
||||
#profile-bg {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 44px;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
|
||||
background: url('bg.jpg') no-repeat transparent;
|
||||
background-size: 100%;
|
||||
background-position: 50% 20%;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#content {
|
||||
position: relative;
|
||||
margin-top: 150px;
|
||||
background-color: white;
|
||||
box-shadow: 0px -1px 10px rgba(0,0,0,0.4);
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
#profile-info {
|
||||
position: absolute;
|
||||
top: -95px;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
}
|
||||
#profile-name {
|
||||
color: #444;
|
||||
font-size: 26px;
|
||||
}
|
||||
#profile-description {
|
||||
font-size: 15px;
|
||||
color: #888;
|
||||
}
|
||||
#profile-description a {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
#profile-image {
|
||||
display: block;
|
||||
border-radius: 100px;
|
||||
border: 1px solid #fff;
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: 30px auto 0;
|
||||
box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.list-item-content {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.post {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.post-time {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.post-profile-image {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.post-options {
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body ng-controller="ProfileCtrl">
|
||||
<div class="bar bar-header bar-danger">
|
||||
<button class="button button-icon"><i class="icon-person-add"></i></button>
|
||||
<h1 class="title">Me</h1>
|
||||
<button class="button button-icon"><i class="icon-gear-b"></i></button>
|
||||
</div>
|
||||
<content has-header="true">
|
||||
<div id="profile-bg">
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="profile-info">
|
||||
<img id="profile-image" src="me.png">
|
||||
<h3 id="profile-name">Max</h3>
|
||||
<span id="profile-description">Co-creator of <a href="http://twitter.com/ionicframework">@ionicframework</a>, founder of
|
||||
<a href="http://twitter.com/driftyco">@driftyco</a></span>
|
||||
</div>
|
||||
<list>
|
||||
<list-item ng-repeat="post in posts">
|
||||
<img class="post-profile-image" src="me.png">
|
||||
{{post.text}}
|
||||
<div class="post-time">{{post.created_at | relativets }}</div>
|
||||
<div class="post-options">
|
||||
<i class="icon-reply"></i>
|
||||
<i class="icon-shuffle"></i>
|
||||
</div>
|
||||
</list-item>
|
||||
</list>
|
||||
</div>
|
||||
</content>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
angular.module('ionic.example', ['ionic.ui.content', 'ionic.ui.list'])
|
||||
|
||||
// A simple relative timestamp filter
|
||||
.filter('relativets', function() {
|
||||
return function(value) {
|
||||
var now = new Date();
|
||||
var diff = now - value;
|
||||
|
||||
// ms units
|
||||
var second = 1000;
|
||||
var minute = second * 60;
|
||||
var hour = minute * 60;
|
||||
var day = hour * 24;
|
||||
var year = day * 365;
|
||||
var month = day * 30;
|
||||
|
||||
var unit = day;
|
||||
var unitStr = 'd';
|
||||
if(diff > year) {
|
||||
unit = year;
|
||||
unitStr = 'y';
|
||||
} else if(diff > day) {
|
||||
unit = day;
|
||||
unitStr = 'd';
|
||||
} else if(diff > hour) {
|
||||
unit = hour;
|
||||
unitStr = 'h';
|
||||
} else if(diff > minute) {
|
||||
unit = minute;
|
||||
unitStr = 'm';
|
||||
} else {
|
||||
unit = second;
|
||||
unitStr = 's';
|
||||
}
|
||||
|
||||
var amt = Math.ceil(diff / unit);
|
||||
return amt + '' + unitStr;
|
||||
}
|
||||
})
|
||||
|
||||
.controller('ProfileCtrl', function($scope) {
|
||||
$scope.posts = [];
|
||||
|
||||
for(var i = 0; i < 100; i++) {
|
||||
// Fake a date
|
||||
var date = (+new Date) - (i * 1000 * 60 * 60);
|
||||
$scope.posts.push({
|
||||
created_at: date,
|
||||
text: 'Doing a bit of ' + ((Math.floor(Math.random() * 2) === 1) ? 'that' : 'this')
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
BIN
examples/starters/profile/me.jpg
Normal file
BIN
examples/starters/profile/me.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
examples/starters/profile/me.png
Normal file
BIN
examples/starters/profile/me.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
33
examples/starters/tabs/index.html
Normal file
33
examples/starters/tabs/index.html
Normal file
@ -0,0 +1,33 @@
|
||||
<html ng-app="ionic.example">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Tabs</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="/dist/css/ionic.css">
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<script src="/dist/js/ionic.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<tabs>
|
||||
<tab title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline">
|
||||
<h1>Home</h1>
|
||||
</tab>
|
||||
<tab title="Friends" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
|
||||
<h1>Friends</h1>
|
||||
</tab>
|
||||
|
||||
<tab title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline">
|
||||
<h1>Settings</h1>
|
||||
</tab>
|
||||
</tabs>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
angular.module('ionic.example', ['ionic.ui.content', 'ionic.ui.tabs'])
|
||||
</script>
|
||||
</html>
|
||||
80
examples/starters/weather/app.js
Normal file
80
examples/starters/weather/app.js
Normal file
@ -0,0 +1,80 @@
|
||||
angular.module('ionic.weather', ['ionic.weather.services', 'ionic.weather.directives'])
|
||||
|
||||
.constant('WUNDERGROUND_API_KEY', '1cc2d3de40fa5af0')
|
||||
|
||||
.constant('FLICKR_API_KEY', '504fd7414f6275eb5b657ddbfba80a2c')
|
||||
|
||||
.filter('int', function() {
|
||||
return function(v) {
|
||||
return parseInt(v) || '';
|
||||
};
|
||||
})
|
||||
|
||||
.controller('WeatherCtrl', function($scope, $timeout, Weather, Geo, Flickr) {
|
||||
var _this = this;
|
||||
|
||||
$scope.activeBgImageIndex = 0;
|
||||
|
||||
$scope.getActiveBackgroundImage = function() {
|
||||
if($scope.activeBgImage) {
|
||||
var item = $scope.activeBgImage;
|
||||
var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_z.jpg";
|
||||
return {
|
||||
'background-image': 'url(' + url + ')'
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
this.getBackgroundImage = function(lat, lng) {
|
||||
Flickr.search('Madison, Wisconsin', lat, lng).then(function(resp) {
|
||||
var photos = resp.photos;
|
||||
if(photos.photo.length) {
|
||||
$scope.bgImages = photos.photo;
|
||||
_this.cycleBgImages();
|
||||
}
|
||||
}, function(error) {
|
||||
console.error('Unable to get Flickr images', error);
|
||||
});
|
||||
};
|
||||
|
||||
this.getForecast = function(lat, lng) {
|
||||
Weather.getForecast(lat, lng).then(function(resp) {
|
||||
console.log('Forecast', resp);
|
||||
$scope.forecast = resp.forecast.simpleforecast;
|
||||
}, function(error) {
|
||||
alert('Unable to get forecast');
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
this.getCurrent = function(lat, lng) {
|
||||
Weather.getAtLocation(lat, lng).then(function(resp) {
|
||||
$scope.current = resp.current_observation;
|
||||
_this.getForecast(resp.location.lat, resp.location.lon);
|
||||
}, function(error) {
|
||||
alert('Unable to get current conditions');
|
||||
console.error(error);
|
||||
});
|
||||
};
|
||||
|
||||
this.cycleBgImages = function() {
|
||||
$timeout(function cycle() {
|
||||
if($scope.bgImages) {
|
||||
$scope.activeBgImage = $scope.bgImages[$scope.activeBgImageIndex++ % $scope.bgImages.length];
|
||||
}
|
||||
//$timeout(cycle, 10000);
|
||||
});
|
||||
};
|
||||
|
||||
Geo.getLocation().then(function(position) {
|
||||
console.log('GOT LAT', position);
|
||||
var lat = position.coords.latitude;
|
||||
var lng = position.coords.longitude;
|
||||
|
||||
_this.getBackgroundImage(lat, lng);
|
||||
_this.getCurrent(lat, lng);
|
||||
}, function(error) {
|
||||
alert('Unable to get current location: ' + error);
|
||||
});
|
||||
|
||||
});
|
||||
57
examples/starters/weather/directives.js
Normal file
57
examples/starters/weather/directives.js
Normal file
@ -0,0 +1,57 @@
|
||||
angular.module('ionic.weather.directives', [])
|
||||
|
||||
.directive('currentTime', function($timeout, $filter) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
template: '<span class="current-time">{{currentTime}}</span>',
|
||||
scope: {
|
||||
localtz: '=',
|
||||
},
|
||||
link: function($scope, $element, $attr) {
|
||||
$timeout(function checkTime() {
|
||||
if($scope.localtz) {
|
||||
$scope.currentTime = $filter('date')(+(new Date), 'h:mm') + $scope.localtz;
|
||||
}
|
||||
$timeout(checkTime, 500);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.directive('smallWeather', function($timeout) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
template: '<div id="small-weather" ng-transclude></div>',
|
||||
link: function($scope, $element, $attr) {
|
||||
|
||||
// Delay so we are in the DOM and can calculate sizes
|
||||
$timeout(function() {
|
||||
var windowHeight = window.innerHeight;
|
||||
var thisHeight = $element[0].offsetHeight;
|
||||
var headerHeight = document.querySelector('#header').offsetHeight;
|
||||
$element[0].style.marginTop = (windowHeight - thisHeight) + 'px';
|
||||
angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'auto');
|
||||
$timeout(function() {
|
||||
angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'touch');
|
||||
}, 50);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
.directive('weatherBox', function($timeout) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
transclude: true,
|
||||
scope: {
|
||||
title: '@'
|
||||
},
|
||||
template: '<div class="weather-box"><h4 class="title">{{title}}</h4><div ng-transclude></div></div>',
|
||||
link: function($scope, $element, $attr) {
|
||||
}
|
||||
}
|
||||
})
|
||||
74
examples/starters/weather/index.html
Normal file
74
examples/starters/weather/index.html
Normal file
@ -0,0 +1,74 @@
|
||||
<html ng-app="ionic.weather">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Weather</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link rel="stylesheet" href="/dist/css/ionic.css">
|
||||
|
||||
<link rel="stylesheet" href="weather.css">
|
||||
|
||||
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script>
|
||||
<script src="/vendor/angular/angular-touch.js"></script>
|
||||
<script src="/vendor/angular/angular-animate.js"></script>
|
||||
<script src="/vendor/angular/angular-resource.js"></script>
|
||||
<script src="/dist/js/ionic.js"></script>
|
||||
<script src="/dist/js/ionic-angular.js"></script>
|
||||
|
||||
<script src="services.js"></script>
|
||||
<script src="directives.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</head>
|
||||
<body ng-controller="WeatherCtrl">
|
||||
<div id="bg-image" ng-style="getActiveBackgroundImage()"></div>
|
||||
|
||||
<header id="header" class="bar bar-header bar-clear">
|
||||
<h1 class="title">
|
||||
<span class="city">{{current.display_location.city}}</span><br>
|
||||
<current-time localtz="current.local_tz_short"></current-time>
|
||||
</h1>
|
||||
</header>
|
||||
<div id="scroller" class="scroll padding" style="margin-top:44px">
|
||||
<small-weather>
|
||||
<h5>{{current.weather}}</h5>
|
||||
<h5>H: {{forecast.forecastday[0].high.fahrenheit}} L: {{forecast.forecastday[0].low.fahrenheit}}</h5>
|
||||
<h1 class="current-temp">{{current.temp_f | int}}°</h1>
|
||||
</small-weather>
|
||||
<weather-box title="Forecast" style="height: 400px">
|
||||
</weather-box>
|
||||
<weather-box title="Details" style="height: 400px">
|
||||
</weather-box>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
var s = document.getElementById('scroller');
|
||||
var bgImage = document.getElementById('bg-image');
|
||||
var header = document.getElementById('header');
|
||||
|
||||
var scroll = new ionic.views.Scroll({
|
||||
el: s,
|
||||
decelerationRate: 0.87,
|
||||
inertialEventInterval: 100
|
||||
});
|
||||
|
||||
var height = window.innerHeight;
|
||||
s.addEventListener('momentumScrolled', function(e) {
|
||||
setTimeout(function() {
|
||||
var bgAmount = e.detail.scrollTop;
|
||||
//bgImage.style.webkitTransform = 'translate3d(0, ' + -(bgAmount / 20) + 'px, 0)';
|
||||
|
||||
//var blurAmount = Math.min(3, e.detail.scrollTop / 200);
|
||||
|
||||
var brightness = 1;
|
||||
if(e.detail.scrollTop > 200) {
|
||||
var diff = Math.min(600, e.detail.scrollTop - 200);
|
||||
var per = 1 - (diff / 600);
|
||||
brightness = Math.max(0.7, per);
|
||||
}
|
||||
//bgImage.style.webkitFilter = 'brightness(' + brightness + ')';
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
BIN
examples/starters/weather/madison1.jpg
Normal file
BIN
examples/starters/weather/madison1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 KiB |
BIN
examples/starters/weather/madison2.jpg
Normal file
BIN
examples/starters/weather/madison2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 221 KiB |
BIN
examples/starters/weather/madison3.jpg
Normal file
BIN
examples/starters/weather/madison3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
examples/starters/weather/madison4.jpg
Normal file
BIN
examples/starters/weather/madison4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
102
examples/starters/weather/services.js
Normal file
102
examples/starters/weather/services.js
Normal file
@ -0,0 +1,102 @@
|
||||
angular.module('ionic.weather.services', ['ngResource'])
|
||||
|
||||
.factory('Geo', function($q) {
|
||||
return {
|
||||
getLocation: function() {
|
||||
var q = $q.defer();
|
||||
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
q.resolve(position);
|
||||
}, function(error) {
|
||||
q.reject(error);
|
||||
});
|
||||
|
||||
return q.promise;
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
.factory('Flickr', function($q, $resource, FLICKR_API_KEY) {
|
||||
var baseUrl = 'http://api.flickr.com/services/rest/'
|
||||
|
||||
var flickrSearch = $resource(baseUrl, {
|
||||
method: 'flickr.groups.pools.getPhotos',
|
||||
group_id: '1463451@N25',
|
||||
safe_search: 1,
|
||||
jsoncallback: 'JSON_CALLBACK',
|
||||
api_key: FLICKR_API_KEY,
|
||||
format: 'json'
|
||||
}, {
|
||||
get: {
|
||||
method: 'JSONP'
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
search: function(tags, lat, lng) {
|
||||
var q = $q.defer();
|
||||
|
||||
flickrSearch.get({
|
||||
tags: tags,
|
||||
lat: lat,
|
||||
lng: lng
|
||||
}, function(val) {
|
||||
q.resolve(val);
|
||||
}, function(httpResponse) {
|
||||
q.reject(httpResponse);
|
||||
});
|
||||
|
||||
return q.promise;
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
.factory('Weather', function($q, $resource, WUNDERGROUND_API_KEY) {
|
||||
var baseUrl = 'http://api.wunderground.com/api/' + WUNDERGROUND_API_KEY;
|
||||
|
||||
var locationResource = $resource(baseUrl + '/geolookup/conditions/q/:coords.json', {
|
||||
callback: 'JSON_CALLBACK'
|
||||
}, {
|
||||
get: {
|
||||
method: 'JSONP'
|
||||
}
|
||||
});
|
||||
|
||||
var forecastResource = $resource(baseUrl + '/forecast/q/:coords.json', {
|
||||
callback: 'JSON_CALLBACK'
|
||||
}, {
|
||||
get: {
|
||||
method: 'JSONP'
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
getForecast: function(lat, lng) {
|
||||
var q = $q.defer();
|
||||
|
||||
forecastResource.get({
|
||||
coords: lat + ',' + lng
|
||||
}, function(resp) {
|
||||
q.resolve(resp);
|
||||
}, function(httpResponse) {
|
||||
q.reject(httpResponse);
|
||||
});
|
||||
|
||||
return q.promise;
|
||||
},
|
||||
|
||||
getAtLocation: function(lat, lng) {
|
||||
var q = $q.defer();
|
||||
|
||||
locationResource.get({
|
||||
coords: lat + ',' + lng
|
||||
}, function(resp) {
|
||||
q.resolve(resp);
|
||||
}, function(error) {
|
||||
q.reject(error);
|
||||
});
|
||||
|
||||
return q.promise;
|
||||
}
|
||||
}
|
||||
})
|
||||
54
examples/starters/weather/weather.css
Normal file
54
examples/starters/weather/weather.css
Normal file
@ -0,0 +1,54 @@
|
||||
body {
|
||||
}
|
||||
#scroller {
|
||||
}
|
||||
#bg-image {
|
||||
position: fixed;
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
background: url('madison3.jpg') no-repeat transparent;
|
||||
background-size: cover;
|
||||
}
|
||||
h1,h2,h3,h4,h5 {
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#header .title {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
}
|
||||
#header .title .city {
|
||||
font-size: 16px;
|
||||
}
|
||||
#main-content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#small-weather {
|
||||
height: 200px;
|
||||
}
|
||||
#small-weather > * {
|
||||
color: #fff;
|
||||
}
|
||||
#small-weather .current-temp {
|
||||
font-size: 100px;
|
||||
font-weight: 100;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 80px;
|
||||
}
|
||||
|
||||
.weather-box {
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
padding: 5px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
.weather-box .title {
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
padding-bottom: 3px;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
BIN
examples/starters/weather/wunderground.png
Normal file
BIN
examples/starters/weather/wunderground.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Reference in New Issue
Block a user