diff options
| -rw-r--r-- | src/css/fms.css | 26 | ||||
| -rw-r--r-- | src/js/views/photo.js | 6 | ||||
| -rw-r--r-- | src/templates/en/photo.html | 4 | ||||
| -rw-r--r-- | templates/photo.html | 4 |
4 files changed, 34 insertions, 6 deletions
diff --git a/src/css/fms.css b/src/css/fms.css index bc4820c..9cfc515 100644 --- a/src/css/fms.css +++ b/src/css/fms.css @@ -399,6 +399,11 @@ pointer-events: all; } + #offline div.photo { + margin: 0.1em 0em; + text-align: center; + } + /* home screen */ #front-page div[data-role='content'] { @@ -738,7 +743,12 @@ /* photo screen */ div.photo { - margin: 0.1em 0em; + position: relative; + display: inline-block; + } + + div.photo-wrapper { + margin: auto; text-align: center; } @@ -753,6 +763,20 @@ width: 270px; } + #id_del_photo_button.photo-corner-button { + position: absolute; + bottom: -15px; + right: 0px; + -webkit-border-radius: 50%; + border-radius: 50%; + background-color: rgb(186,21,28); + padding: 12px; + color: #fff; + text-shadow: none; + font-weight: bold; + font-size: 30px; + } + @media only screen and (max-width: 800px) and (min-width: 600px) { img.placeholder { height: 398px; diff --git a/src/js/views/photo.js b/src/js/views/photo.js index 2d03e1c..9d94b9a 100644 --- a/src/js/views/photo.js +++ b/src/js/views/photo.js @@ -23,7 +23,7 @@ $('#id_photo_button').parents('.ui-btn').hide(); $('#id_existing').parents('.ui-btn').hide(); } else { - this.$('#id_del_photo_button').parents('.ui-btn').hide(); + this.$('#id_del_photo_button').hide(); } }, @@ -66,10 +66,10 @@ FMS.saveCurrentDraft(); $('#photo-next-btn .ui-btn-text').text('Next'); - $('#id_del_photo_button').parents('.ui-btn').show(); $('#id_photo_button').parents('.ui-btn').hide(); $('#id_existing').parents('.ui-btn').hide(); $('#photo').show(); + window.setTimeout(function() { $('#id_del_photo_button').show() }, 500); window.setTimeout(function() { $.mobile.loading('hide') }, 100); }); @@ -92,12 +92,12 @@ var del = FMS.files.deleteURI( this.model.get('file') ); del.done( function() { + $('#id_del_photo_button').hide(); that.model.set('file', ''); FMS.saveCurrentDraft(true); $('#photo').attr('src', 'images/placeholder-photo.png').addClass('placeholder').removeClass('small'); $('#photo-next-btn .ui-btn-text').text('Skip'); - $('#id_del_photo_button').parents('.ui-btn').hide(); $('#id_photo_button').parents('.ui-btn').show(); $('#id_existing').parents('.ui-btn').show(); }); diff --git a/src/templates/en/photo.html b/src/templates/en/photo.html index b61a5af..460f38f 100644 --- a/src/templates/en/photo.html +++ b/src/templates/en/photo.html @@ -8,16 +8,18 @@ </div> <div data-role="content"> <h2>Add a Photo <em>(optional)</em></h2> + <div class="photo-wrapper"> <div class="photo"> <% if ( file == '' ) { %> <img class="placeholder" src="images/placeholder-photo.png" alt="" id="photo"> <% } else { %> <img class="small" id="photo" src="<%= file %>" /> <% } %> + <a data-role="none" id="id_del_photo_button" class="photo-corner-button">X</a> + </div> </div> <div class="bottom-btn"> <input data-icon="fms-photo-existing" type="button" id="id_existing" data-theme="c" value="Add an existing photo" > <input data-icon="fms-photo-new" id="id_photo_button" type="button" data-theme="a" value="Take a new photo"> - <input id="id_del_photo_button" type="button" data-theme="a" value="Remove Photo"> </div> </div> diff --git a/templates/photo.html b/templates/photo.html index 2b49202..0f3036d 100644 --- a/templates/photo.html +++ b/templates/photo.html @@ -8,16 +8,18 @@ </div> <div data-role="content"> <h2>[% loc('Add a Photo') %] <em>[% loc('(optional)') %]</em></h2> + <div class="photo-wrapper"> <div class="photo"> <% if ( file == '' ) { %> <img class="placeholder" src="images/placeholder-photo.png" alt="" id="photo"> <% } else { %> <img class="small" id="photo" src="<%= file %>" /> <% } %> + <a data-role="none" id="id_del_photo_button" class="photo-corner-button">X</a> + </div> </div> <div class="bottom-btn"> <input data-icon="fms-photo-existing" type="button" id="id_existing" data-theme="c" value="[% loc('Add an existing photo') %]" > <input data-icon="fms-photo-new" id="id_photo_button" type="button" data-theme="a" value="[% loc('Take a new photo') %]"> - <input id="id_del_photo_button" type="button" data-theme="a" value="[% loc('Remove Photo') %]"> </div> </div> |