diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass index 98fe829..44d667d 100644 --- a/src/styles/_shots.sass +++ b/src/styles/_shots.sass @@ -7,6 +7,9 @@ .table-cell text-align: center + &.highlight .collapser + color: $color-primary-dark + &.shot-thumbnail width: $shots-list-thumbnail-width @@ -19,6 +22,10 @@ display: inline-block padding: 5px + &:hover + span.collapser + color: $color-primary + .table-body display: table-row-group @@ -60,35 +67,62 @@ .table-cell text-align: center + border-left: thin solid transparent + border-right: thin solid transparent + + &.active + background-color: $color-background + + &.highlight + background-color: $color-background-light + &.shot-name padding: 0px 10px text-align: left + position: relative + height: 100% a + height: 100% color: $color-text-dark-primary &.task-type max-width: 120px + position: relative + height: 100% + overflow: hidden a display: inline-block /* Each task in a new line */ - border-radius: 50% - width: 16px - height: 16px + position: relative top: 2px - +text-overflow-ellipsis - +status-background-color + height: 100% + width: 100% transition: all 150ms ease-in-out + +status-background-color-before + + &:before + display: block + content: '' + position: absolute + width: 16px + height: 16px + border-radius: 50% + border: 2px solid transparent + top: 50% + left: 50% + transform: translate(-50%, -50%) &.active opacity: 1 - border-radius: 3px + border-radius: 2px display: inline-block &.task-add width: auto border-radius: initial opacity: 0 + vertical-align: middle &:hover a.task-add opacity: 1 diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index 61bac25..9ea8274 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -510,21 +510,40 @@ =status-background-color &.status &-invalid - background-color: hsl(hue($color-status-invalid), 100%, 75%) + background-color: hsl(hue($color-status-invalid), 100%, 75%) &-todo - background-color: $color-status-todo-dark + background-color: $color-status-todo-dark &-in_progress - background-color: hsl(hue($color-status-in_progress), 100%, 50%) + background-color: hsl(hue($color-status-in_progress), 100%, 50%) &-on_hold - background-color: hsl(hue($color-status-on_hold), 60%, 50%) + background-color: hsl(hue($color-status-on_hold), 60%, 50%) &-approved - background-color: hsl(hue($color-status-approved), 40%, 60%) + background-color: hsl(hue($color-status-approved), 40%, 60%) &-cbb - background-color: $color-status-cbb + background-color: $color-status-cbb &-final - background-color: hsl(hue($color-status-final), 100%, 40%) + background-color: hsl(hue($color-status-final), 100%, 40%) &-review - background-color: hsl(hue($color-status-review), 100%, 75%) + background-color: hsl(hue($color-status-review), 100%, 75%) + +=status-background-color-before + &.status + &-invalid:before + background-color: hsl(hue($color-status-invalid), 100%, 75%) + &-todo:before + background-color: $color-status-todo-dark + &-in_progress:before + background-color: hsl(hue($color-status-in_progress), 100%, 50%) + &-on_hold:before + background-color: hsl(hue($color-status-on_hold), 60%, 50%) + &-approved:before + background-color: hsl(hue($color-status-approved), 40%, 60%) + &-cbb:before + background-color: $color-status-cbb + &-final:before + background-color: hsl(hue($color-status-final), 100%, 40%) + &-review:before + background-color: hsl(hue($color-status-review), 100%, 75%) =status-color &.status diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index 928b854..77bb1b2 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/src/templates/attract/shots/for_project.jade @@ -71,12 +71,13 @@ script. $(function() { item_open('{{ open_shot_id }}', 'shot', false); }); {% endif %} + var same_cells; $('.table-head .table-cell span').on('click', function(e){ e.stopPropagation(); /* We need to find every cell matching the same classes */ - var same_cells = '.' + $(this).parent().attr('class').split(' ').join('.'); + same_cells = '.' + $(this).parent().attr('class').split(' ').join('.'); $(same_cells).hide(); /* Add the spacer which we later click to expand */ $('
').insertAfter(same_cells); @@ -84,9 +85,26 @@ script. $('body').on('click', '.table-cell-spacer', function(){ /* We need to find every cell matching the same classes */ - var same_cells = '.' + $(this).prev().attr('class').split(' ').join('.'); + same_cells = '.' + $(this).prev().attr('class').split(' ').join('.'); $(same_cells).show(); $(same_cells).next().remove(); }); + $('.table-body .table-cell').mouseenter(function(){ + same_cells = '.' + $(this).attr('class').split(' ').join('.'); + $('.table-head ' + same_cells).addClass('highlight'); + }).mouseleave(function(){ + same_cells = '.' + $(this).attr('class').split(' ').join('.'); + $('.table-head ' + same_cells).removeClass('highlight'); + }); + + + $('.table-head .table-cell').mouseenter(function(){ + same_cells = '.' + $(this).attr('class').split(' ').join('.'); + $('.table-body ' + same_cells).addClass('highlight'); + }).mouseleave(function(){ + same_cells = '.' + $(this).attr('class').split(' ').join('.'); + $('.table-body ' + same_cells).removeClass('highlight'); + }); + | {% endblock footer_scripts %}