improve layout of existing report page

2 files changed, 95 insertions, 19 deletions

diff --git a/www/css/fms.css b/www/css/fms.css
index c06a2ab..4bb9262 100644
--- a/www/css/fms.css
+++ b/www/css/fms.css
@@ -1,6 +1,9 @@
     *{
         box-sizing:border-box;
     }
+    div[data-role="content"] {
+        background-color: white;
+    }
     label{
         display:none;
     }
@@ -127,6 +130,76 @@
         margin-top: 0em;
     }
 
+    #existing h3 {
+        margin-top: 0em;
+    }
+
+    #existing_report h3 {
+        margin-bottom: 5px;
+    }
+
+    #existing_report div.meta {
+        font-weight: italic;
+        font-size: 0.8em;
+        margin-bottom: 0.5em;
+    }
+
+    #existing_report div.photo {
+        text-align: right;
+        float: right;
+        margin: 0em 0em 0.5em 0em;
+    }
+
+    #existing_report div.photo img.small {
+        width: 200px;
+    }
+
+    /* taken from http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/ */
+    #existing_report div.details {
+        max-height: 200px;
+        overflow: hidden;
+        line-height: 20px;
+    }
+
+    #existing_report div.details:before {
+        content:"";
+        float: left;
+        width: 5px; height: 200px;
+    }
+
+    #existing_report div.details > *:first-child {
+        float: right;
+        width: 100%;
+        margin-left: -5px;
+    }
+
+    #existing_report div.details:after {
+        content: "\02026";
+
+        box-sizing: content-box;
+        -webkit-box-sizing: content-box;
+        -moz-box-sizing: content-box;
+
+        float: right; position: relative;
+        top: -20px; left: 100%;
+        width: 3em; margin-left: -3em;
+        padding-right: 5px;
+
+        text-align: right;
+
+        background: -webkit-gradient(linear, left top, right top,
+            from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
+        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+        background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+        background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
+    }
+
+    #existing div.right {
+        clear: both;
+        margin-top: 0.5em;
+    }
+
     .frontpage-menu{
         padding: 0px;
     }
diff --git a/www/templates/en/existing.html b/www/templates/en/existing.html
index 03e6539..bb5b326 100644
--- a/www/templates/en/existing.html
+++ b/www/templates/en/existing.html
@@ -1,30 +1,33 @@
 <div data-role="header">
-        <h1>Draft Report</h1>
+        <h1>In progress</h1>
 </div>
 <div data-role="content" role="main">
-    <h2>You have an unsubmitted report</h2>
-
-    <ul id="existing">
-    <% if (lat) { %>
-        <li>This report has a location</li>
-    <% } %>
-
+    <div id="existing_report">
     <% if ( title ) { %>
-        <li>title: <%= title %></li>
+        <h3><%= title %></h3>
     <% } %>
 
-    <% if ( details ) { %>
-        <li>details: <%= details %></li>
-    <% } %>
+        <div class="meta">
+        <% if (lat) { %>
+            <span>Saved with a location</span>
+        <% } %>
 
-    <% if ( category && category != '-- Pick a category --' ) { %>
-        <li>category: <%= category %></li>
-    <% } %>
-    </ul>
+        <% if ( category && category != '-- Pick a category --' ) { %>
+            <span> in the <%= category %> category</span>
+        <% } %>
+
+        <span> <% print( moment( created ).fromNow() ) %></span>
+        </div>
+
+        <% if ( file ) { %>
+            <div class="photo"><img class="small" src="<%= file %>"></div>
+        <% } %>
+
+        <% if ( details ) { %>
+        <div class="details"><div><%= details %></div></div>
+        <% } %>
+    </div>
 
-    <% if ( file ) { %>
-        <div class="photo"><img class="small" src="<%= file %>"></div>
-    <% } %>
 
     <div class="right">
     <input id="use_report" type="button" value="use" data-role="button" data-theme="a" />