diff --git a/demos/ActionSheet/index.html b/demos/ActionSheet/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/ActionSheet/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/ActionSheet/script.js b/demos/ActionSheet/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/ActionSheet/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/ActionSheet/style.css b/demos/ActionSheet/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/ActionSheet/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/App Intro Walkthrough/index.html b/demos/App Intro Walkthrough/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/App Intro Walkthrough/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/App Intro Walkthrough/script.js b/demos/App Intro Walkthrough/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/App Intro Walkthrough/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/App Intro Walkthrough/style.css b/demos/App Intro Walkthrough/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/App Intro Walkthrough/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Checkbox/index.html b/demos/Checkbox/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Checkbox/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Checkbox/script.js b/demos/Checkbox/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Checkbox/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Checkbox/style.css b/demos/Checkbox/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Checkbox/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Custom Loading Bar/index.html b/demos/Custom Loading Bar/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Custom Loading Bar/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Custom Loading Bar/script.js b/demos/Custom Loading Bar/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Custom Loading Bar/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Custom Loading Bar/style.css b/demos/Custom Loading Bar/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Custom Loading Bar/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Flickr Search Example/index.html b/demos/Flickr Search Example/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Flickr Search Example/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Flickr Search Example/script.js b/demos/Flickr Search Example/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Flickr Search Example/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Flickr Search Example/style.css b/demos/Flickr Search Example/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Flickr Search Example/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Frosted Glass Effect/index.html b/demos/Frosted Glass Effect/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Frosted Glass Effect/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Frosted Glass Effect/script.js b/demos/Frosted Glass Effect/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Frosted Glass Effect/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Frosted Glass Effect/style.css b/demos/Frosted Glass Effect/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Frosted Glass Effect/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Google Maps/index.html b/demos/Google Maps/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Google Maps/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Google Maps/script.js b/demos/Google Maps/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Google Maps/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Google Maps/style.css b/demos/Google Maps/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Google Maps/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Lists/index.html b/demos/Lists/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Lists/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Lists/script.js b/demos/Lists/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Lists/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Lists/style.css b/demos/Lists/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Lists/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Modal/index.html b/demos/Modal/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Modal/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Modal/script.js b/demos/Modal/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Modal/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Modal/style.css b/demos/Modal/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Modal/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Popup/index.html b/demos/Popup/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Popup/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Popup/script.js b/demos/Popup/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Popup/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Popup/style.css b/demos/Popup/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Popup/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Pull To Refresh/index.html b/demos/Pull To Refresh/index.html new file mode 100644 index 0000000000..b6721641f3 --- /dev/null +++ b/demos/Pull To Refresh/index.html @@ -0,0 +1,36 @@ + + + + + + + + Ionic Template + + + + + + + + + + + + +

Refresher

+ + + + + + + + {{item}} + + + + + + + diff --git a/demos/Pull To Refresh/script.js b/demos/Pull To Refresh/script.js new file mode 100644 index 0000000000..ad698d7943 --- /dev/null +++ b/demos/Pull To Refresh/script.js @@ -0,0 +1,26 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MyCtrl', function($scope, $timeout) { + $scope.myTitle = 'Template'; + + $scope.items = ['Item 1', 'Item 2', 'Item 3']; + + + $scope.doRefresh = function() { + + console.log('Refreshing!'); + $timeout( function() { + + $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4); + $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4); + $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4); + $scope.items.push('New Item ' + Math.floor(Math.random() * 1000) + 4); + + //Stop the ion-refresher from spinning + $scope.$broadcast('scroll.refreshComplete'); + + }, 1000); + + }; + +}); \ No newline at end of file diff --git a/demos/Pull To Refresh/style.css b/demos/Pull To Refresh/style.css new file mode 100644 index 0000000000..0e52ee56f9 --- /dev/null +++ b/demos/Pull To Refresh/style.css @@ -0,0 +1,3 @@ +body { + cursor: url('http://ionicframework.com/img/finger.png'), auto; +} \ No newline at end of file diff --git a/demos/Radio Buttons/index.html b/demos/Radio Buttons/index.html new file mode 100644 index 0000000000..d14320e0b7 --- /dev/null +++ b/demos/Radio Buttons/index.html @@ -0,0 +1,49 @@ + + + + + + + + Radio Buttons + + + + + + + + + + + +

