diff --git a/attract/static/js/tasks.js b/attract/static/js/tasks.js index 4c63a78..a2cf7db 100644 --- a/attract/static/js/tasks.js +++ b/attract/static/js/tasks.js @@ -3,7 +3,7 @@ var target = this; this .addClass('flash-on') - .delay(200) // this delay is linked to the transition in the flash-on CSS class. + .delay(1000) // this delay is linked to the transition in the flash-on CSS class. .queue(function() { target .removeClass('flash-on') diff --git a/src/styles/_base.sass b/src/styles/_base.sass index ff1f0c7..45022b9 100644 --- a/src/styles/_base.sass +++ b/src/styles/_base.sass @@ -54,6 +54,7 @@ nav.sidebar #col_main background-color: white + border-right: thin solid $color-background-dark #col_right background-color: $color-background-light @@ -130,7 +131,6 @@ select.input-transparent display: table-header-group .table-cell - padding: 5px font-size: .9em color: $color-text-dark-secondary @@ -140,6 +140,7 @@ select.input-transparent .table-cell display: table-cell border-bottom: thin solid $color-background-dark + vertical-align: middle .table-cell-spacer background-color: $color-background-light @@ -150,3 +151,8 @@ select.input-transparent border-top: none border-bottom: none cursor: e-resize + +.processing + +stripes($color-background, rgba($color-background, .5), -45deg, 25px) + +stripes-animate + animation-duration: 2s diff --git a/src/styles/_config.sass b/src/styles/_config.sass index d708d37..66ca14c 100644 --- a/src/styles/_config.sass +++ b/src/styles/_config.sass @@ -43,13 +43,21 @@ $color_downvote: #74a4ff /* Label Status */ $color-status-invalid: lightgray +$color-status-invalid-dark: hsl(hue($color-status-invalid), 100%, 75%) $color-status-todo: lightgray +$color-status-todo-dark: hsl(hue($color-status-todo), 100%, 75%) $color-status-in_progress: #fff2cc +$color-status-in_progress-dark: hsl(hue($color-status-in_progress), 100%, 45%) $color-status-on_hold: #fff2cc +$color-status-on_hold-dark: hsl(hue($color-status-on_hold), 100%, 50%) $color-status-approved: #e4f5f9 +$color-status-approved-dark: hsl(hue($color-status-approved), 100%, 50%) $color-status-cbb: #e4f5f9 +$color-status-cbb-dark: hsl(hue($color-status-cbb), 100%, 50%) $color-status-final: #e7f5d3 +$color-status-final-dark: hsl(hue($color-status-final), 100%, 40%) $color-status-review: #e4f5f9 +$color-status-review-dark: hsl(hue($color-status-review), 100%, 50%) $color-status-active: #E6F3FD $color-status-updated: #e7f5d3 diff --git a/src/styles/_shots.sass b/src/styles/_shots.sass index 5163bc2..c61d82c 100644 --- a/src/styles/_shots.sass +++ b/src/styles/_shots.sass @@ -1,6 +1,8 @@ .table .table-head .table-cell + text-align: center + &.shot-thumbnail width: $shots-list-thumbnail-width @@ -9,19 +11,36 @@ span.collapser cursor: pointer + width: 100% + display: inline-block + padding: 5px .table-body display: table-row-group .table-cell + text-align: center &.shot-name - padding-left: 10px + padding: 0 10px + text-align: left &.task-type max-width: 120px - +text-overflow-ellipsis - /* Each task in a new line */ a - display: block + display: block /* Each task in a new line */ + opacity: 0 + color: $color-text-dark-primary + +status-color + transition: all 150ms ease-in-out + span + +text-overflow-ellipsis + display: block + padding: 3px 10px + a[class^="status-"] + opacity: 1 + + &:hover + a + opacity: 1 diff --git a/src/styles/_tasks.sass b/src/styles/_tasks.sass index e7f1adc..b988f49 100644 --- a/src/styles/_tasks.sass +++ b/src/styles/_tasks.sass @@ -20,13 +20,11 @@ transition: all 100ms ease-in-out .flash-on - background-color: #dfd - color: #040 - outline: 1px solid #040 - transition: all 0.2s + background-color: lighten($color-success, 40%) + transition: all .5s ease-in .flash-off - transition: all 0.1s + transition: all 1s ease-out .task-list-item border-right: 5px solid transparent @@ -49,11 +47,6 @@ .status-indicator transform: scale(1.1) - &.processing - +stripes($color-background, rgba($color-background, .5), -45deg, 25px) - +stripes-animate - animation-duration: 2s - .status, .type display: inline-block margin-right: 10px diff --git a/src/styles/_utils.sass b/src/styles/_utils.sass index 5f46b97..9835ecf 100644 --- a/src/styles/_utils.sass +++ b/src/styles/_utils.sass @@ -506,3 +506,41 @@ display: block max-width: 100% height: auto + +=status-background-color + &.status + &-invalid + color: hsl(hue($color-status-invalid), 100%, 75%) + &-todo + color: hsl(hue($color-status-todo), 100%, 75%) + &-in_progress + color: hsl(hue($color-status-in_progress), 100%, 60%) + &-on_hold + color: hsl(hue($color-status-on_hold), 100%, 75%) + &-approved + color: hsl(hue($color-status-approved), 100%, 75%) + &-cbb + color: hsl(hue($color-status-cbb), 100%, 75%) + &-final + color: hsl(hue($color-status-final), 100%, 40%) + &-review + color: hsl(hue($color-status-review), 100%, 75%) + +=status-color + &.status + &-invalid + color: $color-status-invalid-dark + &-todo + color: $color-status-todo-dark + &-in_progress + color: $color-status-in_progress-dark + &-on_hold + color: $color-status-on_hold-dark + &-approved + color: $color-status-approved-dark + &-cbb + color: $color-status-cbb-dark + &-final + color: $color-status-final-dark + &-review + color: $color-status-review-dark diff --git a/src/templates/attract/shots/for_project.jade b/src/templates/attract/shots/for_project.jade index d137a5f..04cc056 100644 --- a/src/templates/attract/shots/for_project.jade +++ b/src/templates/attract/shots/for_project.jade @@ -22,7 +22,11 @@ | {% for shot in shots %} .table-row(id="shot-{{ shot._id }}") .table-cell.shot-thumbnail - img(src="http://placehold.it/100x60") + a( + id="shot-link-{{ shot._id }}" + href="javascript:shot_open('{{ shot._id }}', '{{ project.url }}');", + class="status-{{ shot.properties.status }}") + img(src="http://placehold.it/100x60") .table-cell.shot-name a( id="shot-link-{{ shot._id }}" @@ -40,7 +44,7 @@ | {% if not tasks_for_shots[shot._id][task_type] %} a( href="javascript:task_create('{{ shot._id }}', '{{ project.url }}', '{{ task_type }}');") - | + {{ task_type }} + | + Task | {% endif %} | {% endfor %} | {% endfor %}