Dynamically resize sortable2 entries.

vasl_templates/webapp/static/main.js

@@ -307,6 +307,15 @@ $(document).ready( function () {
         on_scenario_name_change() ;
     } ) ;
 
+    // adjust the layout on resize
+    $(window).resize( function() {
+        // update the max height of sortable2 entries
+        var tab_id = $("#tabs .ui-tabs-tab.ui-state-active").attr( "aria-controls" ) ;
+        $( "#"+tab_id ).find( ".sortable" ).each( function() {
+            $(this).sortable2( "adjust-entry-heights" ) ;
+        } ) ;
+    } ) ;
+
     // initialize hotkeys
     init_hotkeys() ;
 
@@ -521,7 +530,7 @@ function on_tab_activate( evt, ui )
             border: "1px solid "+border,
             "border-bottom": "none",
         } ) ;
-        $("#"+tab_id).css( "border", "1px solid "+border ) ;
+        $( "#"+tab_id ).css( "border", "1px solid "+border ) ;
     }
 
     // style the tab being de-activated
@@ -534,6 +543,7 @@ function on_tab_activate( evt, ui )
         set_colors( tab_id, colors[0], colors[1] ) ;
     }
     tab_id = ui.newPanel.prop( "id" ) ;
+    var $tab = $( "#"+tab_id ) ;
     if ( tab_id === "tabs-ob1" )
         set_colors_for_player( tab_id, 1 ) ;
     else if ( tab_id === "tabs-ob2" )
@@ -541,7 +551,10 @@ function on_tab_activate( evt, ui )
     else
         set_colors( tab_id, "#ddd", "#ccc" ) ;
 
-    // adjust the footer vspacer's
+    // adjust the layout
+    $tab.find( ".sortable" ).each( function() {
+        $(this).sortable2( "adjust-entry-heights" ) ;
+    } ) ;
     adjust_footer_vspacers() ;
 }
 

vasl_templates/webapp/static/sortable.js

@@ -50,6 +50,10 @@ $.fn.sortable2 = function( action, args )
             update_hint( $sortable2 ) ;
         },
 
+        "adjust-entry-heights": function( $sortable2 ) {
+            adjust_entry_heights( $sortable2 ) ;
+        },
+
         "get-entry-data": function( $sortable2 ) {
             // get the data associated with each sortable2 entry
             var entry_data = [] ;
@@ -179,6 +183,8 @@ $.fn.sortable2 = function( action, args )
         var $entries = $sortable2.children( "li" ) ;
         if ( $entries.length === 0 )
             return ;
+        // NOTE: We can't get height for sortable2's that are not visible (i.e. not in the active tab),
+        // we update the heights dynamically as tabs are selected, and the window is resized.
         var available_height = $sortable2.parent().height() ;
         var max_height = Math.max( available_height/$entries.length, 2*gEmSize ) ;
         $entries.each( function() {
@@ -194,6 +200,8 @@ $.fn.sortable2 = function( action, args )
     {
         // set the entry colors
         var colors = $entry.data( "colors" ) ;
+        if ( ! colors )
+            return ;
         if ( $entry.hasClass( "ui-sortable-helper" ) )
             invert = true ; // nb: drag is in progress
         $entry.css( {