Small jQuery plugin for resizing panels

Still doesn't save the size, since we want to save this in the user. Which is not implemented yet.

attract/static/assets/js/vendor/jquery-resizable.min.js

@@ -0,0 +1,2 @@
+!function(n,t){function e(t,e){return">"===t.trim()[0]?(t=t.trim().replace(/^>\s*/,""),e.find(t)):t?n(t):e}n.fn.resizable||(n.fn.resizable=function(t){var o={handleSelector:null,resizeWidth:!0,resizeHeight:!0,resizeWidthFrom:"right",resizeHeightFrom:"bottom",onDragStart:null,onDragEnd:null,onDrag:null,touchActionNone:!0};return"object"==typeof t&&(o=n.extend(o,t)),this.each(function(){function t(n){n.stopPropagation(),n.preventDefault()}function i(e){c=s(e),c.width=parseInt(d.width(),10),c.height=parseInt(d.height(),10),a=d.css("transition"),d.css("transition","none"),o.onDragStart&&o.onDragStart(e,d,o)===!1||(o.dragFunc=r,n(document).bind("mousemove.rsz",o.dragFunc),n(document).bind("mouseup.rsz",u),(window.Touch||navigator.maxTouchPoints)&&(n(document).bind("touchmove.rsz",o.dragFunc),n(document).bind("touchend.rsz",u)),n(document).bind("selectstart.rsz",t))}function r(n){var t,e,i=s(n);t="left"===o.resizeWidthFrom?c.width-i.x+c.x:c.width+i.x-c.x,e="top"===o.resizeHeightFrom?c.height-i.y+c.y:c.height+i.y-c.y,o.onDrag&&o.onDrag(n,d,t,e,o)===!1||(o.resizeHeight&&d.height(e),o.resizeWidth&&d.width(t))}function u(e){return e.stopPropagation(),e.preventDefault(),n(document).unbind("mousemove.rsz",o.dragFunc),n(document).unbind("mouseup.rsz",u),(window.Touch||navigator.maxTouchPoints)&&(n(document).unbind("touchmove.rsz",o.dragFunc),n(document).unbind("touchend.rsz",u)),n(document).unbind("selectstart.rsz",t),d.css("transition",a),o.onDragEnd&&o.onDragEnd(e,d,o),!1}function s(n){var t={x:0,y:0,width:0,height:0};if("number"==typeof n.clientX)t.x=n.clientX,t.y=n.clientY;else{if(!n.originalEvent.touches)return null;t.x=n.originalEvent.touches[0].clientX,t.y=n.originalEvent.touches[0].clientY}return t}var c,a,d=n(this),h=e(o.handleSelector,d);o.touchActionNone&&h.css("touch-action","none"),d.addClass("resizable"),h.bind("mousedown.rsz touchstart.rsz",i)})})}(jQuery,void 0);
+//# sourceMappingURL=jquery-resizable.min.js.map

src/styles/_base.sass

@@ -44,13 +44,15 @@ nav.sidebar
 
 #col_sidebar
 	width: $sidebar-width
+	min-width: $sidebar-width
 
 #col_left, #col_main, #col_right
 	display: flex
 	flex-direction: column
 	position: relative
-	flex: 1
+	flex: 0 0 auto
 	height: 100%
+	min-width: 150px
 
 #col_main
 	background-color: white
@@ -58,6 +60,7 @@ nav.sidebar
 
 #col_right
 	background-color: $color-background-light
+	flex: 1 1 auto
 
 .col_header
 	position: relative
@@ -84,6 +87,15 @@ nav.sidebar
 	background-color: white
 	border-bottom: thin solid $color-background
 
+.col-splitter
+	flex: 0 0 auto
+	width: 8px
+	background-color: $color-background
+	min-height: 200px
+	cursor: col-resize
+	position: relative
+	z-index: 1
+
 .input-group-flex
 	display: flex
 
@@ -154,6 +166,7 @@ select.input-transparent
 	.table-cell-spacer
 		background-color: $color-background-light
 		width: 6px
+		min-width: 4px
 		height: 100%
 		display: table-cell
 		border: 2px solid $color-background

src/styles/_tasks.sass

@@ -15,8 +15,9 @@
 
 .status-indicator
 	background-color: white
-	width: 16px
 	height: 16px
+	width: 16px
+	min-width: 16px
 	margin-left: 10px
 	border-radius: 50%
 	transition: all 100ms ease-in-out
@@ -52,10 +53,11 @@
 	.type
 		margin-left: auto
 		color: $color-text-dark-primary
-	.status
+		+text-overflow-ellipsis
 
 	.name
 		margin: 10px
+		+text-overflow-ellipsis
 
 	&.status
 		&-invalid
@@ -107,6 +109,7 @@ option.invalid_task
 	border-right: thin solid $color-background
 	a
 		color: $color-text-dark
+		+text-overflow-ellipsis
 	a.task-project
 		color: $color-text-dark-secondary
 		margin-left: 10px

src/styles/plugins/js_select2.sass

@@ -1,5 +1,6 @@
 @import ../config
 .select2-container
+	width: 100% !important
 	box-sizing: border-box
 	display: inline-block
 	margin: 0

src/templates/attract/layout.jade

@@ -39,7 +39,7 @@ html(lang="en")
 			| {% endblock %}
 
 		script(src="{{ url_for('static_pillar', filename='assets/js/tutti.min.js') }}")
-		script(src="{{ url_for('static_attract', filename='js/tasks.js') }}", async=true)
+		script(src="{{ url_for('static_attract', filename='assets/js/tasks.js') }}", async=true)
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select2.min.js') }}", async=true)
 		| {% block footer_scripts %}{% endblock %}
 

src/templates/attract/shots/for_project.jade

@@ -59,6 +59,8 @@
 				| {% endfor %}
 			| {% endfor %}
 
+.col-splitter
+
 #col_right
 	.col_header
 		span.header_text Shot details
@@ -111,4 +113,11 @@ script.
 		$('.table-body ' + same_cells).removeClass('highlight');
 	});
 
+script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
+script.
+	$("#col_main").resizable({
+		handleSelector: ".col-splitter",
+		resizeHeight: false
+	});
+
 | {% endblock footer_scripts %}

src/templates/attract/tasks/for_project.jade

@@ -21,6 +21,9 @@
 			span.name {{ task.name }}
 			span.type {{ task.properties.task_type }}
 		| {% endfor %}
+
+.col-splitter
+
 #col_right
 	.col_header
 		span.header_text Task Details
@@ -36,4 +39,11 @@ script.
 	{% if open_task_id %}
 		$(function() { task_open('{{ open_task_id }}'); });
 	{% endif %}
+
+script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
+script.
+	$("#col_main").resizable({
+		handleSelector: ".col-splitter",
+		resizeHeight: false
+	});
 | {% endblock %}