Fixing top fixed toolbar

DesignSafe-CI · Dec 2, 2016 · 039bbd3 · 039bbd3
1 parent 2dcbb7e
commit 039bbd3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 25 deletions.
diff --git a/designsafe/static/scripts/data-depot/app.js b/designsafe/static/scripts/data-depot/app.js
@@ -346,21 +346,3 @@
 }]);
 
 })(window, angular);
-
-(function(window, $, undefined){
-  var supportPageOffset = window.pageXOffset !== undefined;
-  var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
-
-  var fixer = function(e) {
-    var h = $('.site-banner').height() + $('.navbar').height() + 3;
-    var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
-    if (y > h) {
-      $('.dd-toolbar').addClass('dd-toolbar-fixed-top');
-      $('.dd-toolbar').style('top: ' + y + 'px;');
-    } else {
-      $('.dd-toolbar').removeClass('dd-toolbar-fixed-top');
-    }
-  };
-  $(document).on('scroll', window.throttle(fixer, 100));
-  fixer();
-})(window, jQuery, undefined);    
diff --git a/designsafe/static/scripts/data-depot/controllers/data-depot-toolbar.js b/designsafe/static/scripts/data-depot/controllers/data-depot-toolbar.js
@@ -66,7 +66,5 @@
                    'filePath': '$SEARCH'});
       }
     };
-
-
   }]);
 })(window, angular);
diff --git a/designsafe/static/scripts/data-depot/templates/data-depot-toolbar.html b/designsafe/static/scripts/data-depot/templates/data-depot-toolbar.html
@@ -1,11 +1,11 @@
-<div class="clearfix btn-toolbar-ds">
+<div class="clearfix btn-toolbar-ds dd-toolbar" ds-fix-top="dd-toolbar-fixed-top">
     <div class="btn-toolbar btn-toolbar-left"
          role="toolbar"
          aria-label="Data Browser Search"
-         style="with:300px; float:left; margin-left:15px;"
+         style="with:160px; float:left; margin-left:15px;"
          ng-if="apiParams.searchState">
-        <form id="dd-search-form" name="dd-search-form" ng-submit="ops.search()" style="width:300px; float:left; display:inline-block;">
-          <input ng-model="search.queryString" name="queryString" type="search" id="dd-search" placeholder="Search..."/>
+        <form id="dd-search-form" name="dd-search-form" ng-submit="ops.search()" style="width:150px; float:left; display:inline-block;">
+          <input ng-model="search.queryString" name="queryString" type="search" id="dd-search" placeholder="Search data..."/>
         </form>
     </div>
     <div class="btn-toolbar btn-toolbar-right" role="toolbar" aria-label="Data Browser Toolbar">

diff --git a/designsafe/static/scripts/ng-designsafe/directives/ng-designsafe-directives.js b/designsafe/static/scripts/ng-designsafe/directives/ng-designsafe-directives.js
@@ -187,7 +187,28 @@
           }
         });
       }
-    }
+    };
   }]);
 
+  mod.directive('dsFixTop', function ($window) {
+    var $win = angular.element($window); // wrap window object as jQuery object
+
+    return {
+      restrict: 'A',
+      link: function (scope, element, attrs) {
+        var topClass = attrs.dsFixTop; // get CSS class from directive's attribute value
+
+		var offsetTop = $('.site-banner').height();
+        $win.on('scroll', function (e) {
+            offsetTop = $('.site-banner').height();
+          if ($win.scrollTop() >= offsetTop) {
+            element.addClass(topClass);
+          } else {
+            element.removeClass(topClass);
+          }
+        });
+      }
+    };
+  });
+
 })(angular, jQuery);
diff --git a/designsafe/static/styles/ng-designsafe.css b/designsafe/static/styles/ng-designsafe.css
@@ -374,4 +374,7 @@
     position: fixed;
     border: 1px black solid;
     z-index: 1099;
+    top:55px;
+	left:22%;
+	right:10%;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,7 +66,5 @@ @@
                        'filePath': '$SEARCH'});
           }
         };
       }]);
     })(window, angular);