diff options
-rw-r--r-- | templates/web/fixmystreet/report/new/fill_in_details_form.html | 69 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/base.scss | 106 | ||||
-rw-r--r-- | web/cobrands/fixmystreet/layout.scss | 41 | ||||
-rw-r--r-- | web/js/fixmystreet.js | 18 | ||||
-rw-r--r-- | web/js/map-OpenLayers.js | 6 |
5 files changed, 165 insertions, 75 deletions
diff --git a/templates/web/fixmystreet/report/new/fill_in_details_form.html b/templates/web/fixmystreet/report/new/fill_in_details_form.html index 1ac67797c..a48e26893 100644 --- a/templates/web/fixmystreet/report/new/fill_in_details_form.html +++ b/templates/web/fixmystreet/report/new/fill_in_details_form.html @@ -56,20 +56,20 @@ [% END %] - <label for="form_title">[% loc('Subject:') %]</label> - <input type="text" value="[% report.title | html %]" name="title" id="form_title" required> + <label for="form_title">[% loc('Subject') %]</label> + <input type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('Provide a title') %]" required> [% IF field_errors.detail %] <p class='form-error'>[% field_errors.detail %]</p> [% END %] - <label for="form_detail">[% loc('Details:') %]</label> - <textarea name="detail" id="form_detail" required>[% report.detail | html %]</textarea> + <label for="form_detail">[% loc('Details') %]</label> + <textarea name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem here') %]" required>[% report.detail | html %]</textarea> [% IF js %] <div id="form_category_row"> - <label for="form_category">[% loc('Category:') %]</label> + <label class="inline" for="form_category">[% loc('Category') %]</label> <select name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select> </div> [% ELSE %] @@ -104,7 +104,7 @@ [% END %] [% END %] - <label for="form_photo">[% loc('Photo:') %]</label> + <label class="inline" for="form_photo">[% loc('Photo') %]</label> <input type="file" name="photo" id="form_photo"> [% END %] @@ -122,45 +122,43 @@ <p class='form-error'>[% field_errors.email %]</p> [% END %] - <label for="form_email">[% loc('Your email:') %]</label> + <label for="form_email">[% loc('Your email') %]</label> <input type="email" value="[% report.user.email | html %]" name="email" id="form_email" size="25" required> <div id="form_sign_in"> - <h3>[% loc("Now to submit your report… do you have a FixMyStreet password?") %]</h3> + <h3>[% loc("Now to submit your report…") %]</h3> + <h2>[% loc("Do you have a FixMyStreet password?") %]</h2> - <div id="form_sign_in_yes"> + <div id="form_sign_in_yes" class="form-box"> [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] - <label class="n" for="password_sign_in">[% loc('<strong>Yes</strong>, I have a password:') %]</label> - <input type="password" name="password_sign_in" id="password_sign_in" value=""> + <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> - <p> - <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]> - <label class="n" for="remember_me">[% loc('Keep me signed in on this computer') %]</label> - </p> - - <p> - <input type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]"> - </p> + <label class="hidden n" for="password_sign_in">[% loc('<strong>Yes</strong> I have a password') %]</label> + <div class="form-txt-submit-box"> + <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]"> + </div> + + <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]> + <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label> </div> - <div id="form_sign_in_no"> - <p>[% loc('<strong>No</strong>, let me confirm my report by email:') %]</p> + <div id="form_sign_in_no" class="form-box"> + <h5>[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5> [% INCLUDE name_phone %] - <label for="password_register">[% loc('Enter a new password:') %]</label> - <input type="password" name="password_register" id="password_register" value=""> - - - <p><small>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</small></p> + <label class="hidden" for="password_register">[% loc('Enter a new password (optional)') %]</label> - <p> - <input type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> - </p> + <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> + <div class="form-txt-submit-box"> + <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a new password (optional)') %]"> + <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> + </div> </div> </div> @@ -181,17 +179,16 @@ <p class='form-error'>[% field_errors.name %]</p> [% END %] - <label for="form_name">[% loc('Your name:') %]</label> - <input type="text" class="validName" value="[% report.name | html %]" name="name" id="form_name"> + <label class="hidden" for="form_may_show_nameme">[% loc('Your name') %]</label> + <input type="text" class="validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> [%# if there is nothing in the name field then set check box as default on form %] <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF !report.anonymous %]> - <label for="form_may_show_name">[% loc('Show my name publicly') %]</label> - <p><small>[% loc('(we never show your email address or phone number)') %]</small></p> + <label class="title inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label> + <p>[% loc('We never show your email address or phone number') %]</p> - <label for="form_phone">[% loc('Phone:') %]</label> - <input type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" size="15"> - <p><small>[% loc('(optional)') %]</small></p> + <label class="hidden" for="form_phone">[% loc('Your phone number (optional)') %]</label> + <input type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number (optional)') %]"> [% END %] </div>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index 1fd4968f6..75ec856eb 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -238,6 +238,30 @@ fieldset{ margin: 1em; } +// input placeholders, these need to be on separate lines as if the browser +// can't understand a selector it will invalidate the whole line. +::-webkit-input-placeholder { + color: #888888; + font: { + style:italic; + size:0.9375em; + } +} +:-moz-placeholder { + color: #888888; + font: { + style:italic; + size:0.9375em; + } +} +:-ms-placeholder { + color: #888888; + font: { + style:italic; + size:0.9375em; + } +} + input[type=text], input[type=password], input[type=email], @@ -247,15 +271,14 @@ textarea{ margin: 0 0 0 -0.5em; } - textarea{ border: 0.125em solid #888888; @include border-radius(0.25em); display: block; font-size: 1em; line-height: 1.5em; - color: #888888; font-family: 'helvetica', 'arial',sans-serif; + min-height:8em; } input[type=text], @@ -266,10 +289,8 @@ input[type=email] { display: block; font-size: 1em; line-height: 1.5em; - color: #888888; } - label{ display: block; margin-top: 1.25em; @@ -282,6 +303,47 @@ label{ } } +.form-box { + margin: 0 -2em 0.25em -2em; + background:#eeeeee; + padding:1em 2em 1em 2em; + max-width:25em; + .form-txt-submit-box { + min-height:3em; + input[type=password], + input[type=text] { + width: 69%; + float:left; + } + input[type=submit] { + float:right; + width:24%; + margin-right:0.25em; + padding-top:0.9em; + padding-bottom:0.8em; + } + } + >input[type=text] { + margin-bottom:1em; + // margin-top:1em; + } + .title { + font-size:1.25em; + margin:0.5em 0; + } + h5 { + margin:0; + font: { + size:1.125em; + weight:normal; + } + strong { + font-size:2em; + margin-right:0.25em; + } + } +} + /* LAYOUT */ @@ -413,11 +475,13 @@ input.red-btn{ } .button-right, -a.button-right { +.button-left, +a.button-right, +a.button-left { + @include inline-block; cursor:pointer; font-size: 1em; line-height: 1; - padding:0.5em 2em 0.5em 0.5em; margin:0; border:1px solid #999; color:#333; @@ -430,6 +494,25 @@ a.button-right { border:1px solid #666; } } +.button-right, +a.button-right, +:hover.button-right, +a:hover.button-right { + padding:1em 3em 1em 1em; + background-image: url(images/sprite.png); + background-repeat:no-repeat; + background-position:right -686px; +} + +.button-left, +a.button-left, +:hover.button-left, +a:hover.button-left { + padding:1em 1em 1em 3em; + background-image: url(images/sprite.png); + background-repeat:no-repeat; + background-position:-18px -802px; +} @@ -516,7 +599,6 @@ a.button-right { } - // this is the user's logged in details or the login link etc #user-meta { ul { @@ -525,6 +607,16 @@ a.button-right { } +// only on mobile, this is a sidebar on desk (#report-a-poblem-sidebar) +a.rap-notes-trigger, +a:hover.rap-notes-trigger { + display:block; + margin:0 1.25em 0 0.5em; +} +.rap-notes { + margin:1em 0; +} + // this is a bit of a hack to get some differentation between desk and mobile .desk-only { diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss index 8724d3ff4..3f1555a57 100644 --- a/web/cobrands/fixmystreet/layout.scss +++ b/web/cobrands/fixmystreet/layout.scss @@ -205,34 +205,29 @@ textarea{ /* Report a problem page*/ -.report-a-poblem-page { - width: 41.25em; - #map_box { - width:15em; + +#report-a-poblem-sidebar { + position:absolute; + left:29.5em; + top:2em; + width:15em; + z-index: -1; + @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); + .sidebar-tips { + background:#eeeeee; + padding:1em; + font-size:0.75em; } - #report-a-poblem-main { - width: 27em; - } - #report-a-poblem-sidebar { - position:absolute; - left:28.5em; - top:0; - width:15.25em; - .sidebar-tips { - background:#eeeeee; - padding:1em; - font-size:0.75em; - } - .sidebar-notes { - background:#333333; - padding:1em; - color:#ffffff; - font-size:0.75em; - } + .sidebar-notes { + background:#333333; + padding:1em; + color:#ffffff; + font-size:0.75em; } } + /* MEDIA QUERIES */ @media only screen and (min-width: 640px) and (max-width: 960px) { .container { diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index b6e7d3a79..c382a9645 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -210,21 +210,29 @@ $(function(){ */ //desktop if($('#report-a-poblem-sidebar:visible').length > 0){ - $('.content[role=main]').addClass('report-a-poblem-page'); - heightFix('#report-a-poblem-sidebar:visible', '.content.report-a-poblem-page', 26); + heightFix('#report-a-poblem-sidebar:visible', '.content', 26); } //show/hide on mobile $('.mobile #report-a-poblem-sidebar').after('<a href="#" class="rap-notes-trigger button-right">How to send successful reports</a>').hide(); $('.mobile').on('click', '.rap-notes-trigger', function(e){ e.preventDefault(); - $('.mobile .report-a-poblem-page').after('<div class="content rap-notes"></div>').hide(); - $('#report-a-poblem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close btn">close</a>'); + //check if we've already moved the notes + if($('.rap-notes').length > 0){ + //if we have, show and hide .content + $('.mobile .content').hide(); + $('.rap-notes').show(); + }else{ + //if not, move them and show, hiding .content + $('.mobile .content').after('<div class="content rap-notes"></div>').hide(); + $('#report-a-poblem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-left">BACK</a>'); + } }); $('.mobile').on('click', '.rap-notes-close', function(e){ + //hide notes, show .content e.preventDefault(); - $('.mobile .report-a-poblem-page').show(); + $('.mobile .content').show(); $('.rap-notes').hide(); }); });
\ No newline at end of file diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 02392360b..b121c6bfc 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -216,8 +216,7 @@ $(function(){ $('#side-form').hide(); $('#side').show(); $('#sub_map_links').show(); - $('.content[role=main]').addClass('report-a-poblem-page'); - heightFix('#report-a-poblem-sidebar:visible', '.content.report-a-poblem-page', 26); + heightFix('#report-a-poblem-sidebar:visible', '.content', 26); fixmystreet.page = 'around'; }); @@ -373,8 +372,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { } $('#side').hide(); $('#sub_map_links').hide(); - $('.content[role=main]').addClass('report-a-poblem-page'); - heightFix('#report-a-poblem-sidebar:visible', '.content.report-a-poblem-page', 26); + heightFix('#report-a-poblem-sidebar:visible', '.content', 26); fixmystreet.page = 'new'; location.hash = 'report'; } |