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

task- and shot- specific lists are now called item-

Browse Source
This commit is contained in:
Pablo Vazquez
2016-11-09 17:04:13 +01:00
parent 40ecbe2135
commit 5bf56ffd34
12 changed files with 248 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/styles/_app_base.sass
View File

@@ -274,6 +274,10 @@ input, input.form-control
textarea
resize: vertical
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background
#status-bar
color: $color-text-dark-secondary
margin-left: auto
@@ -320,6 +324,182 @@ input, input.form-control
.table-row:hover
background-color: $color-background-light
/* Attract specific table tweaks */
.item-list
overflow-x: scroll
.table
background-color: white
.table-row:hover
background-color: $color-background-light
.table-cell
&.item-status
width: 5px
height: 100%
.table-head
.table-cell
text-align: center
&.highlight .collapser
color: $color-primary-dark
&.item-thumbnail
width: $items-list-thumbnail-width
&.task-type
text-transform: capitalize
span.collapser
cursor: pointer
width: 100%
display: inline-block
padding: 5px
&:hover
span.collapser
color: $color-primary
.table-body
display: table-row-group
.table-row
position: relative
&.active
background-color: $color-background-active
.table-cell
border-bottom-color: darken($color-background-active, 15%)
.table-cell:last-child
box-shadow: inset -5px 0 0 $color-primary
@include status-color-property(background-color, ' .item-status', '')
.table-cell
text-align: center
border-left: thin solid transparent
border-right: thin solid transparent
&.active
background-color: $color-background
&.highlight
background-color: rgba(white, .5)
&.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
span
margin: auto 0
&.item-thumbnail
border-left: none
border-bottom: none
img
transition: opacity 150ms ease-in-out
&.task-type
position: relative
height: 100%
overflow: hidden
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', '')
&:focus
outline: none
&:before
transform: translate(-50%, -50%) scale(1.5)
&:before
display: block
content: ''
position: absolute
width: 16px
height: 16px
border-radius: 50%
border: 2px solid transparent
+position-center-translate
transition: background-color 150ms ease-in-out, border 150ms 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
&.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
&:hover, &:focus
opacity: 1
&:hover
&:before
opacity: .8
transform: translate(-50%, -50%) scale(1.2)
&.active:before
transform: translate(-50%, -50%) scale(1.3)
.item-list-header
a
color: $color-text-dark
+text-overflow-ellipsis
a.item-project
color: $color-text-dark-secondary
margin-left: 10px
/* Generic Statuses */
.processing
+stripes(rgba($color-background, .2), rgba($color-background, .5), -45deg, 25px)
@@ -336,6 +516,9 @@ input, input.form-control
transition: all .1s ease-in
opacity: .8
&:before
background-color: lighten($color-success, 50%) !important
.flash-off
transition: all 1s ease-out
img

2
src/styles/_config.sass
View File

@@ -92,4 +92,4 @@ $screen-md-max: $screen-lg-min - 1
$sidebar-width: 50px
$shots-list-thumbnail-width: 100px
$items-list-thumbnail-width: 100px

170
src/styles/_shots.sass
View File

@@ -1,59 +1,15 @@
#shot-list
overflow-x: scroll
.item-list.shot
.table
background-color: white
.table-row:hover
background-color: $color-background-light
.table-cell
&.shot-status
width: 5px
height: 100%
.table-head
.table-cell
text-align: center
&.highlight .collapser
color: $color-primary-dark
&.shot-thumbnail
width: $shots-list-thumbnail-width
&.task-type
text-transform: capitalize
span.collapser
cursor: pointer
width: 100%
display: inline-block
padding: 5px
&:hover
span.collapser
color: $color-primary
.table-body
display: table-row-group
.table-row
position: relative
&.active
background-color: $color-background-active
.table-cell
border-bottom-color: darken($color-background-active, 15%)
.table-cell:last-child
box-shadow: inset -5px 0 0 $color-primary
&.not-in-edit
+stripes(rgba($color-background, .1), rgba($color-background, .5), 90deg, 28px)
.table-cell
&.shot-name a
&.item-name a
color: $color-text-dark-secondary
&.shot-status
&.item-status
opacity: .2
&.task-type .task-link
@@ -62,7 +18,7 @@
background: transparent
border: 2px solid $color-text-dark-secondary
&.shot-thumbnail img
&.item-thumbnail img
opacity: .5
&.active
@@ -70,7 +26,7 @@
&:hover, &.active
.table-cell
&.shot-thumbnail img
&.item-thumbnail img
opacity: 1
&.task-type .task-link
@include status-color-property(background-color, ':before', '')
@@ -78,119 +34,3 @@
&:before
opacity: 1
border: none
@include status-color-property(background-color, ' .shot-status', '')
.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
text-align: left
position: relative
height: 100%
a
display: flex
padding: 5px 10px
color: $color-text-dark-primary
span
margin: auto 0
&.shot-thumbnail
border-left: none
border-bottom: none
img
transition: opacity 150ms ease-in-out
&.task-type
position: relative
height: 100%
overflow: hidden
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', '')
&:focus
outline: none
&:before
transform: translate(-50%, -50%) scale(1.5)
&:before
display: block
content: ''
position: absolute
width: 16px
height: 16px
border-radius: 50%
border: 2px solid transparent
+position-center-translate
transition: background-color 150ms ease-in-out, border 150ms 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
&.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
&:hover, &:focus
opacity: 1
&:hover
&:before
opacity: .8
transform: translate(-50%, -50%) scale(1.2)
&.active:before
transform: translate(-50%, -50%) scale(1.3)

20
src/styles/_tasks.sass
View File

@@ -1,3 +1,6 @@
.item-list.task
overflow-x: hidden
.attract-box
margin: 10px
padding: 10px
@@ -90,10 +93,7 @@
.attract-box+.attract-box
margin-top: 0
#task-list
overflow-x: hidden
#task-add
#item-add
margin-left: auto
font-size: .85em
color: $color-primary
@@ -174,15 +174,3 @@
option.invalid_task
color: $color-danger
background-color: hsl(hue($color-danger), 80%, 90%)
.task-list-header
a
color: $color-text-dark
+text-overflow-ellipsis
a.task-project
color: $color-text-dark-secondary
margin-left: 10px
.input-group-separator
margin: 10px 0
border-top: thin solid $color-background