archive/attract
0
0
Fork 0
Code Issues 7 Pull Requests Projects Releases Wiki Activity

Fix header of shots/assets list

Browse Source
This commit is contained in:
Pablo Vazquez
2016-11-17 15:12:06 +01:00
parent 97f75a04e5
commit 2c8e20d0c0
4 changed files with 153 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/scripts/tutti/00_utils.js
View File

@@ -143,3 +143,16 @@ $(window).on('load resize', function(){
$('.col-scrollable').css({'height': window_height}); $('.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);
}

256
src/styles/_app_base.sass
View File

@@ -63,158 +63,164 @@ nav.sidebar
overflow-x: auto overflow-x: auto
.table .table
background-color: white background-color: white
.table-row:hover .table-row:hover
background-color: $color-background-light 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 .table-cell
&.item-status text-align: center
width: 5px
height: 100%
border-bottom: none
.table-head
.table-cell
text-align: center
&.highlight .collapser &.highlight .collapser
color: $color-primary-dark color: $color-primary-dark
&.item-thumbnail &.item-thumbnail
width: $items-list-thumbnail-width width: $items-list-thumbnail-width
&.task-type &.task-type
text-transform: capitalize text-transform: capitalize
span.collapser
cursor: pointer
width: 100%
display: inline-block
padding: 5px
&:hover
span.collapser span.collapser
cursor: pointer color: $color-primary
width: 100%
display: inline-block
padding: 5px
&:hover .table-body
span.collapser .table-row
color: $color-primary @include status-color-property(background-color, ' .item-status', '')
.table-body .table-cell
.table-row text-align: center
@include status-color-property(background-color, ' .item-status', '')
.table-cell &.active
text-align: center background-color: $color-background
&.active &.highlight
background-color: $color-background background-color: rgba(white, .5)
&.highlight &.task-type a:before
background-color: rgba(white, .5) transform: translate(-50%, -50%) scale(1.2)
&.task-type a:before &.item-name
transform: translate(-50%, -50%) scale(1.2) text-align: left
position: relative
height: 100%
a
display: flex
padding: 5px 10px
color: $color-text-dark-primary
&.item-name span
text-align: left margin: auto 0
position: relative 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% height: 100%
a min-height: 100%
display: flex padding: 15px
padding: 5px 10px transition: all 150ms ease-in-out
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
position: relative position: relative
height: 100%
white-space: nowrap
a @include status-color-property(background-color, ':before', '')
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', '') &:focus
outline: none
&:focus
outline: none
&:before
transform: translate(-50%, -50%) scale(1.5)
&:before &:before
display: block transform: translate(-50%, -50%) scale(1.5)
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 &:before
display: block display: block
+position-center-translate content: ''
z-index: 1 position: absolute
font: width: 16px
weight: bold height: 16px
size: .8em border-radius: 50%
text: border: 0px solid transparent
align: center +position-center-translate
transform: capitalize transition: background-color 250ms ease-in-out, border 150ms ease-in-out, box-shadow 500ms ease-in-out
color: white
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 &.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 background-image: none
&:before
+stripes-animate
+stripes(transparent, rgba($color-background-active, .6), -45deg, 15px)
animation-duration: 4s
&.active &.task-add
background-image: none width: auto
border-radius: initial
opacity: 0
vertical-align: middle
padding: 5px
display: flex
justify-content: center
&.task-add &:hover, &:focus
width: auto opacity: 1
border-radius: initial
opacity: 0
vertical-align: middle
padding: 5px
display: flex
justify-content: center
&:hover, &:focus &:hover
opacity: 1 &:before
opacity: .8
&:hover transform: translate(-50%, -50%) scale(1.2)
&:before &.active:before
opacity: .8 transform: translate(-50%, -50%) scale(1.3)
transform: translate(-50%, -50%) scale(1.2)
&.active:before
transform: translate(-50%, -50%) scale(1.3)
.item-list-header .item-list-header
a a

6
src/templates/attract/assets/for_project.jade
View File

@@ -8,8 +8,9 @@
| Assets ({{ assets | count }}) | Assets ({{ assets | count }})
a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset a#item-add(href="javascript:asset_create('{{ project.url }}');") + Create Asset
.item-list.task.col-scrollable .item-list.asset.col-scrollable
.table .table
.table-head.is-fixed
.table-head .table-head
.table-row .table-row
.table-cell.asset-status .table-cell.asset-status
@@ -143,4 +144,7 @@ script.
$('#shot-list').css({'height': window_height}); $('#shot-list').css({'height': window_height});
$('#item-details').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 %} | {% endblock footer_scripts %}

4
src/templates/attract/shots/for_project.jade
View File

@@ -13,6 +13,7 @@
.item-list.shot.col-scrollable .item-list.shot.col-scrollable
.table .table
.table-head.is-fixed
.table-head .table-head
.table-row .table-row
.table-cell.item-status .table-cell.item-status
@@ -135,4 +136,7 @@ script.
handleSelector: ".col-splitter", handleSelector: ".col-splitter",
resizeHeight: false resizeHeight: false
}); });
itemsListFixHeader('.item-list .table-head .table-row', '.item-list .table-head.is-fixed');
| {% endblock footer_scripts %} | {% endblock footer_scripts %}