Radio Buttons

+ + + + +
+ +
+ Clientside, Selected Value: {{ data.clientSide }} +
+ + + {{ item.text }} + + +
+ Serverside, Selected Value: {{ data.serverSide }} +
+ + + {{ item.text }} + + +
+ + + + + + diff --git a/demos/Radio Buttons/script.js b/demos/Radio Buttons/script.js new file mode 100644 index 0000000000..d16dbec70f --- /dev/null +++ b/demos/Radio Buttons/script.js @@ -0,0 +1,51 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', function ($scope) { + + $scope.clientSideList = [ + { + text: "Backbone", + value: "bb" + }, + { + text: "Angular", + value: "ng" + }, + { + text: "Ember", + value: "em" + }, + { + text: "Knockout", + value: "ko" + } + ]; + + $scope.serverSideList = [ + { + text: "Go", + value: "go" + }, + { + text: "Python", + value: "py" + }, + { + text: "Ruby", + value: "rb" + }, + { + text: "Java", + value: "jv" + } + ]; + + $scope.data = { + clientSide: 'ng' + }; + + $scope.serverSideChange = function (item) { + console.log("Selected Serverside, text:", item.text, "value:", item.value); + }; + +}); \ No newline at end of file diff --git a/demos/Radio Buttons/style.css b/demos/Radio Buttons/style.css new file mode 100644 index 0000000000..0e52ee56f9 --- /dev/null +++ b/demos/Radio Buttons/style.css @@ -0,0 +1,3 @@ +body { + cursor: url('http://ionicframework.com/img/finger.png'), auto; +} \ No newline at end of file diff --git a/demos/Shrinking Header/index.html b/demos/Shrinking Header/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Shrinking Header/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Shrinking Header/script.js b/demos/Shrinking Header/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Shrinking Header/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Shrinking Header/style.css b/demos/Shrinking Header/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Shrinking Header/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Side Menu and Navigation/index.html b/demos/Side Menu and Navigation/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Side Menu and Navigation/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Side Menu and Navigation/script.js b/demos/Side Menu and Navigation/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Side Menu and Navigation/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Side Menu and Navigation/style.css b/demos/Side Menu and Navigation/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Side Menu and Navigation/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Sign-in, then Tabs/index.html b/demos/Sign-in, then Tabs/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Sign-in, then Tabs/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Sign-in, then Tabs/script.js b/demos/Sign-in, then Tabs/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Sign-in, then Tabs/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Sign-in, then Tabs/style.css b/demos/Sign-in, then Tabs/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Sign-in, then Tabs/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Starter Template/index.html b/demos/Starter Template/index.html new file mode 100644 index 0000000000..b0f72b663b --- /dev/null +++ b/demos/Starter Template/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Template + + + + + + + + + + + + +

{{myTitle}}

+ + + + +

Content

