diff --git a/app/static/app/js/components/ProjectListItem.jsx b/app/static/app/js/components/ProjectListItem.jsx index 2c478f6b..c4c4e244 100644 --- a/app/static/app/js/components/ProjectListItem.jsx +++ b/app/static/app/js/components/ProjectListItem.jsx @@ -199,7 +199,8 @@ class ProjectListItem extends React.Component { render() { return (
  • + href="javascript:void(0);" + ref={this.setRef("dropzone")}>
    +
    -
    -
    -
    -
    - {this.state.upload.showEditTask ? : ""} {this.state.upload.error !== "" ? diff --git a/app/static/app/js/css/ProjectListItem.scss b/app/static/app/js/css/ProjectListItem.scss index 848abf56..27eb4eff 100644 --- a/app/static/app/js/css/ProjectListItem.scss +++ b/app/static/app/js/css/ProjectListItem.scss @@ -5,6 +5,39 @@ font-weight: bold; } + .drag-drop-icon{ + display: none; + position: absolute; + border-radius: 100%; + padding: 16px; + left: 48%; + top: 0; + font-size: 300%; + -webkit-animation: pulsate 0.5s ease-out; + -webkit-animation-iteration-count: infinite; + animation: pulsate 0.5s ease-out; + animation-iteration-count: infinite; + opacity: 0.5; + } + + @-webkit-keyframes pulsate { + 0% {opacity: 0.5;} + 50% {opacity: 1.0;} + 100% {opacity: 0.5;} + } + @keyframes pulsate { + 0% {opacity: 0.5;} + 50% {opacity: 1.0;} + 100% {opacity: 0.5;} + } + + &.dz-drag-hover{ + .drag-drop-icon{ + display: block; + } + background-color: #f7f7f7; + } + .project-links{ font-size: 90%; i{ diff --git a/app/templates/app/dashboard.html b/app/templates/app/dashboard.html index c871b99e..ed125561 100644 --- a/app/templates/app/dashboard.html +++ b/app/templates/app/dashboard.html @@ -25,7 +25,7 @@ {% if no_tasks %} {% trans 'Upload Images' as upload_images %}

    - {% blocktrans %} To create a map, press the "{{ upload_images }}" button. {% endblocktrans %} + {% blocktrans %} To create a map, press the "{{ upload_images }}" button, or drag and drop some images into a project. {% endblocktrans %}