added watermark to drag area

rowers/templates/document_form.html

@@ -15,7 +15,10 @@
 </script>
 {% endblock %}
 
-    {% block content %}
+{% block content %}
+<div id="id_dropregion" class="grid_12 alpha watermark invisible">
+  <p>Drag and drop files here </p>
+  </div>
     <div id="id_drop-files" class="grid_12 alpha drop-files">
     <form id="file_form" enctype="multipart/form-data" action="{{ formloc }}" method="post">
 <div id="left" class="grid_6 alpha">
@@ -25,7 +28,7 @@
       Upload?</a></p>
   {% endif %}
     {% if form.errors %}
-        <p style="color: red;">
+       <p style="color: red;">
             Please correct the error{{ form.errors|pluralize }} below.
         </p>
     {% endif %}
@@ -79,6 +82,10 @@
   formdatasetok = false;
   }
 
+      if (!formdatasetok) {
+      $("#id_dropregion").remove();
+      }
+      
   if (formdatasetok) {
       
   $(document).ready(function() {
@@ -99,7 +106,14 @@
   console.log("Loading dropper");
   jQuery.event.props.push('dataTransfer');
 
-  
+      $(window).on('dragenter', function() {
+      $("#id_drop-files").css("background-color","#E9E9E4");
+      $("#id_dropregion").addClass("watermark").removeClass("invisible");})
+      
+      $(window).on('dragleave', function() {
+      $("#id_drop-files").css("background-color","#FFFFFF");
+      $("#id_dropregion").removeClass("watermark").addClass("invisible");})
+      
   var frm = $("#file_form");
 
   if( window.FormData === undefined ) {

static/css/rowsandall.css

@@ -26,6 +26,24 @@
     background-image: url("/static/img/landing8b.jpg");
 }
 
+.watermark {
+    position: absolute;
+    float: center;
+    opacity: 0.25;
+    font-size: 3em;
+    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-25%) translateY(-50%);
+    text-align: center;
+    vertical-align: middle;
+    z-index: 1000;
+}
+
+.invisible {
+    display: none
+}
+
 html { 
   font-size: 62.5%;
 }