Fixed scroll size

mookiez · Dec 6, 2013 · 2727a5c · 2727a5c
1 parent df0a70c
commit 2727a5c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/www/css/app.css b/www/css/app.css
@@ -1,5 +1,9 @@
 body {
   text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
+  background-color: black;
+}
+#wrapper {
+  background-color: black;
 }
 #scroller {
 }
@@ -17,6 +21,7 @@ h1,h2,h3,h4,h5 {
 
 #main-content {
   color: #fff;
+  height: 850px;
 }
 
 .ion-ios7-sunny-outline {

diff --git a/www/index.html b/www/index.html
@@ -25,7 +25,7 @@
   </head>
 
   <body ng-controller="WeatherCtrl">
-    <pane>
+    <pane id="wrapper">
       <div id="bg-image" ng-style="getActiveBackgroundImage()"></div>
 
       <header id="header" class="bar bar-header bar-clear">
@@ -36,8 +36,10 @@ <h1 class="title">
         <button ng-click="showSettings()" class="button button-icon"><i class="icon ion-gear-a"></i></button>
       </header>
       <content padding="true" scroll-event-interval="20" scroll-effects>
-        <current-weather></current-weather>
-        <forecast></forecast>
+        <div id="main-content">
+          <current-weather></current-weather>
+          <forecast></forecast>
+        </div>
       </content>
     </pane>
 

diff --git a/www/js/directives.js b/www/js/directives.js
@@ -114,7 +114,7 @@ angular.module('ionic.weather.directives', [])
         var windowHeight = window.innerHeight;
         var thisHeight = $element[0].offsetHeight;
         var headerHeight = document.querySelector('#header').offsetHeight;
-        //$element[0].style.paddingTop = (windowHeight - thisHeight) + 'px';
+        $element[0].style.paddingTop = (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');
@@ -153,8 +153,11 @@ angular.module('ionic.weather.directives', [])
   return {
     restrict: 'A',
     link: function($scope, $element, $attr) {
+      var amt;
+      var bg = document.getElementById('bg-image');
       $element.bind('scroll', function(e) {
-        console.log('SCROLLING', e);
+        amt = Math.min(0.5, e.detail.scrollTop / 1200);
+        bg.style.opacity = 1 - amt;
       });
     }
   }