scrollable content areas

Turn off the side scroll bars for pages.

Resizes the table when the browser resizes

For stables, the rows scroll, but not the header.
For details, the content area scrolls.
Reserves 400 picesl for the header/ footer.   Resize is only done on reload

install/ui/associate.js

@@ -717,6 +717,10 @@ IPA.association_facet = function (spec) {
         that.columns.put(column.name, column);
     };
 
+    that.resize = function(){
+        that.table.resize();
+    };
+
     that.create_column = function(spec) {
         var column = IPA.column(spec);
         if (spec.link_entity){
@@ -769,7 +773,8 @@ IPA.association_facet = function (spec) {
             label: label,
             entity_name: that.entity_name,
             other_entity: that.other_entity,
-            page_length: that.page_length
+            page_length: that.page_length,
+            scrollable: true
         });
 
         var columns = that.columns.values;

install/ui/details.js

@@ -382,7 +382,6 @@ IPA.details_facet = function(spec) {
                     var section = sections[i];
                     that.toggle(section, true);
                 }
-
                 return false;
             }
         }).appendTo(that.controls);
@@ -401,7 +400,6 @@ IPA.details_facet = function(spec) {
                     var section = sections[i];
                     that.toggle(section, false);
                 }
-
                 return false;
             }
         }).appendTo(that.controls);
@@ -447,8 +445,12 @@ IPA.details_facet = function(spec) {
 
             details.append('<hr/>');
         }
+
+
+        that.resize();
     };
 
+
     that.setup = function(container) {
 
         that.facet_setup(container);
@@ -490,7 +492,7 @@ IPA.details_facet = function(spec) {
         var div = section.container;
 
         if (visible != div.is(":visible")) {
-            div.slideToggle();
+            div.slideToggle('slow', that.resize);
         }
     };
 

install/ui/entity.js

@@ -130,6 +130,15 @@ IPA.facet = function (spec) {
         return $('.content', that.container);
     };
 
+    that.resize = function(){
+        var facet_content = $('.facet-content', that.container);
+        facet_content.css("height", 'auto');
+        facet_content.css('overflow-y', 'auto');
+
+        var content_max_height = $(window).height() -
+            IPA.reserved_screen_size;
+        facet_content.css('height',content_max_height);
+    };
 
     that.on_error = function(xhr, text_status, error_thrown) {
         if (that.entity.redirect_facet) {
@@ -194,6 +203,10 @@ IPA.table_facet = function(spec) {
         return that;
     };
 
+    that.resize = function(){
+        that.table.resize();
+    };
+
     var columns = spec.columns || [];
     for (var i=0; i<columns.length; i++) {
         var column_spec = columns[i];

install/ui/ipa.css

@@ -12,6 +12,7 @@
 @font-face {font-family: "FreeWayBold"; src:url("FreeWay-Bold.otf");}
 
 body{
+    overflow:hidden;
     background-image:url("outer-bg.png");
     background-repeat:repeat-x;
     background-position:left top;
@@ -456,6 +457,7 @@ span.ui-icon-search {
 
 [title="details"] {
         margin-top: -.7em !important;
+        overflow: scroll;
 }
 
 

install/ui/search.js

@@ -24,6 +24,10 @@
 
 /* REQUIRES: ipa.js */
 
+/* For scrolling tables, we want to make sure we leave enough room for the 
+   header and footer. */
+IPA.reserved_screen_size = 400;
+
 IPA.search_facet = function(spec) {
 
     spec = spec || {};
@@ -73,6 +77,7 @@ IPA.search_facet = function(spec) {
 
 
         that.table = IPA.table_widget({
+            scrollable: true,
             id: entity.name+'-search',
             name: 'search',
             label: IPA.metadata.objects[entity.name].label,

install/ui/webui.js

@@ -109,6 +109,8 @@ IPA.self_serv_navigation = function(spec) {
 /* main (document onready event handler) */
 $(function() {
 
+
+
     /* main loop (hashchange event handler) */
     function window_hashchange(evt){
         IPA.nav.update();
@@ -151,6 +153,17 @@ $(function() {
         IPA.nav.update();
 
         $('#login_header').html(IPA.messages.login.header);
+
+        function resizeFacet(){
+            var entity = IPA.current_entity;
+            if (entity){
+                var facet_name = IPA.current_facet(entity);
+                var facet = entity.get_facet(facet_name);
+                if (!facet) return;
+                facet.resize();
+            }
+        }
+        jQuery.event.add(window, "resize", resizeFacet);
     }
 
 
@@ -161,4 +174,5 @@ $(function() {
     }
 
     IPA.init(null, null, init_on_win, init_on_error);
+
 });

install/ui/widget.js

@@ -23,6 +23,8 @@
 
 /* REQUIRES: ipa.js */
 
+IPA.checkbox_column_width = 22;
+
 IPA.widget = function(spec) {
 
     spec = spec || {};
@@ -1141,13 +1143,22 @@ IPA.table_widget = function (spec) {
 
             th = $('<th/>').appendTo(tr);
 
-            if (that.scrollable && (i == columns.length-1)) {
+            if (that.scrollable ) {
+                var width;
                 if (column.width) {
-                    var width = parseInt(
+                    width = parseInt(
                         column.width.substring(0, column.width.length-2),10);
                     width += 16;
-                    th.css('width', width+'px');
+                }else{
+                    /* don't use the checkbox column as part of the overall
+                       calculation for column widths.  It is so small
+                       that it throws off the average. */
+                    width = (that.table.width() - IPA.checkbox_column_width) /
+                        (columns.length);
                 }
+                width += 'px';
+                th.css('width', width);
+                column.width = width;
             } else {
                 if (column.width) {
                     th.css('width', column.width);
@@ -1167,6 +1178,9 @@ IPA.table_widget = function (spec) {
                     'style': 'float: right;'
                 }).appendTo(th);
             }
+            if (that.scrollable && !column.width){
+                column.width = th.width() +'px';
+            }
         }
 
         that.tbody = $('<tbody/>').appendTo(that.table);
@@ -1178,7 +1192,7 @@ IPA.table_widget = function (spec) {
         that.row = $('<tr/>');
 
         var td = $('<td/>', {
-            'style': 'width: 22px;'
+            'style': 'width: '+ IPA.checkbox_column_width +'px;'
         }).appendTo(that.row);
 
         $('<input/>', {
@@ -1268,6 +1282,7 @@ IPA.table_widget = function (spec) {
                 name: 'total_pages'
             }).appendTo(that.pagination);
         }
+        that.resize();
     };
 
     that.select_changed = function(){
@@ -1282,6 +1297,16 @@ IPA.table_widget = function (spec) {
         that.tbody.empty();
     };
 
+    that.resize = function(){
+        if (that.scrollable){
+            that.tbody.attr('overflow-y', 'auto');
+            that.tbody.height("auto");
+            var table_max_height = $(window).height() -
+                IPA.reserved_screen_size;
+            that.tbody.height(table_max_height);
+        }
+    };
+
     that.load = function(result) {
 
         that.empty();