diff --git a/attract/static/js/tasks.js b/attract/static/assets/js/tasks.js similarity index 100% rename from attract/static/js/tasks.js rename to attract/static/assets/js/tasks.js diff --git a/attract/static/assets/js/vendor/jquery-resizable.min.js b/attract/static/assets/js/vendor/jquery-resizable.min.js new file mode 100644 index 0000000..36b5124 --- /dev/null +++ b/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 diff --git a/src/styles/_base.sass b/src/styles/_base.sass index 396872b..6bc5f31 100644 --- a/src/styles/_base.sass +++ b/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 diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass index a0c2b4b..7cb63cb 100644 --- a/src/styles/_tasks.sass +++ b/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 diff --git a/src/styles/plugins/js_select2.sass b/src/styles/plugins/js_select2.sass index 31b11ac..8174e97 100644 --- a/src/styles/plugins/js_select2.sass +++ b/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 diff --git a/src/templates/attract/layout.jade b/src/templates/attract/layout.jade index 4a3e8ca..63e8863 100644 --- a/src/templates/attract/layout.jade +++ b/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 %} diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index 01c40a1..c3e3a39 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/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 %} diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade index 2abe5d7..5635f05 100644 --- a/src/templates/attract/tasks/for_project.jade +++ b/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 %}