OO-3995: modify transition to fix it in QTI 2.1, fix adjustHeight()

src/main/java/org/olat/ims/qti21/ui/_content/at_run.html

@@ -62,11 +62,11 @@
 			</div>
 		</div>
 	#elseif($r.visible("qtitree"))
-		<div id="o_main_left" style="#if($r.isNotNull($menuWidth))width: ${menuWidth}em;#end">
+		<div id="o_main_left" style="#if($r.isNotNull($menuWidth))width: ${menuWidth}em;#else width:15em; #end">
 			<div id="o_main_left_content" class="clearfix">$r.render("qtitree")</div>
 			<div id="o_main_left_toggle" class="hidden-print">
 				<span class="sr-only">Toggle content menu</span>
-				<i class="o_icon o_icon_menuhandel"></i>
+				<i class="o_icon o_icon_menuhandel"> </i>
 			</div>
 		</div>
 		<div id="o_main_center">
@@ -108,21 +108,21 @@ jQuery().ready(function() {
 	};
 	
 	window.o_showMenu = function(duration) {
-		duration = (typeof duration === "undefined") ? 500 : duration;
+		duration = (typeof duration === "undefined") ? 333 : duration;
 		if (!menuState.open) {
 			jQuery('#o_main_left_content').show();
 			var l = jQuery('#o_main_left');
-			l.transition({'x': '0', 'left': '0'}, duration, function() {
+			l.transition({'x': 0, 'y' : 0, 'left': 0}, duration, function() {
 				menuState.open = true;
 			});
 		} 
 	};
 	window.o_hideMenu = function(duration) {
-		duration = (typeof duration === "undefined") ? 500 : duration;
+		duration = (typeof duration === "undefined") ? 333 : duration;
 		if (!menuState.docked && menuState.open) {
 			var l = jQuery('#o_main_left');
 			jQuery('#o_main_left_content').hide();
-			l.transition({'x': '-' + l.css('width'), 'left': '5px'}, duration, function() {
+			l.transition({'x': '-' + l.css('width'), 'y': 0, 'left': '5px'}, duration, function() {
 				menuState.open = false;
 			});			
 		} 
@@ -164,18 +164,18 @@ jQuery().ready(function() {
 	window.o_responsiveMenu = function() {
 		if (jQuery(window).width() < 992 && !(jQuery.support.opacity == false)) {
 			// same breakpoint as bootstrap screen-md, opacity detect IE8
-			o_undockMenu(500);
+			o_undockMenu(333);
 		} else {
-			o_dockMenu(500);
+			o_dockMenu(333);
 		}
 	};
 
 	// toggle menu on toggle events
 	jQuery('#o_main_left_toggle').on('click', function() {
 		if (menuState.open) {
-			o_hideMenu(500);
+			o_hideMenu(333);
 		} else {
-			o_showMenu(500);
+			o_showMenu(333);
 		}
 	});
 	// recalculate menu when browser is resized

src/main/webapp/static/js/functions.js

@@ -949,25 +949,27 @@ OPOL.getMainColumnsMaxHeight =  function(){
 };
 
 OPOL.adjustHeight = function() {
-	// Adjust the height of col1 2 and 3 based on the max column height. 
-	// This is necessary to implement layouts where the three columns have different
-	// backgounds and to enlarge the menu and content area to always show the whole 
-	// content. It is also required by the left menu offcanvas feature.
+	// Adjust the height of col1 and 3 based on the max column height. 
+	// This is necessary to implement layouts where the two columns have different
+	// backgrounds and to enlarge the menu and content area to always show the whole 
+	// content. It is also required by the left menu off-canvas feature.
 	try {
-		var contentHeight = 0;
-		col1 = jQuery('#o_main_left_content').outerHeight(true);
-		col2 = jQuery('#o_main_right_content').outerHeight(true);
-		col3 = jQuery('#o_main_center_content').outerHeight(true);
-
-		contentHeight = Math.max(col1, col2, col3);
-		// Assign new col height
-		if (col1 != null){
+		var col1El = jQuery('#o_main_left_content');
+		var col1 = col1El.length == 0 ? 0 : col1El.outerHeight(true);
+		var col2El = jQuery('#o_main_right_content');
+		var col2 = col2El.length == 0 ? 0 : col2El.outerHeight(true);
+		var col3El = jQuery('#o_main_center_content');
+		var col3 = col3El.length == 0 ? 0 : col3El.outerHeight(true);
+
+		var contentHeight = Math.max(col1, col2, col3);
+		// Assign new column height
+		if (col1El.length > 0) {
 			jQuery('#o_main_left').css({'min-height' : contentHeight + "px"});
 		}
-		if (col2 != null){
+		if (col2El.length > 0) {
 			jQuery('#o_main_right').css({'min-height' : contentHeight + "px"});
 		}
-		if (col3 != null){
+		if (col3El.length > 0) {
 			jQuery('#o_main_center').css({'min-height' : contentHeight + "px"});
 		}
 	} catch (e) {