Commits

heliostatic committed fb0d43c

added fixed header

  • Participants
  • Parent commits b1b203c

Comments (0)

Files changed (5)

File app/assets/javascripts/application.js

 //= require jquery_ujs
 //= require bootstrap
 //= require best_in_place
+//= require table-fixed-header
 //= require_tree .

File app/assets/stylesheets/application.css.scss

  * compiled file, but it's generally better to create a new file per style scope.
  *
  *= require_self
+ *= require table-fixed-header
  *= require_tree .
 */
 

File app/views/books/bulk.html.haml

   |
   = link_to 'bulk view', { layout: 'bulk'}
   = form_tag accept_proposed_changed_books_path, method: :put do
-    %table.table.table-bordered.table-hover.table-striped
-      %thead
+    %table.table.table-bordered.table-hover.table-fixed-header.table-striped
+      %thead.header
         %tr
           %th Correct?
           %th Author
             %td.path{:data => { fullpath: book.fullpath }}= book.partial_path
             %td= book.file_type
     = submit_tag "These Look Good", class: 'btn'
-  = paginate @books
+  = paginate @books
+
+:javascript
+  $('.table-fixed-header').fixedHeader({topOffset: 0})

File vendor/assets/javascripts/table-fixed-header.js

+// https://github.com/oma/table-fixed-header
+
+(function($) {
+
+    $.fn.fixedHeader = function(options) {
+        var config = {
+            topOffset: 40
+            //bgColor: 'white'
+        };
+        if (options) {
+            $.extend(config, options);
+        }
+
+        return this.each(function() {
+            var o = $(this);
+
+            var $win = $(window),
+                $head = $('thead.header', o),
+                isFixed = 0;
+            var headTop = $head.length && $head.offset().top - config.topOffset;
+
+            function processScroll() {
+                if (!o.is(':visible')) return;
+                if ($('thead.header-copy').size()) {
+                    $('thead.header-copy').width($('thead.header').width());
+                    var i, scrollTop = $win.scrollTop();
+                }
+                var t = $head.length && $head.offset().top - config.topOffset;
+                if (!isFixed && headTop != t) {
+                    headTop = t;
+                }
+                if (scrollTop >= headTop && !isFixed) {
+                    isFixed = 1;
+                } else if (scrollTop <= headTop && isFixed) {
+                    isFixed = 0;
+                }
+                isFixed ? $('thead.header-copy', o).removeClass('hide') : $('thead.header-copy', o).addClass('hide');
+            }
+            $win.on('scroll', processScroll);
+
+            // hack sad times - holdover until rewrite for 2.1
+            $head.on('click', function() {
+                if (!isFixed) setTimeout(function() {
+                    $win.scrollTop($win.scrollTop() - 47)
+                }, 10);
+            })
+
+            $head.clone().removeClass('header').addClass('header-copy header-fixed').appendTo(o);
+            var header_width = $head.width();
+            o.find('thead.header-copy').width(header_width);
+            o.find('thead.header > tr:first > th').each(function(i, h) {
+                var w = $(h).width();
+                o.find('thead.header-copy> tr > th:eq(' + i + ')').width(w)
+            });
+            $head.css({
+                margin: '0 auto',
+                width: o.width(),
+                'background-color': config.bgColor
+            });
+            processScroll();
+        });
+    };
+
+})(jQuery);

File vendor/assets/stylesheets/table-fixed-header.css

+/* https://github.com/oma/table-fixed-header */
+
+table .header-fixed {
+    position: fixed;
+    /*top: 40px;*/
+    top:0;
+    /*left: 0;*/
+    /*right: 0;*/
+    z-index: 1020;
+    /* 10 less than .navbar-fixed to prevent any overlap */
+    border-bottom: 1px solid #d5d5d5;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+}
+
+thead {
+    background-color: #eaeaea;
+}
+
+tbody {
+    background-color: #fcfcfc;
+}
+
+#mynav {
+    top: 0;
+    position: fixed;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    z-index: 1030;
+    height: 40px;
+    color: #fff;
+    background-color: #666;
+    text-align: center;
+}
+
+body {
+    padding-top: 60px;
+}