Individual scroll for shot/tasks list and item details
This commit is contained in:
@@ -18,6 +18,8 @@ body
|
|||||||
nav.sidebar .navbar-item.attract
|
nav.sidebar .navbar-item.attract
|
||||||
+sidebar-button-active
|
+sidebar-button-active
|
||||||
|
|
||||||
|
$splitter-width: 6px
|
||||||
|
|
||||||
#app-main
|
#app-main
|
||||||
display: flex
|
display: flex
|
||||||
align-items: stretch
|
align-items: stretch
|
||||||
@@ -54,10 +56,11 @@ body
|
|||||||
|
|
||||||
#col_right
|
#col_right
|
||||||
flex: 1 1 auto
|
flex: 1 1 auto
|
||||||
padding-left: 8px // to compensate width of the splitter, which is positioned 'fixed'
|
padding-left: $splitter-width // to compensate width of the splitter, which is positioned 'fixed'
|
||||||
|
|
||||||
.col_header
|
.col_header
|
||||||
position: relative
|
position: relative
|
||||||
|
z-index: 1
|
||||||
display: flex
|
display: flex
|
||||||
align-items: center
|
align-items: center
|
||||||
width: 100%
|
width: 100%
|
||||||
@@ -67,6 +70,7 @@ body
|
|||||||
|
|
||||||
font-size: 1.2em
|
font-size: 1.2em
|
||||||
border-bottom: thin solid $color-background
|
border-bottom: thin solid $color-background
|
||||||
|
box-shadow: 0 0 15px rgba(black, .2)
|
||||||
|
|
||||||
&.scrolled
|
&.scrolled
|
||||||
box-shadow: 0 -2px 20px rgba(black, .2)
|
box-shadow: 0 -2px 20px rgba(black, .2)
|
||||||
@@ -98,7 +102,7 @@ body
|
|||||||
|
|
||||||
.col-splitter
|
.col-splitter
|
||||||
flex: 0 0 auto
|
flex: 0 0 auto
|
||||||
width: 8px
|
width: $splitter-width
|
||||||
background-color: $color-background
|
background-color: $color-background
|
||||||
min-height: 200px
|
min-height: 200px
|
||||||
cursor: col-resize
|
cursor: col-resize
|
||||||
@@ -111,6 +115,15 @@ body
|
|||||||
display: none
|
display: none
|
||||||
visibility: hidden
|
visibility: hidden
|
||||||
|
|
||||||
|
::-webkit-scrollbar
|
||||||
|
width: 5px
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track
|
||||||
|
background-color: $color-background
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb
|
||||||
|
background-color: $color-text-dark-hint
|
||||||
|
|
||||||
.flyout.notifications
|
.flyout.notifications
|
||||||
left: $sidebar-width + 5
|
left: $sidebar-width + 5
|
||||||
top: initial
|
top: initial
|
||||||
@@ -492,8 +505,7 @@ input, input.form-control
|
|||||||
|
|
||||||
|
|
||||||
#item-details
|
#item-details
|
||||||
display: flex
|
overflow-x: hidden
|
||||||
flex-direction: column
|
|
||||||
|
|
||||||
.item-details-empty
|
.item-details-empty
|
||||||
display: flex
|
display: flex
|
||||||
|
|||||||
@@ -1,181 +1,183 @@
|
|||||||
.table#shot-list
|
#shot-list
|
||||||
background-color: white
|
overflow-x: hidden
|
||||||
.table-row:hover
|
.table
|
||||||
background-color: $color-background-light
|
background-color: white
|
||||||
|
.table-row:hover
|
||||||
|
background-color: $color-background-light
|
||||||
|
|
||||||
.table-cell
|
|
||||||
&.shot-status
|
|
||||||
width: 5px
|
|
||||||
height: 100%
|
|
||||||
.table-head
|
|
||||||
.table-cell
|
.table-cell
|
||||||
text-align: center
|
&.shot-status
|
||||||
|
width: 5px
|
||||||
|
height: 100%
|
||||||
|
.table-head
|
||||||
|
.table-cell
|
||||||
|
text-align: center
|
||||||
|
|
||||||
&.highlight .collapser
|
&.highlight .collapser
|
||||||
color: $color-primary-dark
|
color: $color-primary-dark
|
||||||
|
|
||||||
&.shot-thumbnail
|
&.shot-thumbnail
|
||||||
width: $shots-list-thumbnail-width
|
width: $shots-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
|
||||||
color: $color-primary
|
cursor: pointer
|
||||||
|
width: 100%
|
||||||
|
display: inline-block
|
||||||
|
padding: 5px
|
||||||
|
|
||||||
.table-body
|
&:hover
|
||||||
display: table-row-group
|
span.collapser
|
||||||
|
color: $color-primary
|
||||||
|
|
||||||
.table-row
|
.table-body
|
||||||
position: relative
|
display: table-row-group
|
||||||
|
|
||||||
&.active
|
.table-row
|
||||||
background-color: $color-background-active
|
position: relative
|
||||||
|
|
||||||
.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
|
|
||||||
color: $color-text-dark-secondary
|
|
||||||
|
|
||||||
&.shot-status
|
|
||||||
opacity: .2
|
|
||||||
|
|
||||||
&.task-type .task-link
|
|
||||||
&:before
|
|
||||||
opacity: .3
|
|
||||||
background: transparent
|
|
||||||
border: 2px solid $color-text-dark-secondary
|
|
||||||
|
|
||||||
&.shot-thumbnail img
|
|
||||||
opacity: .5
|
|
||||||
|
|
||||||
&.active
|
&.active
|
||||||
+stripes(white, rgba($color-background-active, .8), 90deg, 28px)
|
background-color: $color-background-active
|
||||||
|
|
||||||
&:hover, &.active
|
|
||||||
.table-cell
|
.table-cell
|
||||||
&.shot-thumbnail img
|
border-bottom-color: darken($color-background-active, 15%)
|
||||||
opacity: 1
|
.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
|
||||||
|
color: $color-text-dark-secondary
|
||||||
|
|
||||||
|
&.shot-status
|
||||||
|
opacity: .2
|
||||||
|
|
||||||
&.task-type .task-link
|
&.task-type .task-link
|
||||||
@include status-color-property(background-color, ':before', '')
|
|
||||||
|
|
||||||
&:before
|
&:before
|
||||||
opacity: 1
|
opacity: .3
|
||||||
border: none
|
background: transparent
|
||||||
|
border: 2px solid $color-text-dark-secondary
|
||||||
|
|
||||||
@include status-color-property(background-color, ' .shot-status', '')
|
&.shot-thumbnail img
|
||||||
|
opacity: .5
|
||||||
.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 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: all 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
|
&.active
|
||||||
opacity: 1
|
+stripes(white, rgba($color-background-active, .8), 90deg, 28px)
|
||||||
|
|
||||||
|
&:hover, &.active
|
||||||
|
.table-cell
|
||||||
|
&.shot-thumbnail img
|
||||||
|
opacity: 1
|
||||||
|
&.task-type .task-link
|
||||||
|
@include status-color-property(background-color, ':before', '')
|
||||||
|
|
||||||
|
&: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 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
|
&:before
|
||||||
transform: translate(-50%, -50%) scale(1.3)
|
display: block
|
||||||
border: 2px solid white
|
content: ''
|
||||||
box-shadow: 0 0 5px 1px $color-background-dark, 1px 1px 0 rgba(black, .2)
|
position: absolute
|
||||||
&:hover
|
width: 16px
|
||||||
border-color: $color-primary-light
|
height: 16px
|
||||||
|
border-radius: 50%
|
||||||
|
border: 2px solid transparent
|
||||||
|
+position-center-translate
|
||||||
|
transition: all 150ms ease-in-out
|
||||||
|
|
||||||
&.task-add
|
span
|
||||||
width: auto
|
display: block
|
||||||
border-radius: initial
|
+position-center-translate
|
||||||
opacity: 0
|
z-index: 1
|
||||||
vertical-align: middle
|
font:
|
||||||
padding: 5px
|
weight: bold
|
||||||
display: flex
|
size: .8em
|
||||||
justify-content: center
|
text:
|
||||||
|
align: center
|
||||||
|
transform: capitalize
|
||||||
|
color: white
|
||||||
|
|
||||||
&:hover, &:focus
|
&.active
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
|
||||||
&:hover
|
&:before
|
||||||
&:before
|
transform: translate(-50%, -50%) scale(1.3)
|
||||||
opacity: .8
|
border: 2px solid white
|
||||||
transform: translate(-50%, -50%) scale(1.2)
|
box-shadow: 0 0 5px 1px $color-background-dark, 1px 1px 0 rgba(black, .2)
|
||||||
&.active:before
|
&:hover
|
||||||
transform: translate(-50%, -50%) scale(1.3)
|
border-color: $color-primary-light
|
||||||
|
|
||||||
|
&.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)
|
||||||
|
|||||||
@@ -90,6 +90,9 @@
|
|||||||
.attract-box+.attract-box
|
.attract-box+.attract-box
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
|
|
||||||
|
#task-list
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
#task-add
|
#task-add
|
||||||
margin-left: auto
|
margin-left: auto
|
||||||
font-size: .85em
|
font-size: .85em
|
||||||
@@ -164,7 +167,6 @@ option.invalid_task
|
|||||||
background-color: hsl(hue($color-danger), 80%, 90%)
|
background-color: hsl(hue($color-danger), 80%, 90%)
|
||||||
|
|
||||||
.task-list-header
|
.task-list-header
|
||||||
border-right: thin solid $color-background
|
|
||||||
a
|
a
|
||||||
color: $color-text-dark
|
color: $color-text-dark
|
||||||
+text-overflow-ellipsis
|
+text-overflow-ellipsis
|
||||||
|
|||||||
@@ -11,63 +11,64 @@
|
|||||||
a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
|
a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
|
||||||
| #}
|
| #}
|
||||||
|
|
||||||
.table#shot-list
|
#shot-list
|
||||||
.table-head
|
.table
|
||||||
.table-row
|
.table-head
|
||||||
.table-cell.shot-status
|
.table-row
|
||||||
.table-cell.shot-thumbnail
|
.table-cell.shot-status
|
||||||
span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
|
.table-cell.shot-thumbnail
|
||||||
.table-cell.shot-name
|
span.collapser.thumbnails(title="Collapse thumbnails") Thumbnail
|
||||||
span.collapser(title="Collapse name column") Name
|
.table-cell.shot-name
|
||||||
| {% for task_type in task_types %}
|
span.collapser(title="Collapse name column") Name
|
||||||
.table-cell.task-type(class="{{ task_type }}")
|
| {% for task_type in task_types %}
|
||||||
span.collapser(title="Collapse {{ task_type or 'Other' }} column") {{ task_type or 'other' }}
|
.table-cell.task-type(class="{{ task_type }}")
|
||||||
| {% endfor %}
|
span.collapser(title="Collapse {{ task_type or 'Other' }} column") {{ task_type or 'other' }}
|
||||||
|
| {% endfor %}
|
||||||
.table-body.has-thumbnails
|
|
||||||
| {% for shot in shots %}
|
.table-body.has-thumbnails
|
||||||
.table-row(
|
| {% for shot in shots %}
|
||||||
id="shot-{{ shot._id }}",
|
.table-row(
|
||||||
class="status-{{ shot.properties.status }} {{ shot.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
|
id="shot-{{ shot._id }}",
|
||||||
.table-cell.shot-status
|
class="status-{{ shot.properties.status }} {{ shot.properties.used_in_edit | yesno(' ,not-in-edit, ') }}")
|
||||||
.table-cell.shot-thumbnail
|
.table-cell.shot-status
|
||||||
a(
|
.table-cell.shot-thumbnail
|
||||||
data-shot-id="{{ shot._id }}",
|
a(
|
||||||
href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
|
data-shot-id="{{ shot._id }}",
|
||||||
class="status-{{ shot.properties.status }} shot-link")
|
href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
|
||||||
img(src="{{ shot._thumbnail }}",
|
class="status-{{ shot.properties.status }} shot-link")
|
||||||
alt="Thumbnail",
|
img(src="{{ shot._thumbnail }}",
|
||||||
style='width: 110px; height: {{ shot._thumbnail_height }}')
|
alt="Thumbnail",
|
||||||
.table-cell.shot-name
|
style='width: 110px; height: {{ shot._thumbnail_height }}')
|
||||||
a(
|
.table-cell.shot-name
|
||||||
data-shot-id="{{ shot._id }}",
|
a(
|
||||||
href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
|
data-shot-id="{{ shot._id }}",
|
||||||
class="status-{{ shot.properties.status }} shot-link")
|
href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
|
||||||
span(class="shot-name-{{ shot._id }}") {{ shot.name }}
|
class="status-{{ shot.properties.status }} shot-link")
|
||||||
| {% for task_type in task_types %}
|
span(class="shot-name-{{ shot._id }}") {{ shot.name }}
|
||||||
.table-cell.task-type(class="{{ task_type }}")
|
| {% for task_type in task_types %}
|
||||||
| {% for task in tasks_for_shots[shot._id][task_type] %}
|
.table-cell.task-type(class="{{ task_type }}")
|
||||||
a(
|
| {% for task in tasks_for_shots[shot._id][task_type] %}
|
||||||
data-task-id="{{ task._id }}",
|
a(
|
||||||
id="task-{{ task._id }}",
|
data-task-id="{{ task._id }}",
|
||||||
href="{{ url_for('attract.shots.perproject.with_task', project_url=project.url, task_id=task._id) }}",
|
id="task-{{ task._id }}",
|
||||||
class="status-{{ task.properties.status }} task-link",
|
href="{{ url_for('attract.shots.perproject.with_task', project_url=project.url, task_id=task._id) }}",
|
||||||
title="{{ task.properties.status | undertitle }} task: {{ task.name }}")
|
class="status-{{ task.properties.status }} task-link",
|
||||||
| {# First letter of the status. Disabled until we provide the user setting to turn it off
|
title="{{ task.properties.status | undertitle }} task: {{ task.name }}")
|
||||||
span {{ task.properties.status[0] }}
|
| {# First letter of the status. Disabled until we provide the user setting to turn it off
|
||||||
| #}
|
span {{ task.properties.status[0] }}
|
||||||
|
| #}
|
||||||
|
| {% endfor %}
|
||||||
|
//- Dirty hack, assume a user can create a task for a shot if they can edit the shot.
|
||||||
|
| {% if 'PUT' in shot.allowed_methods %}
|
||||||
|
a.task-add(
|
||||||
|
title="Add a new '{{ task_type }}' task",
|
||||||
|
class="task-add-link {% if tasks_for_shots[shot._id][task_type] %}hidden{% endif %}"
|
||||||
|
href="javascript:task_create('{{ shot._id }}', '{{ task_type }}');")
|
||||||
|
i.pi-plus
|
||||||
|
| Task
|
||||||
|
| {% endif %}
|
||||||
| {% endfor %}
|
| {% endfor %}
|
||||||
//- Dirty hack, assume a user can create a task for a shot if they can edit the shot.
|
|
||||||
| {% if 'PUT' in shot.allowed_methods %}
|
|
||||||
a.task-add(
|
|
||||||
title="Add a new '{{ task_type }}' task",
|
|
||||||
class="task-add-link {% if tasks_for_shots[shot._id][task_type] %}hidden{% endif %}"
|
|
||||||
href="javascript:task_create('{{ shot._id }}', '{{ task_type }}');")
|
|
||||||
i.pi-plus
|
|
||||||
| Task
|
|
||||||
| {% endif %}
|
|
||||||
| {% endfor %}
|
| {% endfor %}
|
||||||
| {% endfor %}
|
|
||||||
|
|
||||||
.col-splitter
|
.col-splitter
|
||||||
|
|
||||||
@@ -134,4 +135,10 @@ script.
|
|||||||
resizeHeight: false
|
resizeHeight: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(window).on('load resize', function(){
|
||||||
|
var window_height = $(window).height() - 50; // header is 50px
|
||||||
|
$('#shot-list').css({'height': window_height});
|
||||||
|
$('#item-details').css({'height': window_height});
|
||||||
|
});
|
||||||
|
|
||||||
| {% endblock footer_scripts %}
|
| {% endblock footer_scripts %}
|
||||||
|
|||||||
@@ -45,9 +45,18 @@ script.
|
|||||||
|
|
||||||
script(src="{{ url_for('static_attract', filename='assets/js/vendor/clipboard.min.js')}}")
|
script(src="{{ url_for('static_attract', filename='assets/js/vendor/clipboard.min.js')}}")
|
||||||
script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
|
script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
|
||||||
|
|
||||||
script.
|
script.
|
||||||
$("#col_main").resizable({
|
$("#col_main").resizable({
|
||||||
handleSelector: ".col-splitter",
|
handleSelector: ".col-splitter",
|
||||||
resizeHeight: false
|
resizeHeight: false
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$(window).on('load resize', function(){
|
||||||
|
var window_height = $(window).height() - 50;
|
||||||
|
var task_list = document.getElementById('task-list');
|
||||||
|
$('#task-list').css({'height': window_height});
|
||||||
|
$('#item-details').css({'height': window_height});
|
||||||
|
});
|
||||||
|
|
||||||
| {% endblock %}
|
| {% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user