diff --git a/src/styles/_base.sass b/src/styles/_base.sass
index 7435047..114b299 100644
--- a/src/styles/_base.sass
+++ b/src/styles/_base.sass
@@ -83,13 +83,30 @@ nav.sidebar
.input-transparent-group
width: 100%
+ display: flex
+ align-items: center
+
+ label
+ padding-right: 10px
+ font-weight: normal
+ color: $color-text-dark-primary
+
+ &.select_multiple
+ margin-top: 5px
+ margin-bottom: 10px
+
+select.input-transparent
+ background-color: $color-background
+
+ option
+ background-color: white
.input-transparent
border: thin solid transparent
border-radius: 3px
padding: 5px
- margin-top: 5px
- margin-bottom: 5px
+ margin-top: 10px
+ margin-bottom: 10px
width: 100%
&:hover
diff --git a/src/styles/plugins/js_select2.sass b/src/styles/plugins/js_select2.sass
new file mode 100644
index 0000000..0580b4a
--- /dev/null
+++ b/src/styles/plugins/js_select2.sass
@@ -0,0 +1,420 @@
+@import ../config
+.select2-container
+ box-sizing: border-box
+ display: inline-block
+ margin: 0
+ position: relative
+ vertical-align: middle
+ .select2-selection--single
+ box-sizing: border-box
+ cursor: pointer
+ display: block
+ height: 28px
+ user-select: none
+ -webkit-user-select: none
+ .select2-selection__rendered
+ display: block
+ padding-left: 8px
+ padding-right: 20px
+ overflow: hidden
+ text-overflow: ellipsis
+ white-space: nowrap
+ .select2-selection__clear
+ position: relative
+ .select2-selection--multiple
+ box-sizing: border-box
+ cursor: pointer
+ display: block
+ min-height: 32px
+ user-select: none
+ -webkit-user-select: none
+ .select2-selection__rendered
+ display: inline-block
+ overflow: hidden
+ padding-left: 8px
+ text-overflow: ellipsis
+ white-space: nowrap
+ .select2-search--inline
+ float: left
+ .select2-search__field
+ box-sizing: border-box
+ border: none
+ font-size: 100%
+ margin-top: 5px
+ padding: 0
+ &::-webkit-search-cancel-button
+ -webkit-appearance: none
+
+.select2-dropdown
+ background-color: white
+ border: 1px solid $color-text-dark-hint
+ border-radius: 3px
+ box-shadow: 0 3px 15px rgba(black, .2)
+ box-sizing: border-box
+ display: block
+ position: absolute
+ left: -100000px
+ width: 100%
+ z-index: 1051
+
+.select2-results
+ display: block
+
+.select2-results__options
+ list-style: none
+ margin: 0
+ padding: 0
+
+.select2-results__option
+ padding: 6px
+ user-select: none
+ -webkit-user-select: none
+ &[aria-selected]
+ cursor: pointer
+
+.select2-container--open
+ .select2-dropdown
+ left: 0
+ .select2-dropdown--above
+ border-bottom: none
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
+ .select2-dropdown--below
+ border-top: none
+ border-top-left-radius: 0
+ border-top-right-radius: 0
+
+.select2-search--dropdown
+ display: block
+ padding: 4px
+ .select2-search__field
+ padding: 4px
+ width: 100%
+ box-sizing: border-box
+ &::-webkit-search-cancel-button
+ -webkit-appearance: none
+ &.select2-search--hide
+ display: none
+
+.select2-close-mask
+ border: 0
+ margin: 0
+ padding: 0
+ display: block
+ position: fixed
+ left: 0
+ top: 0
+ min-height: 100%
+ min-width: 100%
+ height: auto
+ width: auto
+ opacity: 0
+ z-index: 99
+ background-color: #fff
+ filter: alpha(opacity = 0)
+
+.select2-hidden-accessible
+ border: 0 !important
+ clip: rect(0 0 0 0) !important
+ height: 1px !important
+ margin: -1px !important
+ overflow: hidden !important
+ padding: 0 !important
+ position: absolute !important
+ width: 1px !important
+
+.select2-container--default
+ .select2-selection--single
+ background-color: #fff
+ border: 1px solid #aaa
+ border-radius: 4px
+ .select2-selection__rendered
+ color: #444
+ line-height: 28px
+ .select2-selection__clear
+ cursor: pointer
+ float: right
+ font-weight: bold
+ .select2-selection__placeholder
+ color: #999
+ .select2-selection__arrow
+ height: 26px
+ position: absolute
+ top: 1px
+ right: 1px
+ width: 20px
+ b
+ border-color: #888 transparent transparent transparent
+ border-style: solid
+ border-width: 5px 4px 0 4px
+ height: 0
+ left: 50%
+ margin-left: -4px
+ margin-top: -2px
+ position: absolute
+ top: 50%
+ width: 0
+ &.select2-container--disabled .select2-selection--single
+ background-color: #eee
+ cursor: default
+ .select2-selection__clear
+ display: none
+ &.select2-container--open .select2-selection--single .select2-selection__arrow b
+ border-color: transparent transparent #888 transparent
+ border-width: 0 4px 5px 4px
+ .select2-selection--multiple
+ background-color: white
+ border: 1px solid transparent
+ border-radius: 4px
+ cursor: text
+
+ &:hover
+ border-color: $color-text-dark-hint
+ .select2-selection__rendered
+ box-sizing: border-box
+ list-style: none
+ margin: 0
+ padding: 0 5px
+ width: 100%
+ .select2-selection__placeholder
+ color: #999
+ margin-top: 5px
+ float: left
+ .select2-selection__clear
+ cursor: pointer
+ float: right
+ font-weight: bold
+ margin-top: 5px
+ margin-right: 10px
+
+ /* Selections in the list */
+ .select2-selection__choice
+ background-color: $color-background
+ border: 1px solid $color-background-dark
+ border-radius: 3px
+ cursor: default
+ float: left
+ margin-right: 5px
+ margin-top: 5px
+ padding: 3px 10px
+ color: $color-text-dark
+ .select2-selection__choice__remove
+ color: $color-text-dark-hint
+ cursor: pointer
+ display: inline-block
+ font-weight: bold
+ margin-right: 8px
+ &:hover
+ color: $color-danger
+ &.select2-container--focus .select2-selection--multiple
+ border: solid $color-text-dark-hint 1px
+ outline: 0
+ &.select2-container--disabled
+ .select2-selection--multiple
+ background-color: #eee
+ cursor: default
+ .select2-selection__choice__remove
+ display: none
+ &.select2-container--open
+ &.select2-container--above
+ .select2-selection--single, .select2-selection--multiple
+ border-top-left-radius: 0
+ border-top-right-radius: 0
+ &.select2-container--below
+ .select2-selection--single, .select2-selection--multiple
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
+ .select2-search--dropdown .select2-search__field
+ border: 1px solid #aaa
+ .select2-search--inline .select2-search__field
+ background: transparent
+ border: none
+ outline: 0
+ box-shadow: none
+ -webkit-appearance: textfield
+ .select2-results > .select2-results__options
+ max-height: 200px
+ overflow-y: auto
+ .select2-results__option
+ &[role=group]
+ padding: 0
+ &[aria-disabled=true]
+ color: $color-text-dark-hint
+ &[aria-selected=true]
+ background-color: $color-background
+ .select2-results__option
+ padding-left: 1em
+ .select2-results__group
+ padding-left: 0
+ .select2-results__option
+ margin-left: -1em
+ padding-left: 2em
+ .select2-results__option
+ margin-left: -2em
+ padding-left: 3em
+ .select2-results__option
+ margin-left: -3em
+ padding-left: 4em
+ .select2-results__option
+ margin-left: -4em
+ padding-left: 5em
+ .select2-results__option
+ margin-left: -5em
+ padding-left: 6em
+ .select2-results__option--highlighted[aria-selected]
+ background-color: $color-primary
+ color: white
+ .select2-results__group
+ cursor: default
+ display: block
+ padding: 6px
+
+.select2-container--classic
+ .select2-selection--single
+ background-color: #f7f7f7
+ border: 1px solid #aaa
+ border-radius: 4px
+ outline: 0
+ background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%)
+ background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%)
+ background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%)
+ background-repeat: repeat-x
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
+ &:focus
+ border: 1px solid #5897fb
+ .select2-selection__rendered
+ color: #444
+ line-height: 28px
+ .select2-selection__clear
+ cursor: pointer
+ float: right
+ font-weight: bold
+ margin-right: 10px
+ .select2-selection__placeholder
+ color: #999
+ .select2-selection__arrow
+ background-color: #ddd
+ border: none
+ border-left: 1px solid #aaa
+ border-top-right-radius: 4px
+ border-bottom-right-radius: 4px
+ height: 26px
+ position: absolute
+ top: 1px
+ right: 1px
+ width: 20px
+ background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
+ background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%)
+ background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%)
+ background-repeat: repeat-x
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)
+ b
+ border-color: #888 transparent transparent transparent
+ border-style: solid
+ border-width: 5px 4px 0 4px
+ height: 0
+ left: 50%
+ margin-left: -4px
+ margin-top: -2px
+ position: absolute
+ top: 50%
+ width: 0
+ &.select2-container--open
+ .select2-selection--single
+ border: 1px solid #5897fb
+ .select2-selection__arrow
+ background: transparent
+ border: none
+ b
+ border-color: transparent transparent #888 transparent
+ border-width: 0 4px 5px 4px
+ &.select2-container--above .select2-selection--single
+ border-top: none
+ border-top-left-radius: 0
+ border-top-right-radius: 0
+ background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%)
+ background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%)
+ background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%)
+ background-repeat: repeat-x
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)
+ &.select2-container--below .select2-selection--single
+ border-bottom: none
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
+ background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%)
+ background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%)
+ background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%)
+ background-repeat: repeat-x
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)
+ .select2-selection--multiple
+ background-color: white
+ border: 1px solid #aaa
+ border-radius: 4px
+ cursor: text
+ outline: 0
+ &:focus
+ border: 1px solid #5897fb
+ .select2-selection__rendered
+ list-style: none
+ margin: 0
+ padding: 0 5px
+ .select2-selection__clear
+ display: none
+ .select2-selection__choice
+ background-color: #e4e4e4
+ border: 1px solid #aaa
+ border-radius: 4px
+ cursor: default
+ float: left
+ margin-right: 5px
+ margin-top: 5px
+ padding: 0 5px
+ .select2-selection__choice__remove
+ color: #888
+ cursor: pointer
+ display: inline-block
+ font-weight: bold
+ margin-right: 2px
+ &:hover
+ color: #555
+ &.select2-container--open
+ .select2-selection--multiple
+ border: 1px solid #5897fb
+ &.select2-container--above .select2-selection--multiple
+ border-top: none
+ border-top-left-radius: 0
+ border-top-right-radius: 0
+ &.select2-container--below .select2-selection--multiple
+ border-bottom: none
+ border-bottom-left-radius: 0
+ border-bottom-right-radius: 0
+ .select2-search--dropdown .select2-search__field
+ border: 1px solid #aaa
+ outline: 0
+ .select2-search--inline .select2-search__field
+ outline: 0
+ box-shadow: none
+ .select2-dropdown
+ background-color: white
+ border: 1px solid transparent
+ .select2-dropdown--above
+ border-bottom: none
+ .select2-dropdown--below
+ border-top: none
+ .select2-results > .select2-results__options
+ max-height: 200px
+ overflow-y: auto
+ .select2-results__option
+ &[role=group]
+ padding: 0
+ &[aria-disabled=true]
+ color: grey
+ .select2-results__option--highlighted[aria-selected]
+ background-color: #3875d7
+ color: white
+ .select2-results__group
+ cursor: default
+ display: block
+ padding: 6px
+ &.select2-container--open .select2-dropdown
+ border-color: #5897fb
diff --git a/src/styles/tasks.sass b/src/styles/tasks.sass
index b62d4a4..c7a9833 100644
--- a/src/styles/tasks.sass
+++ b/src/styles/tasks.sass
@@ -71,7 +71,7 @@
#task-details
margin: 10px
- padding: 10px
+ padding: 0 10px 10px
+container-box
#task-view
@@ -90,4 +90,4 @@ option.invalid_task
color: $color-text-dark
a.task-project
color: $color-text-dark-secondary
- margin-left: 5px
+ margin-left: 10px
diff --git a/src/templates/attract/tasks/for_project.jade b/src/templates/attract/tasks/for_project.jade
index 2ec54d2..200dd1a 100644
--- a/src/templates/attract/tasks/for_project.jade
+++ b/src/templates/attract/tasks/for_project.jade
@@ -4,6 +4,8 @@
| {% block style %}
link(href="{{ url_for('static_attract', filename='assets/css/tasks.css') }}", rel="stylesheet")
+link(href="{{ url_for('static_attract', filename='assets/css/plugins/js_select2.css') }}", rel="stylesheet")
+script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.select2.min.js') }}")
| {% endblock %}
| {% block body %}
@@ -30,7 +32,8 @@ link(href="{{ url_for('static_attract', filename='assets/css/tasks.css') }}", re
| Task Details
#status-bar
#task-details
- | Tasks
+ | {{ tasks | count }} tasks so far.
+ a(href="javascript:task_create();") Create a new one!
| {% endblock %}
| {% block footer_scripts %}
diff --git a/src/templates/attract/tasks/view_task_embed.jade b/src/templates/attract/tasks/view_task_embed.jade
index ed2050f..726c6c6 100644
--- a/src/templates/attract/tasks/view_task_embed.jade
+++ b/src/templates/attract/tasks/view_task_embed.jade
@@ -6,40 +6,49 @@ script(src="{{ url_for('static_attract', filename='js/tasks.js') }}",async=true)
name="name",
type=text,
placeholder='Name',
- aria-describedby="task-addon-name",
value="{{ task.name|hide_none }}")
.input-transparent-group
textarea.input-transparent(
name="description",
type=text,
- placeholder='Description',
- aria-describedby="task-addon-description") {{ task.description|hide_none }}
+ placeholder='Description') {{ task.description | hide_none }}
- .input-transparent-group
- select.input-transparent(name="task_type",aria-describedby="task-addon-task_type")
- | {% for task_type in attract_props.task_types.attract_shot %}
- |
- | {% endfor %}
- | {% if task.properties.task_type not in attract_props.task_types.attract_shot %}
- option(value="{{ task.properties.task_type }}",selected).invalid_task {{ task.properties.task_type|undertitle }}
- | {% endif %}
+ .row
+ .col-md-6
+ .input-transparent-group
+ label#task-task_type Type:
+ select.input-transparent(name="task_type",aria-describedby="task-task_type")
+ | {% for task_type in attract_props.task_types.attract_shot %}
+ |
+ | {% endfor %}
+ | {% if task.properties.task_type not in attract_props.task_types.attract_shot %}
+ option(value="{{ task.properties.task_type }}",selected).invalid_task {{ task.properties.task_type | undertitle }}
+ | {% endif %}
- .input-transparent-group
- select.input-transparent(
- name="status",
- aria-describedby="task-addon-status")
- | {% for status in task_node_type.dyn_schema.status.allowed %}
- |
- | {% endfor %}
+ .col-md-6
+ .input-transparent-group
+ label#task-status Status:
+ select.input-transparent(
+ name="status",
+ aria-describedby="task-status")
+ | {% for status in task_node_type.dyn_schema.status.allowed %}
+ |
+ | {% endfor %}
- .input-transparent-group
+ .input-transparent-group.select_multiple
+ label Assignees:
select.input-transparent(
name="users",
multiple,
+ placeholder="Assigned to"
aria-describedby="task-addon-users")
| {% for u in project.users %}
- |
+ |
| {% endfor %}
+
.input-transparent-group
button.btn.btn-default(type=submit) Save task
+
+script.
+ $("select[name='users']").select2();