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});
});
/* 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
.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

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

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

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

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