diff --git a/src/scripts/tutti/00_utils.js b/src/scripts/tutti/00_utils.js index 5fb2b19..8dec1e9 100644 --- a/src/scripts/tutti/00_utils.js +++ b/src/scripts/tutti/00_utils.js @@ -143,3 +143,16 @@ $(window).on('load resize', function(){ $('.col-scrollable').css({'height': window_height}); }); + + +/* Fix header of items list (like assets or shots */ +function itemsListFixHeader(toClone, toAppend){ + var target = $(toClone); + var target_children = target.children(); + var clone = target.clone(); + + clone.children().width(function(i,val) { + return target_children.eq(i).width(); + }); + $(toAppend).append(clone); +} diff --git a/src/styles/_app_base.sass b/src/styles/_app_base.sass index ebd0afb..a48268b 100644 --- a/src/styles/_app_base.sass +++ b/src/styles/_app_base.sass @@ -63,158 +63,164 @@ nav.sidebar overflow-x: auto .table background-color: white - .table-row:hover - background-color: $color-background-light + .table-row:hover + background-color: $color-background-light + + .table-cell + &.item-status + width: 5px + height: 100% + border-bottom: none + .table-head + &.is-fixed + position: fixed + top: 42px + z-index: 1 + background-color: white .table-cell - &.item-status - width: 5px - height: 100% - border-bottom: none - .table-head - .table-cell - text-align: center + text-align: center - &.highlight .collapser - color: $color-primary-dark + &.highlight .collapser + color: $color-primary-dark - &.item-thumbnail - width: $items-list-thumbnail-width + &.item-thumbnail + width: $items-list-thumbnail-width - &.task-type - text-transform: capitalize + &.task-type + text-transform: capitalize + span.collapser + cursor: pointer + width: 100% + display: inline-block + padding: 5px + + &:hover span.collapser - cursor: pointer - width: 100% - display: inline-block - padding: 5px + color: $color-primary - &:hover - span.collapser - color: $color-primary + .table-body + .table-row + @include status-color-property(background-color, ' .item-status', '') - .table-body - .table-row - @include status-color-property(background-color, ' .item-status', '') + .table-cell + text-align: center - .table-cell - text-align: center + &.active + background-color: $color-background - &.active - background-color: $color-background + &.highlight + background-color: rgba(white, .5) - &.highlight - background-color: rgba(white, .5) + &.task-type a:before + transform: translate(-50%, -50%) scale(1.2) - &.task-type a:before - transform: translate(-50%, -50%) scale(1.2) + &.item-name + text-align: left + position: relative + height: 100% + a + display: flex + padding: 5px 10px + color: $color-text-dark-primary - &.item-name - text-align: left - position: relative + span + margin: auto 0 + line-height: 1.1em + + &.item-thumbnail + border-left: none + border-bottom: none + img + transition: opacity 150ms ease-in-out + + &.task-type + position: relative + height: 100% + white-space: nowrap + + a + display: inline-block /* Each task next to each other */ + vertical-align: middle height: 100% - a - display: flex - padding: 5px 10px - color: $color-text-dark-primary - - span - margin: auto 0 - line-height: 1.1em - - &.item-thumbnail - border-left: none - border-bottom: none - img - transition: opacity 150ms ease-in-out - - &.task-type + min-height: 100% + padding: 15px + transition: all 150ms ease-in-out position: relative - height: 100% - white-space: nowrap - a - display: inline-block /* Each task next to each other */ - vertical-align: middle - height: 100% - min-height: 100% - padding: 15px - transition: all 150ms ease-in-out - position: relative + @include status-color-property(background-color, ':before', '') - @include status-color-property(background-color, ':before', '') - - &:focus - outline: none - - &:before - transform: translate(-50%, -50%) scale(1.5) + &:focus + outline: none &:before - display: block - content: '' - position: absolute - width: 16px - height: 16px - border-radius: 50% - border: 0px solid transparent - +position-center-translate - transition: background-color 250ms ease-in-out, border 150ms ease-in-out, box-shadow 500ms ease-in-out + transform: translate(-50%, -50%) scale(1.5) - span - display: block - +position-center-translate - z-index: 1 - font: - weight: bold - size: .8em - text: - align: center - transform: capitalize - color: white + &:before + display: block + content: '' + position: absolute + width: 16px + height: 16px + border-radius: 50% + border: 0px solid transparent + +position-center-translate + transition: background-color 250ms ease-in-out, border 150ms ease-in-out, box-shadow 500ms ease-in-out + + span + display: block + +position-center-translate + z-index: 1 + font: + weight: bold + size: .8em + text: + align: center + transform: capitalize + color: white + + &.active + opacity: 1 + &:before + transform: translate(-50%, -50%) scale(1.3) + border: 2px solid white + box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2) + &:hover + border-color: $color-primary-light + &.flash-on + background: transparent !important + &:before + box-shadow: 0 0 25px 5px white + + &.processing + background-image: none + &:before + +stripes-animate + +stripes(transparent, rgba($color-background-active, .6), -45deg, 15px) + animation-duration: 4s &.active - opacity: 1 - &:before - transform: translate(-50%, -50%) scale(1.3) - border: 2px solid white - box-shadow: 0 0 0 1px rgba($color-primary, .2), 1px 1px 0 rgba(black, .2) - &:hover - border-color: $color-primary-light - &.flash-on - background: transparent !important - &:before - box-shadow: 0 0 25px 5px white - - &.processing background-image: none - &:before - +stripes-animate - +stripes(transparent, rgba($color-background-active, .6), -45deg, 15px) - animation-duration: 4s - &.active - background-image: none + &.task-add + width: auto + border-radius: initial + opacity: 0 + vertical-align: middle + padding: 5px + display: flex + justify-content: center - &.task-add - width: auto - border-radius: initial - opacity: 0 - vertical-align: middle - padding: 5px - display: flex - justify-content: center + &:hover, &:focus + opacity: 1 - &:hover, &:focus - opacity: 1 - - &:hover - &:before - opacity: .8 - transform: translate(-50%, -50%) scale(1.2) - &.active:before - transform: translate(-50%, -50%) scale(1.3) + &:hover + &:before + opacity: .8 + transform: translate(-50%, -50%) scale(1.2) + &.active:before + transform: translate(-50%, -50%) scale(1.3) .item-list-header a diff --git a/src/templates/attract/assets/for_project.jade b/src/templates/attract/assets/for_project.jade index 3ead534..bbe42de 100644 --- a/src/templates/attract/assets/for_project.jade +++ b/src/templates/attract/assets/for_project.jade @@ -8,8 +8,9 @@ | Assets ({{ assets | count }}) a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset - .item-list.task.col-scrollable + .item-list.asset.col-scrollable .table + .table-head.is-fixed .table-head .table-row .table-cell.asset-status @@ -143,4 +144,7 @@ script. $('#shot-list').css({'height': window_height}); $('#item-details').css({'height': window_height}); }); + + itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed'); + | {% endblock footer_scripts %} diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index b3d4338..f06a6a8 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/src/templates/attract/shots/for_project.jade @@ -13,6 +13,7 @@ .item-list.shot.col-scrollable .table + .table-head.is-fixed .table-head .table-row .table-cell.item-status @@ -135,4 +136,7 @@ script. handleSelector: ".col-splitter", resizeHeight: false }); + + itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed'); + | {% endblock footer_scripts %}