javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Flexbox for refresher content, vertically centered!

Browse Source
This commit is contained in:
Max Lynch
2013-11-08 11:41:29 -06:00
parent fcccc165e0
commit 6070db9f42
5 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
dist/css/ionic.css vendored
View File

@ -2294,6 +2294,20 @@ body, .ionic-body {
height: 100px; height: 100px;
margin-top: -100px; } margin-top: -100px; }
.scroll-refresher-content {
height: 100%;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center; }
.scroll-refreshing { .scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; } -webkit-transition: height 0.1s ease-in-out; }

2
dist/js/ionic-angular.js vendored
View File

@ -530,7 +530,7 @@ angular.module('ionic.ui.content', [])
restrict: 'E', restrict: 'E',
replace: true, replace: true,
transclude: true, transclude: true,
template: '<div class="scroll-refresher" ng-transclude></div>' template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
} }
}) })

2
js/ext/angular/src/directive/ionicContent.js vendored
View File

@ -63,7 +63,7 @@ angular.module('ionic.ui.content', [])
restrict: 'E', restrict: 'E',
replace: true, replace: true,
transclude: true, transclude: true,
template: '<div class="scroll-refresher" ng-transclude></div>' template: '<div class="scroll-refresher"><div class="scroll-refresher-content" ng-transclude></div></div>'
} }
}) })

3
js/ext/angular/test/content.html
View File

@ -41,7 +41,6 @@
} }
#refresh-content { #refresh-content {
color: #999; color: #999;
padding: 60px 0px;
text-align: center; text-align: center;
font-size: 20px; font-size: 20px;
} }
@ -54,9 +53,7 @@
</header> </header>
<content has-header="true" ng-controller="AppCtrl" class="reveal-animation"> <content has-header="true" ng-controller="AppCtrl" class="reveal-animation">
<refresher> <refresher>
<div id="refresh-content">
Refreshing Refreshing
</div>
</refresher> </refresher>
<ul class="list"> <ul class="list">
<li class="list-item" ng-repeat="item in items">asdf{{$index}}</li> <li class="list-item" ng-repeat="item in items">asdf{{$index}}</li>

6
scss/_scaffolding.scss
View File

@ -114,6 +114,12 @@ body, .ionic-body {
height: 100px; height: 100px;
margin-top: -100px; margin-top: -100px;
} }
.scroll-refresher-content {
height: 100%;
text-align: center;
@include display-flex();
@include align-items(center);
}
.scroll-refreshing { .scroll-refreshing {
-webkit-transition: height 0.1s ease-in-out; -webkit-transition: height 0.1s ease-in-out;
} }