+ + + + + diff --git a/demos/Starter Template/script.js b/demos/Starter Template/script.js new file mode 100644 index 0000000000..98206b3fbb --- /dev/null +++ b/demos/Starter Template/script.js @@ -0,0 +1,68 @@ +angular.module('ionicApp', ['ionic']) + +.config(function ($stateProvider, $urlRouterProvider) { + + $stateProvider + .state('tabs', { + url: "/tab", + abstract: true, + templateUrl: "tabs.html" + }) + .state('tabs.home', { + url: "/home", + views: { + 'home-tab': { + templateUrl: "home.html", + controller: 'HomeTabCtrl' + } + } + }) + .state('tabs.facts', { + url: "/facts", + views: { + 'home-tab': { + templateUrl: "facts.html" + } + } + }) + .state('tabs.facts2', { + url: "/facts2", + views: { + 'home-tab': { + templateUrl: "facts2.html" + } + } + }) + .state('tabs.about', { + url: "/about", + views: { + 'about-tab': { + templateUrl: "about.html" + } + } + }) + .state('tabs.navstack', { + url: "/navstack", + views: { + 'about-tab': { + templateUrl: "nav-stack.html" + } + } + }) + .state('tabs.contact', { + url: "/contact", + views: { + 'contact-tab': { + templateUrl: "contact.html" + } + } + }); + + + $urlRouterProvider.otherwise("/tab/home"); + +}) + +.controller('HomeTabCtrl', function ($scope) { + console.log('HomeTabCtrl'); +}); \ No newline at end of file diff --git a/demos/Starter Template/style.css b/demos/Starter Template/style.css new file mode 100644 index 0000000000..0e52ee56f9 --- /dev/null +++ b/demos/Starter Template/style.css @@ -0,0 +1,3 @@ +body { + cursor: url('http://ionicframework.com/img/finger.png'), auto; +} \ No newline at end of file diff --git a/demos/Swipeable Cards/index.html b/demos/Swipeable Cards/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Swipeable Cards/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Swipeable Cards/script.js b/demos/Swipeable Cards/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Swipeable Cards/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Swipeable Cards/style.css b/demos/Swipeable Cards/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Swipeable Cards/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Tabs And Navigation/index.html b/demos/Tabs And Navigation/index.html new file mode 100644 index 0000000000..84568ebc46 --- /dev/null +++ b/demos/Tabs And Navigation/index.html @@ -0,0 +1,121 @@ + + + + + + + Tabs Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demos/Tabs And Navigation/script.js b/demos/Tabs And Navigation/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Tabs And Navigation/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Tabs And Navigation/style.css b/demos/Tabs And Navigation/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Tabs And Navigation/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Thumbnail List/index.html b/demos/Thumbnail List/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Thumbnail List/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Thumbnail List/script.js b/demos/Thumbnail List/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Thumbnail List/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Thumbnail List/style.css b/demos/Thumbnail List/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Thumbnail List/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +} diff --git a/demos/Toggle/index.html b/demos/Toggle/index.html new file mode 100644 index 0000000000..dc07d95915 --- /dev/null +++ b/demos/Toggle/index.html @@ -0,0 +1,33 @@ + + + + + + + + Ionic Modal + + + + + + + + + + + + + +

Hello!

+ +
+ Loading... +
+ + Toggle me to toggle loading! + + + + + diff --git a/demos/Toggle/script.js b/demos/Toggle/script.js new file mode 100644 index 0000000000..56f4c9ee83 --- /dev/null +++ b/demos/Toggle/script.js @@ -0,0 +1,7 @@ +angular.module('ionicApp', ['ionic']) + +.controller('MainCtrl', ['$scope', function($scope) { + $scope.data = { + isLoading: false + }; +}]); \ No newline at end of file diff --git a/demos/Toggle/style.css b/demos/Toggle/style.css new file mode 100644 index 0000000000..f74e3f8c72 --- /dev/null +++ b/demos/Toggle/style.css @@ -0,0 +1,41 @@ +.bar.bar-loading { + display: block; + height: 24px; + + /* starts right below a normal header */ + top: 44px; + + /* make the text centered vertically and horizontally */ + text-align: center; + padding: 0; + line-height: 24px; + + /* transition 'sliding down' (check below)*/ + -webkit-transition: 200ms all; +} + + +/* + * make the content's top changes animate. + * might not always look good, but looks + * good when our loader is added & removed + */ +.has-header { + -webkit-transition: 200ms top; +} +.has-header.has-loading { + /* 44px (header) + 24px */ + top: 68px; +} + +/* make loading bar slide up/down */ +.bar-loading.ng-enter, +.bar-loading.ng-leave.ng-leave-active { + height: 0; + border-width: 0px; +} +.bar-loading.ng-enter.ng-enter-active, +.bar-loading.ng-leave { + height: 24px; + border-width: 1px; +}