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