aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--templates/web/fixmystreet/report/new/fill_in_details_form.html69
-rw-r--r--web/cobrands/fixmystreet/base.scss106
-rw-r--r--web/cobrands/fixmystreet/layout.scss41
-rw-r--r--web/js/fixmystreet.js18
-rw-r--r--web/js/map-OpenLayers.js6
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&hellip; do you have a FixMyStreet password?") %]</h3>
+ <h3>[% loc("Now to submit your report&hellip;") %]</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';
}