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.

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 %}