Shots/Assets list: Fix fixed table header not resizing when adjusting col_main width

src/scripts/tutti/00_utils.js

@@ -145,8 +145,8 @@ $(window).on('load resize', function(){
 });
 
 
-/* Fix header of items list (like assets or shots */
+/* Clone children elements, used to fix the header of items_list (like assets or shots) */
-function itemsListFixHeader(toClone, toAppend){
+function cloneChildren(toClone, toAppend){
     var target = $(toClone);
     var target_children = target.children();
     var clone = target.clone();
@@ -156,3 +156,25 @@ function itemsListFixHeader(toClone, toAppend){
     });
     $(toAppend).append(clone);
 }
+
+/* Scroll fixed headers horizontally, used for the header of items_list (like assets or shots) */
+function scrollHeaderHorizontal(scrollableClassName, fixedContainer, offset){
+    var $table_list = $('.item-list');
+
+    $table_list.scroll(function(e) {
+        // Scroll of the table scrollableClassName from the left minus offset, inverted (multiplied by -1)
+        var table_header_offset = ($table_list.scrollLeft() - offset) * - 1
+        $(fixedContainer).css('left', table_header_offset);
+    });
+}
+
+
+// For every column, set the width of the fixed header using the original columns width
+function setHeaderCellsWidth(tableHeaderRowOriginal, tableHeaderRowFixed) {
+    var table_header = $(tableHeaderRowOriginal).children();
+    var table_header_fixed = $(tableHeaderRowFixed).children();
+
+    table_header_fixed.width(function(i,val) {
+        return table_header.eq(i).width();
+    });
+}

src/templates/attract/assets/for_project.jade

@@ -5,13 +5,13 @@
 #col_main
 	.col_header.item-list-header
 		a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
-		| Assets ({{ assets | count }})
+		span.item-extra Assets ({{ assets | count }})
 		a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset
 
 	.item-list.asset.col-scrollable
 		.table
 			.table-head.is-fixed
-			.table-head
+			.table-head.original
 				.table-row
 					.table-cell.asset-status
 					| {#  disabled until users can actually upload a thumbnail
@@ -142,9 +142,18 @@ script.
 script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
 script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable-0.20.min.js')}}")
 script.
+	// The fixed table header situation, check out 00_utils.js
+	cloneChildren('.item-list .table-head .table-row', '.item-list .table-head.is-fixed');
+	scrollHeaderHorizontal('.item-list', '.item-list .table-head.is-fixed', 50);
+	// For every column, set the width of the fixed header using the original columns width
+	setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row');
+
 	$("#col_main").resizable({
 		handleSelector: ".col-splitter",
-		resizeHeight: false
+		resizeHeight: false,
+		onDrag: function () {
+			setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row');
+		}
 	});
 
 	// Set height of asset-list and item details so we can scroll inside them
@@ -154,6 +163,4 @@ script.
 		$('#item-details').css({'height': window_height});
 	});
 
-	itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed');
-
 | {% endblock footer_scripts %}

src/templates/attract/shots/for_project.jade

@@ -5,7 +5,7 @@
 #col_main
 	.col_header.item-list-header
 		a.item-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}
-		span(title='In the edit') {{ stats.nr_of_shots }} shots | {{ stats.total_frame_count }} frames
+		span.item-extra(title='In the edit') {{ stats.nr_of_shots }} shots | {{ stats.total_frame_count }} frames
 
 		| {# Not allowed for the moment. Shots are added via the Sequencer
 		a#item-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
@@ -14,7 +14,7 @@
 	.item-list.shot.col-scrollable
 		.table
 			.table-head.is-fixed
-			.table-head
+			.table-head.original
 				.table-row
 					.table-cell.item-status
 					.table-cell.item-thumbnail
@@ -73,6 +73,7 @@
 					| {% endfor %}
 				| {% endfor %}
 
+
 .col-splitter
 
 #col_right
@@ -88,6 +89,8 @@
 script(src="{{ url_for('static_pillar', filename='assets/js/vendor/clipboard.min.js')}}")
 script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable-0.20.min.js')}}")
 script.
+
+	// Open task or shot on load
 	{% if open_task_id %}
 		$(function() { item_open('{{ open_task_id }}', 'task', false); });
 	{% endif %}
@@ -95,6 +98,8 @@ script.
 		$(function() { item_open('{{ open_shot_id }}', 'shot', false); });
 	{% endif %}
 
+
+	// Create tasks
 	$('button.task-add').on('click', function(e){
 		e.preventDefault();
 		var parent_id = $(this).attr('data-parent-id');
@@ -103,9 +108,10 @@ script.
 		task_create(parent_id, task_type);
 	});
 
-	var same_cells;
 
 	/* Collapse columns by clicking on the title */
+	var same_cells;
+
 	$('.table-head .table-cell span.collapser').on('click', function(e){
 		e.stopPropagation();
 
@@ -114,6 +120,9 @@ script.
 		$(same_cells).hide();
 		/* Add the spacer which we later click to expand  */
 		$('<div class="table-cell-spacer ' + $(this).text() + '" title="Expand ' + $(this).text() + '"></div>').insertAfter(same_cells);
+
+		// For every column, set the width of the fixed header using the original columns width
+		setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row');
 	});
 
 	$('body').on('click', '.table-cell-spacer', function(){
@@ -140,12 +149,19 @@ script.
 		$('.table-body ' + same_cells).removeClass('highlight');
 	});
 
-script.
+
+	// The fixed table header situation, check out 00_utils.js
+	cloneChildren('.item-list .table-head .table-row', '.item-list .table-head.is-fixed');
+	scrollHeaderHorizontal('.item-list', '.item-list .table-head.is-fixed', 50);
+	// For every column, set the width of the fixed header using the original columns width
+	setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row');
+
 	$("#col_main").resizable({
 		handleSelector: ".col-splitter",
-		resizeHeight: false
+		resizeHeight: false,
+		onDrag: function () {
+			setHeaderCellsWidth('.item-list .table-head.original .table-row', '.item-list .table-head.is-fixed .table-row');
+		}
 	});
 
-	itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed');
-
 | {% endblock footer_scripts %}