diff options
| -rw-r--r-- | www/css/fms.css | 73 | ||||
| -rw-r--r-- | www/templates/en/existing.html | 41 |
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" /> |