2 files changed, 33 insertions, 22 deletions
diff --git a/src/js/views/reports.js b/src/js/views/reports.js
index 026ffbe..f68944d 100644
--- a/src/js/views/reports.js
+++ b/src/js/views/reports.js
@@ -31,6 +31,14 @@
                 content.css( 'min-height', content + 'px');
             },
 
+            beforeDisplay: function() {
+                if ( FMS.allDrafts.length === 0 ) {
+                    $('#noreports').show();
+                } else {
+                    $('#report-list').show();
+                }
+            },
+
             useReport: function(e) {
                 e.preventDefault();
                 var el = $(e.target);
@@ -41,6 +49,10 @@
 
             onRemoveDraft: function(el) {
                 el.parents('li').remove();
+                if ( FMS.allDrafts.length === 0 ) {
+                    $('#report-list').hide();
+                    $('#noreports').show();
+                }
             },
 
             render: function(){
diff --git a/src/templates/en/reports.html b/src/templates/en/reports.html
index f1b9dc2..8712f0f 100644
--- a/src/templates/en/reports.html
+++ b/src/templates/en/reports.html
@@ -1,28 +1,27 @@
 <div data-role="header" data-position="fixed">
         <a id="reports-next-btn" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Home</a>
-        <h1>My Reports</h1>
+        <h1>Draft Reports</h1>
 </div>
 <div id="drafts">
-    <h2>Draft reports</h2>
-
-    <ul data-role="listview" data-split-theme="c" data-inset="true" data-split-icon="delete" class="reports">
-        <% drafts.each(function(draft) {
-            if ( draft ) {
-                var classes = [];
-                if ( draft.get('lat') ) {
-                    classes.push('with_location');
+    <p id="noreports" class="nodisplay">If you start compiling a report, but don't finish and send it, it'll appear in this menu so you can finish it later</p>
+    <div id="report-list" class="nodisplay">
+        <ul data-role="listview" data-split-theme="c" data-inset="true" data-split-icon="delete" class="notopmargin reports">
+            <% drafts.each(function(draft) {
+                if ( draft ) {
+                    var classes = [];
+                    if ( draft.get('lat') ) {
+                        classes.push('with_location');
+                    }
+                    if ( draft.get('file') ) {
+                        classes.push('with_photo');
+                    }
+                    var draftClass = '';
+                    if ( classes.length ) {
+                        draftClass = 'class="' + classes.join(' ') + '"';
+                    }
+                    print( '<li id="' + draft.id + '"' + draftClass + '><a href="#" class="use_report">' + draft.description() + '</a><a class="del_report" href="#" title="delete">Delete</a></li>' );
                 }
-                if ( draft.get('file') ) {
-                    classes.push('with_photo');
-                }
-                var draftClass = '';
-                if ( classes.length ) {
-                    draftClass = 'class="' + classes.join(' ') + '"';
-                }
-                print( '<li id="' + draft.id + '"' + draftClass + '><a href="#" class="use_report">' + draft.description() + '</a><a class="del_report" href="#" title="delete">Delete</a></li>' );
-            } else {
-                print( '<li>no/li<>');
-            }
-        } ); %>
-    </ul>
+                } ); %>
+        </ul>
+    </div>
 </div>