diff options
57 files changed, 680 insertions, 441 deletions
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm index d56521fde..db3b16dcd 100644 --- a/perllib/FixMyStreet/App/Controller/Report.pm +++ b/perllib/FixMyStreet/App/Controller/Report.pm @@ -311,8 +311,9 @@ sub inspect : Private { my $problem = $c->stash->{problem}; $c->stash->{categories} = $c->forward('/admin/categories_for_point'); + $c->stash->{report_meta} = { map { $_->{name} => $_ } @{ $c->stash->{problem}->get_extra_fields() } }; - if ( $c->get_param('save') || $c->get_param('save_inspected') ) { + if ( $c->get_param('save') ) { $c->forward('/auth/check_csrf_token'); my $valid = 1; @@ -320,7 +321,7 @@ sub inspect : Private { my $reputation_change = 0; if ($permissions->{report_inspect}) { - foreach (qw/detailed_location detailed_information traffic_information/) { + foreach (qw/detailed_information traffic_information/) { $problem->set_extra_metadata( $_ => $c->get_param($_) ); } @@ -363,6 +364,14 @@ sub inspect : Private { if ($permissions->{report_inspect} || $permissions->{report_edit_category}) { $c->forward( '/admin/report_edit_category', [ $problem ] ); + + # The new category might require extra metadata (e.g. pothole size), so + # we need to update the problem with the new values. + my $param_prefix = lc $problem->category; + $param_prefix =~ s/[^a-z]//g; + $param_prefix = "category_" . $param_prefix . "_"; + my @contacts = grep { $_->category eq $problem->category } @{$c->stash->{contacts}}; + $c->forward('/report/new/set_report_extras', [ \@contacts, $param_prefix ]); } if ($valid) { diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm index f26120829..7766e08a1 100644 --- a/perllib/FixMyStreet/App/Controller/Report/New.pm +++ b/perllib/FixMyStreet/App/Controller/Report/New.pm @@ -849,33 +849,11 @@ sub process_report : Private { $report->bodies_missing($missing); } - my @extra; - foreach my $contact (@contacts) { - my $metas = $contact->get_metadata_for_input; - foreach my $field ( @$metas ) { - if ( lc( $field->{required} ) eq 'true' ) { - unless ( $c->get_param($field->{code}) ) { - $c->stash->{field_errors}->{ $field->{code} } = _('This information is required'); - } - } - push @extra, { - name => $field->{code}, - description => $field->{description}, - value => $c->get_param($field->{code}) || '', - }; - } - } + $c->forward('set_report_extras', [ \@contacts ]); if ( $c->stash->{non_public_categories}->{ $report->category } ) { $report->non_public( 1 ); } - - $c->cobrand->process_open311_extras( $c, $contacts[0]->body_id, \@extra ); - - if ( @extra ) { - $c->stash->{report_meta} = { map { $_->{name} => $_ } @extra }; - $report->set_extra_fields( @extra ); - } } elsif ( @{ $c->stash->{bodies_to_list} } ) { # There was an area with categories, but we've not been given one. Bail. @@ -927,6 +905,36 @@ sub contacts_to_bodies : Private { } } +sub set_report_extras : Private { + my ($self, $c, $contacts, $param_prefix) = @_; + + $param_prefix ||= ""; + my @extra; + foreach my $contact (@$contacts) { + my $metas = $contact->get_metadata_for_input; + foreach my $field ( @$metas ) { + if ( lc( $field->{required} ) eq 'true' ) { + unless ( $c->get_param($param_prefix . $field->{code}) ) { + $c->stash->{field_errors}->{ $field->{code} } = _('This information is required'); + } + } + push @extra, { + name => $field->{code}, + description => $field->{description}, + value => $c->get_param($param_prefix . $field->{code}) || '', + }; + } + } + + $c->cobrand->process_open311_extras( $c, @$contacts[0]->body_id, \@extra ) + if ( scalar @$contacts ); + + if ( @extra ) { + $c->stash->{report_meta} = { map { $_->{name} => $_ } @extra }; + $c->stash->{report}->set_extra_fields( @extra ); + } +} + =head2 check_for_errors Examine the user and the report for errors. If found put them on stash and diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm index 54c39ffb9..122a5d0c9 100644 --- a/perllib/FixMyStreet/TestMech.pm +++ b/perllib/FixMyStreet/TestMech.pm @@ -282,6 +282,16 @@ sub get_first_email { return $email_as_string; } +=head2 contains_or_lacks + +Based upon boolean FLAG, checks that content contains or lacks TEXT. + +=cut + +sub contains_or_lacks { + my ($mech, $flag, $text) = @_; + $flag ? $mech->content_contains($text) : $mech->content_lacks($text); +} =head2 page_errors diff --git a/t/app/controller/report_inspect.t b/t/app/controller/report_inspect.t index 393a8beb2..831959fff 100644 --- a/t/app/controller/report_inspect.t +++ b/t/app/controller/report_inspect.t @@ -46,29 +46,21 @@ FixMyStreet::override_config { }; subtest "test basic inspect submission" => sub { - $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Lots', state => 'Planned' } }); + $mech->submit_form_ok({ button => 'save', with_fields => { traffic_information => 'Yes', state => 'Planned' } }); $report->discard_changes; is $report->state, 'planned', 'report state changed'; - is $report->get_extra_metadata('traffic_information'), 'Lots', 'report data changed'; + is $report->get_extra_metadata('traffic_information'), 'Yes', 'report data changed'; }; subtest "test inspect & instruct submission" => sub { $report->unset_extra_metadata('inspected'); $report->update; + my $reputation = $report->user->get_extra_metadata("reputation"); $mech->get_ok("/report/$report_id/inspect"); - $mech->submit_form_ok({ button => 'save_inspected', with_fields => { public_update => "This is a public update." } }); + $mech->submit_form_ok({ button => 'save', with_fields => { public_update => "This is a public update.", save_inspected => "1" } }); $report->discard_changes; is $report->comments->first->text, "This is a public update.", 'Update was created'; is $report->get_extra_metadata('inspected'), 1, 'report marked as inspected'; - }; - - subtest "test positive reputation" => sub { - $report->unset_extra_metadata('inspected'); - $report->update; - my $reputation = $report->user->get_extra_metadata("reputation"); - $mech->get_ok("/report/$report_id/inspect"); - $mech->submit_form_ok({ button => 'save_inspected', with_fields => { public_update => "This is a public update." } }); - $report->discard_changes; is $report->user->get_extra_metadata('reputation'), $reputation+1, "User reputation was increased"; }; @@ -77,7 +69,7 @@ FixMyStreet::override_config { $report->update; $report->comments->delete_all; $mech->get_ok("/report/$report_id/inspect"); - $mech->submit_form_ok({ button => 'save_inspected', with_fields => { public_update => undef } }); + $mech->submit_form_ok({ button => 'save', with_fields => { public_update => undef, save_inspected => "1" } }); is_deeply $mech->page_errors, [ "Please provide a public update for this report." ], 'errors match'; $report->discard_changes; is $report->comments->count, 0, "Update wasn't created"; @@ -101,10 +93,10 @@ FixMyStreet::override_config { $user->user_body_permissions->delete; $user->user_body_permissions->create({ body => $oxon, permission_type => $test->{type} }); $mech->get_ok("/report/$report_id/inspect"); - has_or_lacks($test->{priority}, 'Priority'); - has_or_lacks($test->{priority}, 'High'); - has_or_lacks($test->{category}, 'Category'); - has_or_lacks($test->{detailed}, 'Detailed problem information'); + $mech->contains_or_lacks($test->{priority}, 'Priority'); + $mech->contains_or_lacks($test->{priority}, 'High'); + $mech->contains_or_lacks($test->{category}, 'Category'); + $mech->contains_or_lacks($test->{detailed}, 'Extra details'); $mech->submit_form_ok({ button => 'save', with_fields => { @@ -138,8 +130,3 @@ END { $mech->delete_body($brum); done_testing(); } - -sub has_or_lacks { - my ($flag, $text) = @_; - $flag ? $mech->content_contains($text) : $mech->content_lacks($text); -} diff --git a/t/cobrand/zurich.t b/t/cobrand/zurich.t index 53d8dba0f..1ea55b003 100644 --- a/t/cobrand/zurich.t +++ b/t/cobrand/zurich.t @@ -936,8 +936,8 @@ subtest 'Status update shown as appropriate' => sub { my ($state, $update, $public, $user_response) = @$_; $report->update({ state => $state }); $mech->get_ok( '/admin/report_edit/' . $report->id ); - contains_or_lacks($mech, $update, "<textarea name='status_update'"); - contains_or_lacks($mech, $public || $user_response, '<div class="admin-official-answer">'); + $mech->contains_or_lacks($update, "name='status_update'"); + $mech->contains_or_lacks($public || $user_response, '<div class="admin-official-answer">'); if ($public) { $mech->get_ok( '/report/' . $report->id ); @@ -947,17 +947,6 @@ subtest 'Status update shown as appropriate' => sub { }; }; -# TODO refactor into FixMyStreet::TestMech; -sub contains_or_lacks { - my ($mech, $contains, $text) = @_; - if ($contains) { - $mech->content_contains($text); - } - else { - $mech->content_lacks($text); - } -} - subtest 'time_spent' => sub { FixMyStreet::override_config { ALLOWED_COBRANDS => [ 'zurich' ], diff --git a/templates/web/base/admin/body-form.html b/templates/web/base/admin/body-form.html index 13e688097..303afb682 100644 --- a/templates/web/base/admin/body-form.html +++ b/templates/web/base/admin/body-form.html @@ -22,7 +22,7 @@ </div> <p> <label for="name">[% loc('Name') %]</label> - <input type="text" name="name" id="name" value="[% body.name | html %]" size="50"> + <input type="text" class="form-control" name="name" id="name" value="[% body.name | html %]" size="50"> </p> <div class="admin-hint"> @@ -35,7 +35,7 @@ </div> <p> <label for="parent">[% loc('Parent') %]</label> - <select name="parent" id="parent"> + <select class="form-control" name="parent" id="parent"> <option value=""> -- [% loc('Select a body') %] -- </option> [% FOR b IN bodies %] <option value="[% b.id %]"[% ' selected' IF body.parent.id == b.id %]>[% b.name %]</option> @@ -73,7 +73,7 @@ </div> <p> <label for="area_ids">[% loc('Area covered') %]</label> - <select name="area_ids" id="area_ids" multiple> + <select class="form-control" name="area_ids" id="area_ids" multiple> <option value=""> -- [% loc('Select an area') %] -- </option> [% SET body_areas = body.areas %] [% FOR area IN areas %] @@ -85,7 +85,7 @@ <p> <label for="external_url">[% loc('External URL') %]</label> - <input type="text" name="external_url" id="external_url" value="[% body.external_url | html %]" size="50"> + <input type="text" class="form-control" name="external_url" id="external_url" value="[% body.external_url | html %]" size="50"> </p> <div class="admin-hint"> <p>[% loc( "You can mark a body as deleted if you do not want it to be active on the site." ) %]</p> @@ -105,7 +105,7 @@ </div> <p> <label for="send_method">Send Method</label> - <select name="send_method" id="send_method"> + <select class="form-control" name="send_method" id="send_method"> <option value=""> -- Select a method -- </option> [% FOR method IN send_methods %] <option value="[% method %]"[% ' selected' IF body.send_method == method %]>[% method %]</option> @@ -118,7 +118,7 @@ [% loc( "These settings are for bodies that use Open311 (or other back-end integration) to receive problem reports.<br> <strong>You don't need to set them if the Send Method is email.</strong>. - For more information on Open311, see + For more information on Open311, see <a href='https://www.mysociety.org/2013/01/17/open311-explained/' class='admin-offsite-link'>this article</a>. " ) %] @@ -127,14 +127,14 @@ <div class="admin-hint"> <p> [% loc( - "The <strong>endpoint</strong> is the URL of the service that FixMyStreet will connect to + "The <strong>endpoint</strong> is the URL of the service that FixMyStreet will connect to when sending reports to this body." ) %] </p> </div> <p> <label for="endpoint">[% loc('Endpoint') %]</label> - <input type="text" name="endpoint" id="endpoint" value="[% body.endpoint | html %]" size="50"> + <input type="text" class="form-control" name="endpoint" id="endpoint" value="[% body.endpoint | html %]" size="50"> </p> <div class="admin-hint"> @@ -147,7 +147,7 @@ </div> <p> <label for="jurisdiction">Open311 Jurisdiction</label> - <input type="text" name="jurisdiction" id="jurisdiction" value="[% body.jurisdiction | html %]" size="50"> + <input type="text" class="form-control" name="jurisdiction" id="jurisdiction" value="[% body.jurisdiction | html %]" size="50"> </p> <div class="admin-hint"> @@ -160,7 +160,7 @@ </div> <p> <label for="api_key">Open311 API Key</label> - <input type="text" name="api_key" id="api_key" value="[% body.api_key | html %]" size="25"> + <input type="text" class="form-control" name="api_key" id="api_key" value="[% body.api_key | html %]" size="25"> </p> <div class="admin-hint"> @@ -168,7 +168,7 @@ [% loc( "Enable <strong>Open311 update-sending</strong> if the endpoint will send and receive updates to existing reports. If you're not sure, it probably does not, so leave this unchecked. - For more information, see + For more information, see <a href='https://www.mysociety.org/2013/02/20/open311-extended/' class='admin-offsite-link'>this article</a>." ) %] </p> @@ -181,7 +181,7 @@ <div class="admin-hint"> <p> [% loc( - "If you've enabled Open311 update-sending above, you must identify which + "If you've enabled Open311 update-sending above, you must identify which FixMyStreet <strong>user</strong> will be attributed as the creator of those updates when they are shown on the site. Enter the ID (number) of that user." ) %] @@ -198,7 +198,7 @@ <div class="admin-hint"> <p> [% loc( - "If you've enabled Open311 update-sending above, enable <strong>suppression of alerts</strong> + "If you've enabled Open311 update-sending above, enable <strong>suppression of alerts</strong> if you do <strong>not</strong> want that user to be notified whenever these updates are created." ) %] </p> @@ -211,7 +211,7 @@ <div class="admin-hint"> <p> [% loc( - "If you've enabled Open311 update-sending above, Open311 usually only accepts OPEN or CLOSED status in + "If you've enabled Open311 update-sending above, Open311 usually only accepts OPEN or CLOSED status in its updates. Enable <strong>extended Open311 stauses</strong> if you want to allow extra states to be passed. Check that your cobrand supports this feature before switching it on." ) %] @@ -222,11 +222,11 @@ <label for="send_extended_statuses" class="inline">Send extended Open311 statuses with service request updates</label> </p> </div> - + <div class="admin-hint"> <p> [% loc( - "Enable this <strong>can be devolved</strong> setting if one or more contacts have a + "Enable this <strong>can be devolved</strong> setting if one or more contacts have a different endpoint (and send method) from the body's. For example, if reports for some categories of problem must be emailed, while others can be sent over Open311." ) %] @@ -239,11 +239,11 @@ <input type="checkbox" id="can_be_devolved" name="can_be_devolved"[% ' checked' IF body.can_be_devolved %]> <label for="can_be_devolved" class="inline">Send method or endpoints can be devolved to contacts (i.e, can be different from the body's)</label> </p> - + <p> <input type="hidden" name="posted" value="body"> <input type="hidden" name="token" value="[% csrf_token %]"> - <input type="submit" value="[% body ? loc('Update body') : loc('Add body') %]"> + <input type="submit" class="btn" value="[% body ? loc('Update body') : loc('Add body') %]"> </p> </form> diff --git a/templates/web/base/admin/body.html b/templates/web/base/admin/body.html index 6d23c1458..065cafe2d 100644 --- a/templates/web/base/admin/body.html +++ b/templates/web/base/admin/body.html @@ -102,12 +102,12 @@ <p> <input type="hidden" name="posted" value="update"> <input type="hidden" name="token" value="[% csrf_token %]"> - <input type="submit" name="Update statuses" value="[% loc('Update statuses') %]"> + <input type="submit" class="btn" name="Update statuses" value="[% loc('Update statuses') %]"> </p> </form> <p class="fms-admin-info"> - [% loc("Each contact for the body has a category, which is displayed to the public. + [% loc("Each contact for the body has a category, which is displayed to the public. Different categories <strong>can have the same contact</strong> (email address). This means you can add many categories even if you only have one contact for the body. ") %] @@ -138,12 +138,12 @@ </p> </div> <p> - <strong>[% loc('Category:') %] </strong><input type="text" name="category" size="30" value="[% contact.category | html %]"> + <strong>[% loc('Category:') %] </strong><input type="text" class="form-control" name="category" size="30" value="[% contact.category | html %]"> </p> <div class="admin-hint"> <p> - [% loc("The <strong>email address</strong> is the destination to which reports about this category will be sent. + [% loc("The <strong>email address</strong> is the destination to which reports about this category will be sent. Other categories for this body may have the same email address.") %] </p> [% IF (body.send_method AND body.send_method != 'Email') OR body.can_be_devolved %] @@ -154,7 +154,7 @@ </div> <p> - <strong>[% loc('Email address:') %] </strong><input type="text" name="email" size="30" value="[% contact.email | html %]"> + <strong>[% loc('Email address:') %] </strong><input type="text" class="form-control" name="email" size="30" value="[% contact.email | html %]"> </p> <div class="admin-hint"> @@ -170,7 +170,7 @@ <div class="admin-hint"> <p> - [% loc("Check <strong>deleted</strong> to remove the category from use. + [% loc("Check <strong>deleted</strong> to remove the category from use. It will not appear as an available category in the drop-down menu on the report-a-problem page.") %] </p> </div> @@ -217,7 +217,7 @@ <p> <input type="hidden" name="posted" value="new" > <input type="hidden" name="token" value="[% csrf_token %]" > - <input type="submit" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]" > + <input type="submit" class="btn" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]" > </p> <div> diff --git a/templates/web/base/admin/category_edit.html b/templates/web/base/admin/category_edit.html index 05fa2ca4e..7cc45f80f 100644 --- a/templates/web/base/admin/category_edit.html +++ b/templates/web/base/admin/category_edit.html @@ -25,12 +25,12 @@ <input type="hidden" name="token" value="[% csrf_token %]" > <p><strong>[% loc('Email:') %] </strong> - <input type="text" name="email" value="[% contact.email | html %]" size="30"> + <input type="text" class="form-control" name="email" value="[% contact.email | html %]" size="30"> <p> [% IF c.cobrand.moniker != 'zurich' %] <input type="checkbox" name="confirmed" value="1" id="confirmed"[% ' checked' IF contact.confirmed %]> - <label class="inline" for="confirmed">[% loc('Confirmed' ) %]</label> + <label class="inline" for="confirmed">[% loc('Confirmed' ) %]</label> [% ELSE %] <input type="hidden" name="confirmed" value="1"> [% END %] @@ -63,22 +63,22 @@ <form method="post" action="[% c.uri_for('body', body_id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8"> <p> <label for="endpoint">Endpoint</label> - <input type="text" name="endpoint" id="endpoint" value="[% contact.endpoint | html %]" size="50"> + <input type="text" class="form-control" name="endpoint" id="endpoint" value="[% contact.endpoint | html %]" size="50"> </p> <p> <label for="jurisdiction">Jurisdiction</label> - <input type="text" name="jurisdiction" id="jurisdiction" value="[% contact.jurisdiction | html %]" size="50"> + <input type="text" class="form-control" name="jurisdiction" id="jurisdiction" value="[% contact.jurisdiction | html %]" size="50"> </p> <p> <label for="api_key">Api Key</label> - <input type="text" name="api_key" id="api_key" value="[% contact.api_key | html %]" size="25"> + <input type="text" class="form-control" name="api_key" id="api_key" value="[% contact.api_key | html %]" size="25"> </p> <p> <label for="send_method">Send Method</label> - <select name="send_method"> + <select class="form-control" name="send_method"> <option value=""> -- Select a method -- </option> [% FOR method IN send_methods %] <option value="[% method %]"[% ' selected' IF contact.send_method == method %]>[% method %]</option> @@ -88,7 +88,7 @@ [% END %] <input type="hidden" name="posted" value="new"> - <p><input type="submit" name="Save changes" value="[% loc('Save changes') %]"> + <p><input type="submit" class="btn" name="Save changes" value="[% loc('Save changes') %]"> </form> [% IF contact.extra %] diff --git a/templates/web/base/admin/index.html b/templates/web/base/admin/index.html index beb4dad7f..f573f0e7a 100644 --- a/templates/web/base/admin/index.html +++ b/templates/web/base/admin/index.html @@ -22,18 +22,18 @@ and to receive notices of updates. <form method="get" action="[% c.uri_for('reports') %]" accept-charset="utf-8"> <p><label for="search_reports">[% loc('Search Reports') %]</label> - <input type="text" name="search" size="30" id="search_reports" value="[% searched | html %]"> + <input type="text" class="form-control" name="search" size="30" id="search_reports" value="[% searched | html %]"> </form> <form method="get" action="[% c.uri_for('users') %]" accept-charset="utf-8"> <p><label for="search_users">[% loc('Search Users') %]</label> - <input type="text" name="search" size="30" id="search_users" value="[% searched | html %]"> + <input type="text" class="form-control" name="search" size="30" id="search_users" value="[% searched | html %]"> </form> [% IF c.user.is_superuser %] <form method="get" action="[% c.uri_for('bodies') %]"> <label for="search_body">[% loc('Edit body details') %]</label> - <select id="search_body" name="body"> + <select class="form-control" id="search_body" name="body"> [% FOREACH body IN bodies %] [%- SET id = body.id %] <option[% IF body.deleted %] class="adminhidden"[% END %] value="[% body.id %]"> @@ -42,7 +42,7 @@ and to receive notices of updates. </option> [% END %] </select> - <input type="submit" value="[% loc('Go') %]"> + <input type="submit" class="btn" value="[% loc('Go') %]"> </form> [% END %] diff --git a/templates/web/base/admin/report_blocks.html b/templates/web/base/admin/report_blocks.html index 941bff821..3561d865d 100644 --- a/templates/web/base/admin/report_blocks.html +++ b/templates/web/base/admin/report_blocks.html @@ -38,12 +38,12 @@ SET state_groups = [ [% BLOCK abuse_button -%] [% IF allowed_pages.abuse_edit -%] -[% IF email_in_abuse %]<small>[% loc('(Email in abuse table)') %]</small>[% ELSE %]<input type="submit" name="banuser" value="[% loc('Ban email address') %]" />[% END %] +[% IF email_in_abuse %]<small>[% loc('(Email in abuse table)') %]</small>[% ELSE %]<input type="submit" class="btn" name="banuser" value="[% loc('Ban email address') %]" />[% END %] [%- END %] [%- END %] [% BLOCK flag_button -%] -[% IF user.flagged || user_flagged %]<input type="submit" name="removeuserflag" value="[% loc('Remove flag') %]">[% ELSE %]<input type="submit" name="flaguser" value="[% loc('Flag user') %]" />[% END %] +[% IF user.flagged || user_flagged %]<input type="submit" class="btn" name="removeuserflag" value="[% loc('Remove flag') %]">[% ELSE %]<input type="submit" class="btn" name="flaguser" value="[% loc('Flag user') %]" />[% END %] [%- END %] [%# note: date format here (i.e., dd.mm.YYYY) currently used by Zurich %] diff --git a/templates/web/base/admin/report_edit.html b/templates/web/base/admin/report_edit.html index 96e59d1c4..02e75563c 100644 --- a/templates/web/base/admin/report_edit.html +++ b/templates/web/base/admin/report_edit.html @@ -21,7 +21,7 @@ <div class="sidebar"> - <p align="center"><input type="submit" name="Submit changes" value="[% loc('Submit changes') %]"></p> + <p align="center"><input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]"></p> <ul> [%- cobrand_data = problem.cobrand_data; @@ -81,9 +81,9 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a> ([% problem.send_method_used %]) [% END %] [% IF problem.state == 'confirmed' AND problem.whensent %] - <input data-confirm="[% loc('Are you sure?') %]" type="submit" name="resend" value="[% loc('Resend report') %]"> + <input data-confirm="[% loc('Are you sure?') %]" class="btn" type="submit" name="resend" value="[% loc('Resend report') %]"> [% ELSIF NOT problem.whensent %] - <input type="submit" name="mark_sent" value="[% loc('Mark as sent') %]"> + <input type="submit" class="btn" name="mark_sent" value="[% loc('Mark as sent') %]"> [% END %] </li> <li class="sm">[% loc('Last update:') %] [% PROCESS format_time time=problem.lastupdate %]</li> @@ -95,11 +95,11 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a> <li>[% loc('Going to send questionnaire?') %] [% IF problem.send_questionnaire %][% loc('Yes') %][% ELSE %][% loc('No') %][% END %]</li> <li><label for="external_id">[% loc('External ID') %]:</label> - <input type="text" name="external_id" id="external_id" value="[% problem.external_id | html %]"> + <input type="text" class="form-control" name="external_id" id="external_id" value="[% problem.external_id | html %]"> <li><label for="external_body">[% loc('External body') %]:</label> - <input type="text" name="external_body" body="external_body" value="[% problem.external_body | html %]"> + <input type="text" class="form-control" name="external_body" body="external_body" value="[% problem.external_body | html %]"> <li><label for="external_team">[% loc('External team') %]:</label> - <input type="text" name="external_team" team="external_team" value="[% problem.external_team | html %]"> + <input type="text" class="form-control" name="external_team" team="external_team" value="[% problem.external_team | html %]"> </ul> </div> @@ -108,12 +108,12 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a> <ul class="plain-list"> <li><label for='title'>[% loc('Subject:') %]</label> - <input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></li> + <input size=60 type='text' class="form-control" id='title' name='title' value='[% problem.title | html %]'></li> <li><label for='detail'>[% loc('Details:') %]</label> -<textarea name='detail' id='detail' cols=60 rows=10>[% problem.detail | html %]</textarea></li> +<textarea class="form-control" name='detail' id='detail' cols=60 rows=10>[% problem.detail | html %]</textarea></li> <li><label class="inline-text" for="state">[% loc('State:') %]</label> -<select name="state" id="state"> +<select class="form-control" name="state" id="state"> [% FOREACH group IN state_groups %] <optgroup label="[% group.0 %]"> [% FOREACH state IN group.1 %] @@ -123,7 +123,7 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a> [% END %] </select></li> <li><label class="inline-text" for="category">[% loc('Category:') %]</label> -<select name="category" id="category"> +<select class="form-control" name="category" id="category"> [% IF NOT problem.category OR NOT categories.grep(problem.category).size %] <optgroup label="[% loc('Existing category') %]"> <option selected value="[% problem.category | html %]">[% (problem.category OR '-') | html %]</option> @@ -138,14 +138,14 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a> [% END %] </select></li> <li><label class="inline-text" for="anonymous">[% loc('Anonymous:') %]</label> -<select name="anonymous" id="anonymous"> +<select class="form-control" name="anonymous" id="anonymous"> <option [% 'selected ' IF problem.anonymous %]value="1">[% loc('Yes') %]</option> <option [% 'selected ' IF !problem.anonymous %]value="0">[% loc('No') %]</option> </select></li> <li><label for="name">[% loc('Name:') %]</label> - <input type='text' name='name' id='name' value='[% problem.name | html %]'></li> + <input type='text' class="form-control" name='name' id='name' value='[% problem.name | html %]'></li> <li><label for="email">[% loc('Email:') %]</label> - <input type='text' id='email' name='email' value='[% problem.user.email | html %]'> + <input type='text' class="form-control" id='email' name='email' value='[% problem.user.email | html %]'> [% PROCESS abuse_button %] [% PROCESS flag_button user=problem.user %] </li> @@ -177,7 +177,7 @@ class="admin-offsite-link">[% problem.latitude %], [% problem.longitude %]</a> [% END %] </ul> -<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]"> +<input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]"> </form> </div> diff --git a/templates/web/base/admin/responsepriorities/edit.html b/templates/web/base/admin/responsepriorities/edit.html index b05ebfaf9..89f41a069 100644 --- a/templates/web/base/admin/responsepriorities/edit.html +++ b/templates/web/base/admin/responsepriorities/edit.html @@ -11,7 +11,7 @@ <p> <strong>[% loc('Name:') %] </strong> - <input type="text" name="name" class="required" size="30" value="[% rp.name | html %]"> + <input type="text" name="name" class="required form-control" size="30" value="[% rp.name | html %]"> </p> <p> <strong>[% loc('Categories:') %]</strong> @@ -34,7 +34,7 @@ </p> <p> <input type="hidden" name="token" value="[% csrf_token %]" > - <input type="submit" name="Edit priorities" value="[% rp.id ? loc('Save changes') : loc('Create priority') %]" > + <input type="submit" class="btn" name="Edit priorities" value="[% rp.id ? loc('Save changes') : loc('Create priority') %]" > </p> </form> diff --git a/templates/web/base/admin/stats.html b/templates/web/base/admin/stats.html index 897e2fc44..535f04d18 100644 --- a/templates/web/base/admin/stats.html +++ b/templates/web/base/admin/stats.html @@ -68,13 +68,13 @@ <form method="post" action="[% c.uri_for('stats') %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8"> <p> - <label for="start_date">[% loc('Start Date:') %]</label><input type="text" + <label for="start_date">[% loc('Start Date:') %]</label><input type="text" class="form-control" placeholder="[% loc('Click here or enter as dd/mm/yyyy') %]" name="start_date" id="start_date" value="[% start_date ? start_date.strftime( '%d/%m/%Y') : '' | html %]" /> </p> <p> - <label for="end_date">[% loc('End Date:') %]</label><input type="text" + <label for="end_date">[% loc('End Date:') %]</label><input type="text" class="form-control" placeholder="[% loc('Click here or enter as dd/mm/yyyy') %]" name="end_date" id="end_date" size="5" value="[% end_date ? end_date.strftime( '%d/%m/%Y') : '' | html %]" /> </p> @@ -89,7 +89,7 @@ [% IF c.user.is_superuser %] <p> - [% loc('Council:') %] <select id='body' name='body'> + [% loc('Council:') %] <select class="form-control" id='body' name='body'> <option value=''>[% loc('No council') %]</option> [% FOR body IN bodies %] <option value="[% body.id %]"[% ' selected' IF body.id == selected_body %]>[% body.name %]</option> @@ -99,7 +99,7 @@ [% END %] <p> - <input type="submit" name="getcounts" size="30" id="getcounts" value="Get Count" /> + <input type="submit" class="btn" name="getcounts" size="30" id="getcounts" value="Get Count" /> </p> </form> diff --git a/templates/web/base/admin/template_edit.html b/templates/web/base/admin/template_edit.html index 54058a04c..8ce3c28dd 100644 --- a/templates/web/base/admin/template_edit.html +++ b/templates/web/base/admin/template_edit.html @@ -11,11 +11,11 @@ <p> <strong>[% loc('Title:') %] </strong> - <input type="text" name="title" class="required" size="30" value="[% rt.title| html %]"> + <input type="text" name="title" class="required form-control" size="30" value="[% rt.title| html %]"> </p> <p> <strong>[% loc('Text:') %] </strong> - <textarea name="text" class="required">[% rt.text |html %]</textarea> + <textarea class="form-control" name="text" class="required">[% rt.text |html %]</textarea> </p> <p> <label> @@ -38,11 +38,11 @@ </p> <p> <input type="hidden" name="token" value="[% csrf_token %]" > - <input type="submit" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" > + <input type="submit" class="btn" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" > </p> [% IF rt.id %] <p> - <input class="delete" type="submit" name="delete_template" value="[% loc('Delete template') %]"> + <input class="delete btn-danger" type="submit" name="delete_template" value="[% loc('Delete template') %]"> </p> [% END %] </form> diff --git a/templates/web/base/admin/update_edit.html b/templates/web/base/admin/update_edit.html index 06bee6010..2b20c50b3 100644 --- a/templates/web/base/admin/update_edit.html +++ b/templates/web/base/admin/update_edit.html @@ -18,19 +18,21 @@ <li><a href="[% uri %]#update_[% update.id %]" class="admin-offsite-link">[% loc('View report on site' )%]</a></li> <li><label for='detail'>[% loc('Text:') %]</label> -<textarea name='text' id='text' cols=60 rows=10>[% update.text | html %]</textarea></li> +<textarea class="form-control" name='text' id='text' cols=60 rows=10>[% update.text | html %]</textarea></li> -<li><label for="anonymous">[% loc('Anonymous:') %]</label> <select name="anonymous" id="anonymous"> +<li><label for="anonymous">[% loc('Anonymous:') %]</label> +<select class="form-control" name="anonymous" id="anonymous"> <option [% 'selected ' IF update.anonymous %]value="1">[% loc('Yes') %]</option> <option [% 'selected ' IF !update.anonymous %]value="0">[% loc('No') %]</option> </select></li> -<li><label for="state">[% loc('State:') %]</label> <select name="state" id="state"> +<li><label for="state">[% loc('State:') %]</label> +<select class="form-control" name="state" id="state"> [% FOREACH state IN [ ['confirmed', loc('Open')], ['hidden', loc('Hidden')], ['unconfirmed',loc('Unconfirmed')] ] %] <option [% 'selected ' IF state.0 == update.state %] value="[% state.0 %]">[% state.1 %]</option> [% END %] </select></li> -<li>[% loc('Name:') %] <input type='text' name='name' id='name' value='[% update.name | html %]'></li> -<li>[% loc('Email:') %] <input type='text' id='email' name='email' value='[% update.user.email | html %]'> +<li>[% loc('Name:') %] <input type='text' class="form-control" name='name' id='name' value='[% update.name | html %]'></li> +<li>[% loc('Email:') %] <input type='text' class="form-control" id='email' name='email' value='[% update.user.email | html %]'> [%- IF update.user.from_body && update.user.from_body.id == update.problem.bodies_str %] [% ' (' _ tprintf(loc('user is from same council as problem - %d'), update.user.from_body.id ) _')' %] [% END -%] @@ -72,6 +74,6 @@ [% END %] </ul> -<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" ></form> +<input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" ></form> [% INCLUDE 'admin/footer.html' %] diff --git a/templates/web/base/admin/user-form.html b/templates/web/base/admin/user-form.html index 87324666d..5adc200a1 100644 --- a/templates/web/base/admin/user-form.html +++ b/templates/web/base/admin/user-form.html @@ -16,12 +16,12 @@ </p> </div> <label for="name">[% loc('Name:') %]</label> - <input type='text' name='name' id='name' value='[% user.name | html %]'> + <input type='text' class="form-control" name='name' id='name' value='[% user.name | html %]'> </li> <li><label for="email">[% loc('Email:') %]</label> - <input type='text' id='email' name='email' value='[% user.email | html %]'></li> + <input type='text' class="form-control" id='email' name='email' value='[% user.email | html %]'></li> <li><label for="phone">[% loc('Phone:') %]</label> - <input type='text' id='phone' name='phone' value='[% user.phone | html %]'></li> + <input type='text' class="form-control" id='phone' name='phone' value='[% user.phone | html %]'></li> [% IF c.user.is_superuser || c.cobrand.moniker == 'zurich' %] <li> @@ -35,7 +35,7 @@ %] </p> </div> - [% loc('Body:') %] <select id='body' name='body'> + [% loc('Body:') %] <select class="form-control" id='body' name='body'> <option value=''>[% loc('No body') %]</option> [% FOR body IN bodies %] <option value="[% body.id %]"[% ' selected data-originally-selected' IF body.id == user.from_body.id %]>[% body.name %]</option> @@ -64,7 +64,7 @@ </p> </div> [% loc('Area:') %] - <select id='area_id' name='area_id' [% 'disabled' UNLESS c.user.has_permission_to('user_assign_areas', user.from_body.id) %]> + <select class="form-control" id='area_id' name='area_id' [% 'disabled' UNLESS c.user.has_permission_to('user_assign_areas', user.from_body.id) %]> <option value=''>[% loc('No area') %]</option> [% FOREACH area IN areas %] <option value="[% area.id %]"[% ' selected' IF area.id == user.area_id %]>[% area.name | html %]</option> @@ -98,7 +98,7 @@ </div> [% IF c.user.is_superuser %] [% loc('Trusted by bodies:') %]<br /> - <select id='body' name='trusted_bodies' multiple> + <select class="form-control" id='body' name='trusted_bodies' multiple> [% FOR body IN bodies %] <option value="[% body.id %]"[% ' selected' IF user.has_permission_to('trusted', body.id) %]>[% body.name %]</option> [% END %] @@ -159,5 +159,5 @@ [% END %] [% END %] </ul> - <input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" > + <input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" > </form> diff --git a/templates/web/base/auth/change_email.html b/templates/web/base/auth/change_email.html index 471782e42..a444b8c31 100644 --- a/templates/web/base/auth/change_email.html +++ b/templates/web/base/auth/change_email.html @@ -27,7 +27,7 @@ <input class="form-control" type="email" name="email" id="email" value="[% email | html %]"> </div> <div class="final-submit"> - <input type="submit" value="[% loc('Change email address') %]"> + <input type="submit" class="btn" value="[% loc('Change email address') %]"> </div> </fieldset> diff --git a/templates/web/base/auth/change_password.html b/templates/web/base/auth/change_password.html index 50ecc93a2..094d131eb 100644 --- a/templates/web/base/auth/change_password.html +++ b/templates/web/base/auth/change_password.html @@ -40,7 +40,7 @@ INCLUDE 'header.html', title = loc('Change password'), bodyclass = bclass <input class="form-control" type="password" name="confirm" value="[% confirm | html %]"> </div> <div class="final-submit"> - <input type="submit" value="[% loc('Change password') %]"> + <input type="submit" class="btn" value="[% loc('Change password') %]"> </div> </fieldset> diff --git a/templates/web/base/dashboard/index.html b/templates/web/base/dashboard/index.html index c0f94ce56..1af507569 100644 --- a/templates/web/base/dashboard/index.html +++ b/templates/web/base/dashboard/index.html @@ -19,7 +19,7 @@ <div class="filters"> <p> <label for="ward">Ward:</label> - <select name="ward"><option value=''>All</option> + <select class="form-control" name="ward"><option value=''>All</option> [% FOR w IN children.values.sort('name') %] <option value="[% w.id %]"[% ' selected' IF w.id == ward %]>[% w.name %]</option> [% END %] @@ -28,7 +28,7 @@ <p> <label for="category">Report category:</label> - <select name="category"><option value=''>All</option> + <select class="form-control" name="category"><option value=''>All</option> [% FOR cat_op IN category_options %] <option value='[% cat_op | html %]'[% ' selected' IF category == cat_op %]>[% cat_op | html %]</option> [% END %] @@ -36,7 +36,7 @@ </p> <p> - <input type="submit" value="Look up"> + <input type="submit" class="btn" value="Look up"> </p> <br clear="all" /> @@ -135,7 +135,7 @@ <h2>Reports</h2> </select> -<p>Report state: <select name="state"> +<p>Report state: <select class="form-control" name="state"> <option value=''>All</option> [% FOREACH state IN [ ['confirmed', loc('Open')], ['investigating', loc('Investigating')], ['action scheduled', loc('Planned')], ['in progress', @@ -143,7 +143,7 @@ <option [% 'selected ' IF state.0 == q_state %] value="[% state.0 %]">[% state.1 %]</option> [% END %] </select> -<input type="submit" value="Look up"> +<input type="submit" class="btn" value="Look up"> <a class="export_as_csv" href="[% c.req.uri_with({ export => 1 }) %]">Export as CSV</a> <table width="100%" id="reports"> diff --git a/templates/web/base/questionnaire/creator_fixed.html b/templates/web/base/questionnaire/creator_fixed.html index 5b6d1254a..bcd9a9514 100644 --- a/templates/web/base/questionnaire/creator_fixed.html +++ b/templates/web/base/questionnaire/creator_fixed.html @@ -16,7 +16,7 @@ <label class="inline" for="reported_no">[% loc('No') %]</label> </p> -<p><input type="submit" name="submit" value="[% loc('Submit') %]"></p> +<p><input type="submit" class="btn" name="submit" value="[% loc('Submit') %]"></p> </form> diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html index 217bd827e..5e6cef3b7 100644 --- a/templates/web/base/questionnaire/index.html +++ b/templates/web/base/questionnaire/index.html @@ -107,7 +107,7 @@ </p> </div> -<p><input type="submit" name="submit" value="[% loc('Submit questionnaire') %]"></p> +<p><input type="submit" class="btn" name="submit" value="[% loc('Submit questionnaire') %]"></p> </form> diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html index 31a8cd9ad..34a7ea96c 100644 --- a/templates/web/base/report/_inspect.html +++ b/templates/web/base/report/_inspect.html @@ -1,49 +1,38 @@ [% PROCESS 'admin/report_blocks.html'; # For the report state dropdown %] [% permissions = c.user.permissions(c, problem.bodies_str) %] [% second_column = BLOCK -%] - <div id="side-report-secondary"> - <div class="problem-inspector-fields clearfix"> - [% INCLUDE 'errors.html' %] + <div id="side-inspect"> + [% INCLUDE 'errors.html' %] - <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]"> - <p class="left"> - <label for="problem_id">[% loc('Report ID:') %]</label> - <input type="text" readonly id="problem_id" value="[% problem.id %]"> - </p> + <form id="report_inspect_form" method="post" action="[% c.uri_for( '/report', problem.id, 'inspect' ) %]"> -[% IF permissions.report_edit_priority OR permissions.report_inspect %] - <p class="right"> - <label for="problem_priority">[% loc('Priority:') %]</label> - <select name="priority" id="problem_priority"> - <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option> - [% FOREACH priority IN problem.response_priorities %] - <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option> - [% END %] - </select> + <div class="inspect-section"> + <p> + <strong>[% loc('Report ID:') %]</strong> + [% problem.id %] </p> -[% END %] - -[% IF permissions.report_inspect %] - <p class="left"> - <label for="state">[% loc('State:') %]</label> - [%# XXX this is duplicated from admin/report_edit.html, should be refactored %] - <select name="state" id="state"> - [% FOREACH group IN state_groups %] - <optgroup label="[% group.0 %]"> - [% FOREACH state IN group.1 %] - <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option> - [% END %] - </optgroup> - [% END %] - </select> + <p> + [% SET local_coords = problem.local_coords; %] + <strong>[% loc('Easting/Northing:') %]</strong> + <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>, + <span id="problem_northing">[% local_coords.1 IF local_coords %]</span> + <input type="hidden" name="longitude" value="[% problem.longitude %]"> + <input type="hidden" name="latitude" value="[% problem.latitude %]"> </p> -[% END %] + <p> + <a href="https://www.google.com/maps/dir/Current+Location/[% problem.latitude %],[% problem.longitude %]" class="btn btn--block btn--navigate">[% loc('Navigate to this problem') %]</a> + </p> + <p> + <a href="#" class="btn btn--block btn--geolocate" id="geolocate_link">[% loc('Set to my current location') %]</a> + </p> + </div> -[% IF permissions.report_edit_category OR permissions.report_inspect %] - <p class="right"> - <label for="category">[% loc('Category:') %]</label> + [% IF permissions.report_edit_category OR permissions.report_inspect %] + <div class="inspect-section"> + <p> + <label for="category">[% loc('Category') %]</label> [%# XXX this is duplicated from admin/report_edit.html, should be refactored %] - <select name="category" id="category"> + <select name="category" id="category" class="form-control"> [% IF NOT problem.category OR NOT categories.grep(problem.category).size %] <optgroup label="[% loc('Existing category') %]"> <option selected value="[% problem.category | html %]">[% (problem.category OR '-') | html %]</option> @@ -58,62 +47,102 @@ [% END %] </select> </p> -[% END %] + [% FOREACH category IN categories %] + [% cat_prefix = category | lower | replace('[^a-z]', '') %] + [% cat_prefix = "category_" _ cat_prefix _ "_" %] + [% IF category == problem.category %] + <p data-category="[% category | html %]"> + [% INCLUDE 'report/new/category_extras_fields.html' %] + </p> + [% ELSIF category_extras.$category.size %] + <p data-category="[% category | html %]" class="hidden"> + [% INCLUDE 'report/new/category_extras_fields.html' report_meta='' %] + </p> + [% END %] + [% END %] + + [% IF permissions.report_inspect %] <p> - [% SET local_coords = problem.local_coords; %] - <strong>[% loc('Easting/Northing:') %]</strong> - <span id="problem_easting">[% local_coords.0 IF local_coords %]</span>, - <span id="problem_northing">[% local_coords.1 IF local_coords %]</span> - <input type="hidden" name="longitude" value="[% problem.longitude %]"> - <input type="hidden" name="latitude" value="[% problem.latitude %]"> - </p> - <p style="clear:both;"> - <a href="#" id="geolocate_link">[% loc('Use my current location') %]</a>, - [% loc('or drag the pin on the map') %] » + <label for="state">[% loc('State') %]</label> + [%# XXX this is duplicated from admin/report_edit.html, should be refactored %] + <select name="state" id="state" class="form-control"> + [% FOREACH group IN state_groups %] + <optgroup label="[% group.0 %]"> + [% FOREACH state IN group.1 %] + <option [% 'selected ' IF state == problem.state %] value="[% state %]">[% state_pretty.$state %]</option> + [% END %] + </optgroup> + [% END %] + </select> </p> + [% END %] -[% IF permissions.report_inspect %] + </div> + [% END %] + + [% IF permissions.report_edit_priority OR permissions.report_inspect %] + <div class="inspect-section"> <p> - <label for="detailed_information">[% loc('Detailed problem location:') %]</label> - <textarea rows="2" name="detailed_location">[% problem.get_extra_metadata('detailed_location') | html %]</textarea> + <label for="problem_priority">[% loc('Priority') %]</label> + <select name="priority" id="problem_priority" class="form-control"> + <option value="" [% 'selected' UNLESS problem.response_priority_id %]>-</option> + [% FOREACH priority IN problem.response_priorities %] + <option value="[% priority.id %]" [% 'selected' IF problem.response_priority_id == priority.id %] [% 'disabled' IF priority.deleted %]>[% priority.name %]</option> + [% END %] + </select> </p> + + [% IF permissions.report_inspect %] <p> - <label for="detailed_information">[% loc('Detailed problem information:') %]</label> - <textarea rows="2" name="detailed_information">[% problem.get_extra_metadata('detailed_information') | html %]</textarea> + <label for="traffic_information">[% loc('Traffic management required?') %]</label> + [% traffic_info = problem.get_extra_metadata('traffic_information') %] + <select id="traffic_information" name="traffic_information" class="form-control"> + <option value=""[% ' selected' IF NOT traffic_info %]>-</option> + <option[% ' selected' IF traffic_info == "Yes" %]>Yes</option> + <option[% ' selected' IF traffic_info == "No" %]>No</option> + </select> </p> <p> - <label for="traffic_information">[% loc('Traffic management information:') %]</label> - <textarea rows="2" name="traffic_information">[% problem.get_extra_metadata('traffic_information') | html %]</textarea> + <label for="detailed_information">[% loc('Extra details') %]</label> + <textarea rows="2" name="detailed_information" id="detailed_information" class="form-control">[% problem.get_extra_metadata('detailed_information') | html %]</textarea> </p> -[% END %] + [% END %] - <p> - <input type="hidden" name="token" value="[% csrf_token %]"> - <a href="[% c.uri_for( '/report', problem.id ) %]" class="btn">[% loc('Cancel') %]</a> - <input type="submit" value="[% loc('Save changes') %]" name="save" /> - </p> -[% IF permissions.report_inspect %] - [% UNLESS problem.get_extra_metadata('inspected') %] - <p> - <label for="public_update">[% loc('Public update:') %]</label> - [% INCLUDE 'admin/response_templates_select.html' for='public_update' %] - <textarea rows="2" name="public_update" id="public_update" required>[% public_update | html %]</textarea> - </p> + </div> + [% END %] + + <div class="inspect-section"> + + [% IF permissions.report_inspect %] <p> - <input type="submit" value="[% loc('Save changes + send') %]" name="save_inspected" /> + <label class="label-containing-checkbox"> + <input type="checkbox" name="save_inspected" value="1" class="js-toggle-public-update" [% 'checked' IF save_inspected %]> + [% loc('Save with a public update') %] + </label> </p> - [% ELSE %] <p> - [% IF problem.whensent %] - [% loc("<strong>Note:</strong> This report has been sent onwards for action. Any changes made won't be passed on.") %] - [% ELSE %] - [% loc("<strong>Note:</strong> This report hasn't yet been sent onwards for action. Any changes made may not be passed on.") %] - [% END %] + <label for="public_update">[% loc('Public update:') %]</label> + [% INCLUDE 'admin/response_templates_select.html' for='public_update' %] + <textarea rows="2" name="public_update" id="public_update" class="form-control">[% public_update | html %]</textarea> </p> [% END %] -[% END %] - </form> - </div> + + [% IF problem.get_extra_metadata('inspected') %] + [% IF problem.whensent %] + <p>[% loc("<strong>Note:</strong> This report has been sent onwards for action. Any changes made won't be passed on.") %]</p> + [% ELSE %] + <p>[% loc("<strong>Note:</strong> This report hasn't yet been sent onwards for action. Any changes made may not be passed on.") %]</p> + [% END %] + [% END %] + + <p> + <input type="hidden" name="token" value="[% csrf_token %]"> + <a class="btn" href="[% c.uri_for( '/report', problem.id ) %]">[% loc('Cancel') %]</a> + <input class="btn btn-primary" type="submit" value="[% loc('Save changes') %]" name="save" /> + </p> + </div> + + </form> </div> [%- END %] diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html index 7dfaf979e..469ee5bc5 100644 --- a/templates/web/base/report/_main.html +++ b/templates/web/base/report/_main.html @@ -46,7 +46,7 @@ Revert to original title </label> [% END %] - <h1><input type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1> + <h1><input class="form-control" type="text" name="problem_title" value="[% problem.title | html %]" data-original-value="[% original.title | html %]"></h1> </div> [% END %] @@ -91,7 +91,7 @@ Revert to original text </label> [% END %] - <textarea name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea> + <textarea class="form-control" name="problem_detail" data-original-value="[% original.detail | html %]">[% problem.detail | html %]</textarea> </p> <div class="moderate-edit"> @@ -103,7 +103,7 @@ </p> <p> <label for="moderation_reason">Moderation reason:</label> - <input type="text" name="moderation_reason" placeholder="Describe why you are moderating this"> + <input type="text" class="form-control" name="moderation_reason" placeholder="Describe why you are moderating this"> </p> <p> <input type="submit" class="green-btn" value="Save changes"> @@ -126,10 +126,10 @@ %] <div class="moderate-display segmented-control" role="menu"> [% IF permissions.moderate %] - <a class="js-moderate" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a> + <a class="js-moderate btn" role="menuitem" aria-label="[% loc('Moderate this report') %]">[% loc('Moderate') %]</a> [% END %] [% IF !hide_inspect_button AND permissions.keys.grep('report_inspect|report_edit_category|report_edit_priority').size %] - <a href="/report/[% problem.id %]/inspect" role="menuitem"> + <a class="btn" href="/report/[% problem.id %]/inspect#side-inspect" role="menuitem"> [%~ IF permissions.report_inspect ~%] [%~ loc('Inspect') ~%] [%~ ELSE ~%] @@ -139,9 +139,9 @@ [% END %] [% IF c.user.has_permission_to('planned_reports', problem.bodies_str_ids) %] [%~ IF c.user.is_planned_report(problem) ~%] - <label for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label> + <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Remove from shortlist') %]">[% loc('Shortlisted') %]</label> [%~ ELSE ~%] - <label for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label> + <label class="btn" for="shortlist-report" role="menuitem" aria-label="[% loc('Add to shortlist') %]">[% loc('Shortlist') %]</label> [%~ END ~%] [% END %] </div> diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html index fb8cd8191..1ee5c4636 100644 --- a/templates/web/base/report/display.html +++ b/templates/web/base/report/display.html @@ -14,6 +14,11 @@ </div> <div id="map_sidebar"> + +[% IF two_column_sidebar %] + <div class="two_column_sidebar"> +[% END %] + <div id="side-report"> [% IF login_success %] @@ -47,6 +52,11 @@ </div> [% second_column %] + +[% IF two_column_sidebar %] + </div> +[% END %] + </div> [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html index f12e9dbc7..f27ed8da5 100644 --- a/templates/web/base/report/display_tools.html +++ b/templates/web/base/report/display_tools.html @@ -3,7 +3,7 @@ [% IF c.user_exists AND c.cobrand.users_can_hide AND c.user.belongs_to_body( problem.bodies_str ) %] <li><form method="post" action="/report/delete/[% problem.id %]" id="remove-from-site-form"> <input type="hidden" name="token" value="[% csrf_token %]"> - <input type="submit" id="key-tool-report-abuse" class="abuse" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site" value="[% loc('Remove from site') %]"> + <input type="submit" id="key-tool-report-abuse" class="abuse btn" data-confirm="[% loc('Are you sure?') %]" name="remove_from_site" value="[% loc('Remove from site') %]"> </form></li> [% ELSIF c.cobrand.moniker != 'zurich' %] <li><a rel="nofollow" id="key-tool-report-abuse" class="abuse" href="[% c.uri_for( '/contact', { id => problem.id } ) %]">[% loc('Report abuse' ) %]</a></li> @@ -44,7 +44,7 @@ <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label> <div class="form-txt-submit-box"> [% IF NOT c.user_exists %] - <input type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30" placeholder="[% loc('Your email') %]"> + <input type="email" class="form-control" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30" placeholder="[% loc('Your email') %]"> [% END %] <input class="green-btn" type="submit" value="[% loc('Subscribe') %]"> </div> diff --git a/templates/web/base/report/inspect.html b/templates/web/base/report/inspect.html index 0a3fdcbb2..f4a9e4c46 100644 --- a/templates/web/base/report/inspect.html +++ b/templates/web/base/report/inspect.html @@ -1,5 +1,6 @@ [% SET bodyclass = 'mappage with-actions'; + SET two_column_sidebar = 1; PROCESS 'report/_inspect.html'; SET shown_form = 1 UNLESS problem.get_extra_metadata('inspected'); INCLUDE 'report/display.html', hide_inspect_button = 1; diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html index 6b01f93e0..084dd2d93 100644 --- a/templates/web/base/report/new/category_extras.html +++ b/templates/web/base/report/new/category_extras.html @@ -15,25 +15,7 @@ list_of_names.join( '</strong>' _ loc(' or ') _ '<strong>' ) ); %] </p> - [%- FOR meta IN category_extras.$category %] - [%- meta_name = meta.code -%] - - <label for="form_[% meta_name %]">[% meta.description %]</label> - [% IF field_errors.$meta_name %] - <p class='form-error'>[% field_errors.$meta_name %]</p> - [% END -%] - [% IF meta.variable != 'false' %] - [% IF meta.exists('values') %] - <select class="form-control" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]> - [% FOR option IN meta.values %] - <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option> - [% END %] - </select> - [% ELSE %] - <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]> - [% END %] - [% END %] - [%- END %] + [% INCLUDE 'report/new/category_extras_fields.html' %] </div> [%- END %] </div> diff --git a/templates/web/base/report/new/category_extras_fields.html b/templates/web/base/report/new/category_extras_fields.html new file mode 100644 index 000000000..ec72ee7f3 --- /dev/null +++ b/templates/web/base/report/new/category_extras_fields.html @@ -0,0 +1,19 @@ +[%- FOR meta IN category_extras.$category %] + [%- meta_name = meta.code -%] + + <label for="[% cat_prefix %]form_[% meta_name %]">[% meta.description %]</label> + [% IF field_errors.$meta_name %] + <p class='form-error'>[% field_errors.$meta_name %]</p> + [% END -%] + [% IF meta.variable != 'false' %] + [% IF meta.exists('values') %] + <select class="form-control" name="[% cat_prefix %][% meta_name %]" id="[% cat_prefix %]form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]> + [% FOR option IN meta.values %] + <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option> + [% END %] + </select> + [% ELSE %] + <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% cat_prefix %][% meta_name %]" id="[% cat_prefix %]form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]> + [% END %] + [% END %] +[%- END %] diff --git a/templates/web/base/report/update.html b/templates/web/base/report/update.html index 1a30a48f1..7c2c39eb2 100644 --- a/templates/web/base/report/update.html +++ b/templates/web/base/report/update.html @@ -39,7 +39,7 @@ <label><input type="checkbox" name="update_revert_detail" class="revert-textarea"> Revert to original</label> [% END %] - <textarea name="update_detail">[% update.text | add_links %]</textarea> + <textarea class="form-control" name="update_detail">[% update.text | add_links %]</textarea> </div> [% END %] @@ -55,7 +55,7 @@ [% IF moderating %] <div class="moderate-edit"> <label for="moderation_reason">Moderation reason:</label> - <input type="text" name="moderation_reason" + <input type="text" class="form-control" name="moderation_reason" placeholder="Describe why you are moderating this"> <input type="submit" class="red-btn" value="Save changes"> <input type="button" class="btn cancel" value="Discard changes"> diff --git a/templates/web/base/report/update/form_update.html b/templates/web/base/report/update/form_update.html index 55125ba4b..a3d4615e1 100644 --- a/templates/web/base/report/update/form_update.html +++ b/templates/web/base/report/update/form_update.html @@ -33,11 +33,11 @@ [% IF field_errors.update %] <div class='form-error'>[% field_errors.update %]</div> [% END %] -<textarea rows="7" cols="30" name="update" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea> +<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea> [% IF c.user && c.user.belongs_to_body( problem.bodies_str ) %] <label for="form_state">[% loc( 'State' ) %]</label> - <select name="state" id="form_state"> + <select name="state" id="form_state" class="form-control"> [% FOREACH state IN [ ['confirmed', loc('Open')], ['investigating', loc('Investigating')], ['action scheduled', loc('Action Scheduled')], ['in progress', loc('In Progress')], ['duplicate', loc('Duplicate')], diff --git a/templates/web/base/report/update/form_user_loggedout_by_email.html b/templates/web/base/report/update/form_user_loggedout_by_email.html index aae37502b..04a842bef 100644 --- a/templates/web/base/report/update/form_user_loggedout_by_email.html +++ b/templates/web/base/report/update/form_user_loggedout_by_email.html @@ -2,7 +2,7 @@ <h5>[% loc('<strong>No</strong> Let me confirm my update by email') %]</h5> [% INCLUDE 'report/update/form_name.html' %] - + <label for="password_register">[% loc('Password (optional)') %]</label> <div class="general-notes"> @@ -10,7 +10,7 @@ </div> <div class="form-txt-submit-box"> - <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input type="password" class="form-control" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]"> </div> diff --git a/templates/web/base/report/update/form_user_loggedout_password.html b/templates/web/base/report/update/form_user_loggedout_password.html index 593ccf3de..d24f8bd15 100644 --- a/templates/web/base/report/update/form_user_loggedout_password.html +++ b/templates/web/base/report/update/form_user_loggedout_password.html @@ -6,7 +6,7 @@ <p class='form-error'>[% field_errors.password %]</p> [% END %] <div class="form-txt-submit-box"> - <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> + <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Post') %]"> </div> diff --git a/templates/web/base/reports/_list-filters.html b/templates/web/base/reports/_list-filters.html index 0a36d8486..e0452eb08 100644 --- a/templates/web/base/reports/_list-filters.html +++ b/templates/web/base/reports/_list-filters.html @@ -1,5 +1,5 @@ [% select_status = BLOCK %] - <select name="status" id="statuses"> + <select class="form-control" name="status" id="statuses"> <option value="all"[% ' selected' IF filter_status == 'all' %]>[% loc('all reports') %]</option> <option value="open"[% ' selected' IF filter_status == 'open' %]>[% loc('unfixed reports') %]</option> <option value="closed"[% ' selected' IF filter_status == 'closed' %]>[% loc('closed reports') %]</option> @@ -8,7 +8,7 @@ [% END %] [% select_category = BLOCK %] - <select name="filter_category" id="filter_categories"> + <select class="form-control" name="filter_category" id="filter_categories"> <option value="">[% loc('Everything') %]</option> [% FOR category IN filter_categories %] <option value="[% category | html %]"[% ' selected' IF filter_category == category %]> diff --git a/templates/web/fixamingata/report/new/form_user_loggedout.html b/templates/web/fixamingata/report/new/form_user_loggedout.html index c391ce75f..7d5b0bf39 100644 --- a/templates/web/fixamingata/report/new/form_user_loggedout.html +++ b/templates/web/fixamingata/report/new/form_user_loggedout.html @@ -18,7 +18,7 @@ <p class='form-error'>[% field_errors.name %]</p> [% END %] - <input type="text" class="form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + <input type="text" class="form-control form-focus-trigger validName js-form-name" 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 %] <div class="checkbox-group"> @@ -27,7 +27,7 @@ </div> <label for="form_phone">[% loc('Phone number (optional)') %]</label> - <input type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> + <input type="text" class="form-control" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> <div class="general-notes form-focus-hidden"> <p>[% loc('We never show your email address or phone number.') %]</p> @@ -40,7 +40,7 @@ </div> <div class="form-txt-submit-box"> - <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input type="password" class="form-control" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]"> </div> </div> @@ -53,10 +53,10 @@ [% IF field_errors.password %] <p class='form-error'>[% field_errors.password %]</p> [% END %] - <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> </div> - + <div class="checkbox-group"> <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> diff --git a/templates/web/seesomething/admin/stats.html b/templates/web/seesomething/admin/stats.html index 4cf184f4f..155bff472 100644 --- a/templates/web/seesomething/admin/stats.html +++ b/templates/web/seesomething/admin/stats.html @@ -9,24 +9,24 @@ <form method="post" action="[% c.uri_for('stats') %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8" id="filter-form"> <label for="form_category">Transport Type: </label> - <select name="category" id="form_category"> + <select class="form-control" name="category" id="form_category"> <option value="">Select</option> [% PROCESS options, option_list = [ 'Bus', 'Metro', 'Train' ], selected = category %] </select> <label for="form_subcategory">Incident Type: </label> - <select name="subcategory" id="form_subcategory"> + <select class="form-control" name="subcategory" id="form_subcategory"> <option value="">Select</option> [% PROCESS options, option_list = ['Smoking', 'Drugs', 'Anti-social Behaviour', 'Loud Music', 'Damage', 'Feet on Seats', 'Other'], selected = subcategory %] </select> <label for="form_service">Device: </label> - <select name="service" id="form_service"> + <select class="form-control" name="service" id="form_service"> <option value="">Select</option> [% PROCESS options, option_list = [ 'Android', 'iPhone' ], selected = service %] </select> - <input type="submit" name="getcounts" size="30" id="getcounts" value="Look Up" /> + <input type="submit" class="btn" name="getcounts" size="30" id="getcounts" value="Look Up" /> </form> [% IF pager.total_entries == 0 %] diff --git a/templates/web/seesomething/auth/general.html b/templates/web/seesomething/auth/general.html index 4fe2829d3..09639d15b 100644 --- a/templates/web/seesomething/auth/general.html +++ b/templates/web/seesomething/auth/general.html @@ -23,11 +23,11 @@ [% ELSIF sign_in_error %] <div class="form-error">[% loc('There was a problem with your email/password combination. If you cannot remember your password, or do not have one, please fill in the ‘sign in by email’ section of the form.') %]</div> [% END %] - <input type="email" class="required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]"> + <input type="email" class="form-control required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]"> <div class="form-txt-submit-box"> <label class="n" for="password_sign_in">Password</label> - <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> + <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]"> </div> <div class="form-txt-submit-box"> diff --git a/templates/web/seesomething/report/new/fill_in_details_form.html b/templates/web/seesomething/report/new/fill_in_details_form.html index 54977f141..21b51384b 100644 --- a/templates/web/seesomething/report/new/fill_in_details_form.html +++ b/templates/web/seesomething/report/new/fill_in_details_form.html @@ -17,12 +17,12 @@ [% IF field_errors.detail %] <p class='form-error'>[% field_errors.detail %]</p> [% END %] - <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea> + <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea> [% IF js %] <div id="form_category_row"> <label for="form_category">[% loc('Transport Category') %]</label> - <select name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select> + <select class="form-control" name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select> </div> [% ELSE %] [% IF category_options.size %] @@ -36,7 +36,7 @@ <div id="form_subcategory_row"> <label for="form_subcategory">[% loc('Incident Category') %]</label> - <select name="subcategory" id="form_subcategory" required> + <select class="form-control" name="subcategory" id="form_subcategory" required> <option value="">-- Pick a category --</option> <option value="Smoking/other drugs">Smoking/other drugs</option> <option value="Drugs">Drugs</option> @@ -78,18 +78,18 @@ <p class='form-error'>[% field_errors.name %]</p> [% END %] - <input type="text" class="form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> <label for="form_email">[% loc('Your email (optional)') %]</label> [% IF field_errors.email %] <p class='form-error'>[% field_errors.email %]</p> [% END %] - <input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]"> + <input type="email" class="form-control" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]"> - <label class="" for="form_phone">[% loc('Phone number (optional)') %]</label> - <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> + <label for="form_phone">[% loc('Phone number (optional)') %]</label> + <input type="text" class="form-control" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> <div class="form-txt-submit-box "> <input class="green-btn" type="submit" id="submit_noname" name="submit_noname" value="[% loc('Submit') %]"> diff --git a/templates/web/zurich/admin/body-form.html b/templates/web/zurich/admin/body-form.html index 966bdf799..de9fac0e2 100644 --- a/templates/web/zurich/admin/body-form.html +++ b/templates/web/zurich/admin/body-form.html @@ -2,17 +2,17 @@ <p> <label for="name">[% loc('Name') %]</label> - <input type="text" name="name" id="name" value="[% body.name %]" size="50"> + <input type="text" class="form-control" name="name" id="name" value="[% body.name %]" size="50"> </p> <p> <label for="email">[% loc('Email') %]</label> - <input type="text" name="endpoint" id="email" value="[% body.endpoint %]" size="50"> + <input type="text" class="form-control" name="endpoint" id="email" value="[% body.endpoint %]" size="50"> </p> <p> <label for="parent">[% loc('Parent') %]</label> - <select name="parent" id="parent"> + <select class="form-control" name="parent" id="parent"> <option value=""> -- [% loc('Select a body') %] -- </option> [% FOR b IN bodies %] <option value="[% b.id %]"[% ' selected' IF body.parent.id == b.id %]>[% b.name %]</option> @@ -22,7 +22,7 @@ <p> <label for="area_ids">[% loc('Area covered') %]</label> - <select name="area_ids" id="area_ids" multiple> + <select class="form-control" name="area_ids" id="area_ids" multiple> <option value=""> -- [% loc('Select an area') %] -- </option> [% SET body_areas = body.areas %] [% FOR area IN areas %] @@ -49,7 +49,7 @@ <input type="hidden" name="posted" value="body"> <input type="hidden" name="token" value="[% csrf_token %]"> <p> - <input type="submit" value="[% body ? loc('Update body') : loc('Add body') %]"> + <input type="submit" class="btn" value="[% body ? loc('Update body') : loc('Add body') %]"> </p> </form> diff --git a/templates/web/zurich/admin/body.html b/templates/web/zurich/admin/body.html index 1a156773d..435f42885 100644 --- a/templates/web/zurich/admin/body.html +++ b/templates/web/zurich/admin/body.html @@ -40,23 +40,26 @@ <form method="post" action="[% c.uri_for('body', body_id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8"> <p> - <strong>[% loc('Category:') %] </strong><input type="text" name="category" size="30" value="[% contact.category | html %]"> + <strong>[% loc('Category:') %] </strong> + <input type="text" class="form-control" name="category" size="30" value="[% contact.category | html %]"> </p> <p> - <strong>[% loc('Email:') %] </strong><input type="text" name="email" size="30" value="[% contact.email | html %]"> + <strong>[% loc('Email:') %] </strong> + <input type="text" class="form-control" name="email" size="30" value="[% contact.email | html %]"> </p> - <input type="hidden" name="confirmed" value="1" id="confirmed"> + <input type="hidden" name="confirmed" value="1" id="confirmed"> <p> - <strong>[% loc('Note:') %] </strong> <textarea name="note" rows="3" cols="40"></textarea> + <strong>[% loc('Note:') %] </strong> + <textarea class="form-control" name="note" rows="3" cols="40"></textarea> </p> <p> <input type="hidden" name="posted" value="new" > <input type="hidden" name="token" value="[% csrf_token %]" > - <input type="submit" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]"> + <input type="submit" class="btn" name="Create category" value="[% errors ? loc('Save changes') : loc('Create category') %]"> </p> <div> diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html index 509ddfd7c..3df9459f9 100644 --- a/templates/web/zurich/admin/report_edit-sdm.html +++ b/templates/web/zurich/admin/report_edit-sdm.html @@ -101,28 +101,28 @@ <div class="admin-report-edit admin-report-edit--interact"> -<p align="right" class="screen-only"><input type="submit" name="send_back" value="[% loc('Not for my subdivision') %]"></p> -<p align="right" class="screen-only"><input type="submit" name="not_contactable" value="[% loc('Customer not contactable') %]"></p> +<p align="right" class="screen-only"><input type="submit" class="btn" name="send_back" value="[% loc('Not for my subdivision') %]"></p> +<p align="right" class="screen-only"><input type="submit" class="btn" name="not_contactable" value="[% loc('Customer not contactable') %]"></p> <ul class="no-bullets screen-only"> <li> <label for="new_internal_note">[% loc('New internal note:') %]</label> - <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea> + <textarea class="form-control" name='new_internal_note' id='new_internal_note' cols=60 rows=4></textarea> </li> <li> <label for="status_update">[% loc('New note to DM:') %]</label> - <textarea name='status_update' id='status_update' cols=60 rows=4></textarea> + <textarea class="form-control" name='status_update' id='status_update' cols=60 rows=4></textarea> </li> </ul> <p class="screen-only"> <label for="time_spent">[% loc('Time spent (in minutes):') %]</label> - <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0"> + <input type="text" class="form-control" name="time_spent" id="form_time_spent" style="width: 4em" value="0"> </p> <p class="clearfix screen-only"> - <input style="float:left" type="submit" name="Submit changes" value="[% loc('Submit changes') %]" > - <input style="float:right" type="submit" name="no_more_updates" value="[% loc('No further updates') %]"> + <input style="float:left" type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" > + <input style="float:right" type="submit" class="btn" name="no_more_updates" value="[% loc('No further updates') %]"> </p> [% INCLUDE 'admin/list_updates.html' %] diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html index 4ef55e75a..ec65cf99f 100644 --- a/templates/web/zurich/admin/report_edit.html +++ b/templates/web/zurich/admin/report_edit.html @@ -39,11 +39,11 @@ [% ELSE %] <dt><label for='title'>[% loc('Subject:') %]</label></dt> - <dd class="screen-only"><input size=60 type='text' id='title' name='title' value='[% problem.title | html %]'></dd> + <dd class="screen-only"><input size=60 type='text' class="form-control" id='title' name='title' value='[% problem.title | html %]'></dd> <dd class="print-only">[% problem.title | html %]</dd> <dt><label for='detail'>[% loc('Details:') %]</label></dt> - <dd class="screen-only"><textarea name='detail' id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea></dd> + <dd class="screen-only"><textarea name='detail' class="form-control" id='detail' cols=60 rows=4>[% problem.detail | html %]</textarea></dd> <dd class="print-only">[% problem.detail | html %]</dd> [% IF problem.extra.original_detail %] @@ -137,21 +137,21 @@ <label for="new_internal_note">[% loc('New internal note:') %]</label> </dt> <dd class="screen-only"> - <textarea name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea> + <textarea class="form-control" name='new_internal_note' id='new_internal_note' cols=60 rows=4>[% new_internal_note | html %]</textarea> </dd> <dt class="screen-only"> <label for="time_spent">[% loc('Time spent (in minutes):') %]</label> </dt> <dd class="screen-only"> - <input type="text" name="time_spent" id="form_time_spent" style="width: 4em" value="0"> + <input type="text" class="form-control" name="time_spent" id="form_time_spent" style="width: 4em" value="0"> </dd> <dt class="screen-only"> <span class="mock-label">[% loc('State:') %]</span> </dt> <dd class="screen-only"> - <select name="state" id="state" data-pstate="[% pstate %]"> + <select class="form-control" name="state" id="state" data-pstate="[% pstate %]"> <option value="">--</option> [% FOREACH s IN states %] <option [% 'selected ' IF s.state == pstate %] value="[% s.state %]">[% s.trans %]</option> @@ -167,7 +167,7 @@ <li class="assignation"> <div id="assignation__category"> <label for="category">[% loc('Assign to different category:') %]</label> - <select name="category" id="category"> + <select class="form-control" name="category" id="category"> <option value="">--</option> [% FOREACH cat IN categories %] <option value="[% cat %]">[% cat %]</option> @@ -184,7 +184,7 @@ [% IF admin_type != 'super' AND list %] <li class="assignation" id="assignation__subdivision"> <label for="body_subdivision">[% loc('Assign to subdivision:') %]</label> - <select name="body_subdivision" id="body_subdivision" class="assignation__select"> + <select name="body_subdivision" id="body_subdivision" class="form-control assignation__select"> <option value="">--</option> [% list %] </select> @@ -209,7 +209,7 @@ [% loc('Assign to competent body:') %] [% END %] </label> - <select name="body_external" id="body_external"> + <select class="form-control" name="body_external" id="body_external"> <option value="">--</option> [% FOR body IN bodies %] [% NEXT IF body.parent OR body.bodies OR body.deleted %] @@ -225,7 +225,7 @@ </li> <li> [% INCLUDE 'admin/response_templates_select.html' for='external_body' %] - <textarea name='external_message' id='external_body' cols=60 rows=5>[% problem.get_extra_metadata('external_message') | html %]</textarea> + <textarea class="form-control" name='external_message' id='external_body' cols=60 rows=5>[% problem.get_extra_metadata('external_message') | html %]</textarea> </li> </ul> [% END %] @@ -242,7 +242,7 @@ [% END %] </label> [% INCLUDE 'admin/response_templates_select.html' for='status_update' %] - <textarea name='status_update' id='status_update' cols=60 rows=5> + <textarea class="form-control" name='status_update' id='status_update' cols=60 rows=5> [%- problem.extra.public_response || default_public_response | html -%] </textarea> </li> @@ -256,12 +256,12 @@ # only a private email will be sent to the user. However, in all cases, # this is the end of processing, so we mark this with the same text used # for 'No further updates %] - <input type="submit" name="publish_response" value="[% loc('No further updates') %]"> + <input type="submit" class="btn" name="publish_response" value="[% loc('No further updates') %]"> [% END %] [%# This button simply saves changes, but does NOT close the report (though # it may trigger other workflow %] - <input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" > + <input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" > </p> [% IF c.cobrand.problem_has_public_response(problem) || c.cobrand.problem_has_user_response(problem) %] diff --git a/templates/web/zurich/admin/stats.html b/templates/web/zurich/admin/stats.html index fa8104496..ce8e238f7 100644 --- a/templates/web/zurich/admin/stats.html +++ b/templates/web/zurich/admin/stats.html @@ -9,7 +9,7 @@ [% END %] <form method="get" action="[% c.uri_for('stats') %]"> -<p><select name="ym"> +<p><select class="form-control" name="ym"> <option value="">[% loc('All reports') %]</option> [% FOR y IN [ 2013 .. date.format(date.now, '%Y') ]; SET max = 12; @@ -23,7 +23,7 @@ [% END %] </select> -<input type="submit" value="[% loc('Go') %]"> +<input type="submit" class="btn" value="[% loc('Go') %]"> </form> <ul> diff --git a/templates/web/zurich/admin/template_edit.html b/templates/web/zurich/admin/template_edit.html index dbad55f08..e954d566c 100644 --- a/templates/web/zurich/admin/template_edit.html +++ b/templates/web/zurich/admin/template_edit.html @@ -18,19 +18,19 @@ <p> <strong>[% loc('Title:') %] </strong> - <input type="text" name="title" class="required" size="30" value="[% rt.title| html %]"> + <input type="text" name="title" class="form-control required" size="30" value="[% rt.title| html %]"> </p> <p> <strong>[% loc('Text:') %] </strong> - <textarea name="text" class="required">[% rt.text |html %]</textarea> + <textarea name="text" class="form-control required">[% rt.text |html %]</textarea> </p> <p> <input type="hidden" name="token" value="[% csrf_token %]" > - <input type="submit" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" > + <input type="submit" class="btn" name="Edit templates" value="[% rt.id ? loc('Save changes') : loc('Create template') %]" > </p> [% IF rt.id %] <p> - <input class="delete" type="submit" name="delete_template" value="[% loc('Delete template') %]"> + <input class="delete btn-danger" type="submit" name="delete_template" value="[% loc('Delete template') %]"> </p> [% END %] </form> diff --git a/templates/web/zurich/admin/update_edit.html b/templates/web/zurich/admin/update_edit.html index adafff3a8..b2cde0b92 100644 --- a/templates/web/zurich/admin/update_edit.html +++ b/templates/web/zurich/admin/update_edit.html @@ -10,11 +10,11 @@ <li><a href="[% c.uri_for_email( '/report', update.problem_id ) %]#update_[% update.id %]">[% loc('View report on site' )%]</a></li> <li><label for='detail'>[% loc('Text:') %]</label> -<textarea name='text' id='text' cols=60 rows=5>[% update.text | html %]</textarea></li> +<textarea class="form-control" name='text' id='text' cols=60 rows=5>[% update.text | html %]</textarea></li> <input type="hidden" name="anonymous" value="[% update.anonymous %]"> -<li>[% loc('State:') %] <select name="state" id="state"> +<li>[% loc('State:') %] <select class="form-control" name="state" id="state"> [% FOREACH state IN [ ['confirmed', loc('Open')], ['hidden', loc('Hidden')], ['unconfirmed',loc('Unconfirmed')] ] %] <option [% 'selected ' IF state.0 == update.state %] value="[% state.0 %]">[% state.1 %]</option> [% END %] @@ -35,6 +35,6 @@ <label for="remove_photo" class="inline">[% loc("Remove photo (can't be undone!)") %]</label></li> [% END %] </ul> -<input type="submit" name="Submit changes" value="[% loc('Submit changes') %]" ></form> +<input type="submit" class="btn" name="Submit changes" value="[% loc('Submit changes') %]" ></form> [% INCLUDE 'admin/footer.html' %] diff --git a/web/cobrands/fixmystreet.com/base.scss b/web/cobrands/fixmystreet.com/base.scss index 869654b87..905f20f41 100644 --- a/web/cobrands/fixmystreet.com/base.scss +++ b/web/cobrands/fixmystreet.com/base.scss @@ -152,6 +152,19 @@ } } +.btn-primary { + @include button-reset( + mix($primary, #fff, 50%), + $primary, + mix($primary, #ccc, 30%), + inherit, + darken($primary, 3%), + darken(mix($primary, #fff, 50%), 3%), + mix($primary, #ccc, 30%), + inherit + ); +} + .variant1 { #site-header { border-top-color: #fff; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 9b78ca580..4aeb14d88 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -370,7 +370,9 @@ $.extend(fixmystreet.set_up, { }, category_change: function() { - // Deal with changes to category by asking for details from the server. + // Deal with changes to report category. + + // On the new report form, does this by asking for details from the server. // Delegation is necessary because #form_category may be replaced during the lifetime of the page $("#problem_form").on("change.category", "select#form_category", function(){ var args = { @@ -395,8 +397,18 @@ $.extend(fixmystreet.set_up, { } }); }); + + // On the manage/inspect report form, we already have all the extra inputs + // in the DOM, we just need to hide/show them as appropriate. + $('form#report_inspect_form [name=category]').change(function() { + var category = $(this).val(); + var selector = "[data-category='"+category+"']"; + $("form#report_inspect_form [data-category]:not("+selector+")").addClass("hidden"); + $("form#report_inspect_form "+selector).removeClass("hidden"); + }); }, + contribute_as: function() { $('.content').on('change', '.js-contribute-as', function(){ var opt = this.options[this.selectedIndex], @@ -426,6 +438,25 @@ $.extend(fixmystreet.set_up, { $('.js-contribute-as').change(); }, + inspect_with_public_update: function() { + $('.js-toggle-public-update').each(function() { + var $checkbox = $(this); + var toggle_public_update = function() { + if ($checkbox.prop('checked')) { + $('#public_update').parents('p').show(); + } else { + $('#public_update').parents('p').hide(); + } + }; + + $checkbox.on('change', function() { + toggle_public_update(); + }); + + toggle_public_update(); + }); + }, + on_resize: function() { var last_type; $(window).on('resize', function() { diff --git a/web/cobrands/fixmystreet/images/crosshairs.png b/web/cobrands/fixmystreet/images/crosshairs.png Binary files differnew file mode 100644 index 000000000..e3f216814 --- /dev/null +++ b/web/cobrands/fixmystreet/images/crosshairs.png diff --git a/web/cobrands/fixmystreet/images/crosshairs.svg b/web/cobrands/fixmystreet/images/crosshairs.svg new file mode 100644 index 000000000..80b5172c6 --- /dev/null +++ b/web/cobrands/fixmystreet/images/crosshairs.svg @@ -0,0 +1 @@ +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-crosshairs</title><path d="M13.013 8.48c-.242 2.344-2.117 4.204-4.475 4.445V9.977H7.534v2.953c-2.375-.225-4.268-2.095-4.512-4.45h3.005v-.997H3.02C3.246 5.113 5.146 3.227 7.533 3v2.986h1.004V3.003c2.37.243 4.25 2.12 4.478 4.48h-2.97v.998h2.967zm1.008-.997c-.232-2.91-2.558-5.232-5.482-5.48V0H7.534v2.002c-2.942.233-5.285 2.56-5.52 5.48H0v1h2.017c.25 2.904 2.587 5.214 5.517 5.446V16h1.004v-2.074c2.912-.247 5.232-2.55 5.48-5.445H16v-.997h-1.98z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/crosshairs@2x.png b/web/cobrands/fixmystreet/images/crosshairs@2x.png Binary files differnew file mode 100644 index 000000000..c7caa518a --- /dev/null +++ b/web/cobrands/fixmystreet/images/crosshairs@2x.png diff --git a/web/cobrands/fixmystreet/images/navigate.png b/web/cobrands/fixmystreet/images/navigate.png Binary files differnew file mode 100644 index 000000000..c37331e0d --- /dev/null +++ b/web/cobrands/fixmystreet/images/navigate.png diff --git a/web/cobrands/fixmystreet/images/navigate.svg b/web/cobrands/fixmystreet/images/navigate.svg new file mode 100644 index 000000000..a00b08825 --- /dev/null +++ b/web/cobrands/fixmystreet/images/navigate.svg @@ -0,0 +1 @@ +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><title>icon-navigate</title><path d="M15.348.002c-.072.007-.142.026-.206.057L.342 7.057c-.216.103-.35.324-.342.562.008.24.158.45.38.538l5.356 2.106 2.106 5.356c.088.222.3.372.538.38.238.008.46-.126.562-.342l7-14.8c.092-.194.074-.423-.05-.6-.122-.177-.33-.274-.544-.256zm-2.82 2.62L6.055 9.095 2.11 7.546 12.53 2.62zm.857.836l-4.937 10.43-1.55-3.942 6.487-6.488z" fill="#000" fill-rule="evenodd"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/navigate@2x.png b/web/cobrands/fixmystreet/images/navigate@2x.png Binary files differnew file mode 100644 index 000000000..1ea3659eb --- /dev/null +++ b/web/cobrands/fixmystreet/images/navigate@2x.png diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss index 12f92b531..955c341bf 100644 --- a/web/cobrands/oxfordshire/base.scss +++ b/web/cobrands/oxfordshire/base.scss @@ -69,4 +69,21 @@ dd, p { & > :last-child { margin-bottom: 0; } + + .segmented-control + & { + margin-top: 1em; + } +} + +.btn-primary { + @include button-reset( + $oxfordshire_button_top, + $oxfordshire_button_bottom, + $oxfordshire_button_border, + #fff, + darken($oxfordshire_button_bottom, 3%), + darken($oxfordshire_button_top, 3%), + $oxfordshire_button_border, + #fff + ); } diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index c44e91586..22edca768 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -60,6 +60,8 @@ body.twothirdswidthpage { } } +// TODO: This entire section is very suspicious +// // To prevent font size larger interfering with the fixed Oxfordshire layout .container { width: auto; } body:not(.admin) .full-width { width: 464px; } @@ -223,11 +225,10 @@ body.mappage { #map_sidebar { background-color: $oxfordshire_very_light_green; +} - .with-actions & { - background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em); - background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #deead2 29em); - } +#side-inspect { + background-color: #deead2; } .item-list--reports { @@ -286,11 +287,12 @@ h4.static-with-rule { #oxford-wrapper #front-main #postcodeForm div { border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green + width: 24em; // up from default 20em #pc { - padding: 0 2%; - width: 89%; - height: 38px; + padding: 0 0 0 2%; + width: 20em; + height: 40px; } } diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 7462682ee..612d8cf55 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -246,7 +246,7 @@ textarea { textarea { line-height: 1.5em; - min-height: 8em; + min-height: 5em; } label{ @@ -285,6 +285,10 @@ label{ select.form-control { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); height: 2.2em; // roughly equal to default input height + + &[multiple] { + height: auto; + } } .form-section-heading { @@ -398,27 +402,14 @@ select.form-control { margin:1em 0; } -.problem-inspector-fields { - select { - height: 2.4em; // match text inputs - -webkit-appearance: menulist-button; // so it's the right height in Safari - } - - p.left, - p.right { - width: 46%; - - label { - margin-top: 0; - } - } - - p.left { - float: #{$left}; - } +.label-containing-checkbox { + padding-#{$left}: 24px; + position: relative; - p.right { - float: #{$right}; + input { + position: absolute; + #{$left}: 0; + top: 0.2em; } } @@ -725,22 +716,22 @@ footer { /*BUTTONS*/ -// Default style set for buttons, inputs and .btn class. Red and green class available. -// NB: a.btn is included in the selector otherwise a:visited is more specific and -// the wrong text colour is applied. -button, input[type=submit], .btn, a.btn { +.btn { @include button-reset; } -.green-btn, -button.green-btn, -input.green-btn{ +.btn + .btn { + // Ensure extra space between inline buttons placed next to each other. + margin-#{$left}: 0.5em; +} + +.btn-primary, +.green-btn { @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff); } -.red-btn, -button.red-btn, -input.red-btn{ +.btn-danger, +.red-btn { @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff); } @@ -753,10 +744,6 @@ input.final-submit { .btn--facebook { @include button-reset(#3b5998, darken(#3b5998, 10%), #3b5998, #fff, darken(#3b5998, 5%), darken(#3b5998, 10%), #3b5998, #fff); - &:visited { - color: #fff; - } - img { margin-right: 0.5em; vertical-align: -0.2em; @@ -768,10 +755,6 @@ input.final-submit { .btn--twitter { @include button-reset(#55acee, darken(#55acee, 10%), #55acee, #fff, darken(#55acee, 5%), darken(#55acee, 10%), #55acee, #fff); - &:visited { - color: #fff; - } - img { margin-right: 0.5em; vertical-align: -0.2em; @@ -780,9 +763,45 @@ input.final-submit { } } +.btn--navigate, +.btn--geolocate { + &:before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + background: transparent url(/cobrands/fixmystreet/images/navigate.png) no-repeat 0 0; + background-size: 16px 16px; + margin-#{$right}: 0.5em; + vertical-align: -0.1em; // vertically centre icon in button + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet/images/navigate@2.png); + } + + @media all { + background-image: url(/cobrands/fixmystreet/images/navigate.svg), none; + } + } +} + +.btn--geolocate { + &:before { + background-image: url(/cobrands/fixmystreet/images/crosshairs.png); + + @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { + background-image: url(/cobrands/fixmystreet/images/crosshairs@2.png); + } + + @media all { + background-image: url(/cobrands/fixmystreet/images/crosshairs.svg), none; + } + } +} + .btn--block { display: block; - width: auto; + text-align: center; } // Under the button to override its text transform and width @@ -1463,6 +1482,27 @@ label .muted { } } +.inspect-section { + border-top: 1px solid rgba(0, 0, 0, 0.2); + padding-top: 1.5em; + margin-top: 1.5em; + + &:first-child { + border-top: none; + margin-top: 0; + padding-top: 0; + } + + & > :first-child, + & > :first-child > :first-child { + margin-top: 0; + } +} + +.inspect-section--hidden { + display: none; +} + table.nicetable { width:100%; @@ -1803,36 +1843,37 @@ table.nicetable { .segmented-control { @include clearfix(); - display: flex; // fancy full-width buttons for browsers that support flexbox + @include flex-container(); // fancy full-width buttons for browsers that support flexbox & > * { display: block; - margin: 0; - padding: 0.75em 0.5em; text-align: center; - background: #fff linear-gradient(to bottom, #fff 0%, #eee 100%) 0 0 no-repeat; - border: 1px solid #ccc; border-right-width: 0; // avoid double border between items - font-weight: bold; - color: inherit !important; - text-decoration: none !important; - cursor: pointer; float: left; // float fallback for browsers that don't support flexbox - flex: 1 0 auto; + @include flex(1 0 auto, 1); + } - &:hover { - background: #f3f3f3 linear-gradient(to bottom, #f9f9f9 0%, #e9e9e9 100%) 0 0 no-repeat; - } + .btn { + padding: 0.75em 0.5em; + border-radius: 0; + } + + .btn + .btn { + margin-#{$left}: 0; } & > :first-child { - border-radius: 0.25em 0 0 0.25em; + border-radius: 4px 0 0 4px; } & > :last-child { - border-radius: 0 0.25em 0.25em 0; + border-radius: 0 4px 4px 0; border-right-width: 1px; // reinstate border on last item } + + & > :first-child:last-child { + border-radius: 4px; + } } // A special case of segmented control, where each "button" (or label) is diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 3bf3612ae..e7ccd5b03 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -3,6 +3,10 @@ $image-sprite: '../fixmystreet/images/sprite.png' !default; $layout_front_stats_color: $primary !default; $mappage-header-height: 4em !default; +$mappage-sidebar-width: 29em; +$mappage-sidebar-padding: 1em; +$mappage-with-notes-sidebar-width: 44em; +$mappage-with-actions-sidebar-width: 58em; .internal-link-fixed-header { display: block; @@ -222,6 +226,10 @@ h1 { } } +.full-width { + margin: 0 ($mappage-sidebar-padding * -1); +} + // map page - has fixed header and different styling body.mappage { @@ -339,17 +347,17 @@ body.mappage.admin { top: $mappage-header-height; bottom: 0; #{$right}: 0; - #{$left}: 29em; // width of sidebar + #{$left}: $mappage-sidebar-width; width: auto; // stretch from right edge of sidebar to left edge of window height: auto; // stretch from bottom of header to bottom of window margin: 0; .with-notes & { - #{$left}: 44em; + #{$left}: $mappage-with-notes-sidebar-width; } .with-actions & { - #{$left}: 58em; + #{$left}: $mappage-with-actions-sidebar-width; } } @@ -359,41 +367,92 @@ body.mappage.admin { top: $mappage-header-height; #{$left}: 0; bottom: 0; - width: 27em; // width of sidebar, minus padding - padding: 1em 1em 0 1em; // Bottom padding taken care of by ::after + width: ($mappage-sidebar-width - ($mappage-sidebar-padding * 2)); + padding: $mappage-sidebar-padding; overflow: auto; // vertical scrollbar when list is taller than window background-color: #fff; // since no longer in the flow inside .content box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); .with-notes & { - width: 42em; + width: ($mappage-with-notes-sidebar-width - ($mappage-sidebar-padding * 2)); // TODO: Should have a bitmap image fallback for old browsers!! background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); } .with-actions & { - width: 58em; - background-image: -webkit-linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); - background-image: linear-gradient(flip(90deg, 270deg), transparent 29em, #E9F2FF 29em); + width: $mappage-with-actions-sidebar-width; + max-width: 100%; // Secondary column will squish on screens 768-960px + padding: 0; // Padding will be handled by children of .two_column_sidebar + + &:after { + display: none; // 4em bottom spacing will be handled by children of .two_column_sidebar + } } -} -// Firefox/IE and Chrome/Safari (e.g.) differ on where to clip overflowed -// elements, one group clip outside padding, one clips inside. So using padding -// in #map_sidebar works in Chrome/Safari but not in Firefox/IE. Instead, we -// add some extra height using ::after. -// https://bugzilla.mozilla.org/show_bug.cgi?id=748518 -#map_sidebar::after { + // Chrome/Safari count padding-bottom as part of the scrollable content in + // an overflow:scroll element (technically in contravention of the spec), + // whereas Firefox/IE render the padding outside the scrollable area. + // We need padding at the bottom of the sidebar, to stop .shadow-wrap from + // obscuring content at the bottom of the sidebar. So we use an :after + // pseudo-element instead of padding. + // https://bugzilla.mozilla.org/show_bug.cgi?id=748518 + &:after { content: ""; display: block; height: 4em; - clear: both; + } } -// IE<=8 does not support ::after -.iel8 #map_sidebar { - padding-bottom: 4em; +// This goes inside #map_sidebar, and establishes a flex container allowing +// us to split the sidebar into two side-by-side columns. +.two_column_sidebar { + @include flex-container(); + @include flex-align(stretch); // children will fill entire height of this element + min-height: 100%; // this element will fill entire height of parent (#map_sidebar) + + & > * { + // Columns should start at 50% width, and (eg: if scrollbars appear, + // reducing the available width), shrink down to less than 50%. + @include box-sizing(border-box); + @include flex(0 1 auto); + width: 50%; + padding: $mappage-sidebar-padding; + + // Add extra space at the bottom of the sidebar columns, to stop + // .shadow-wrap obscuring text at the bottom of the sidebar. + &:after { + content: ""; + display: block; + height: 4em; + } + } + + // Default for children is to share the horizontal space equally amongst + // themselves. But to make sure that the edge of #side-report lines up + // with the edge of .shadow-wrap, we give #side-report a fixed width, + // and leave the other column to shrink to the remaining space. + #side-report { + width: $mappage-sidebar-width; + @include flex(0 0 auto); + } + + // No flexbox in IE8, so we settle for floating the columns instead. + // They will no longer stretch the full height of the sidebar, and the + // width of #side-report will no longer match the width of .shadow-wrap + // when a scrollbar is present. + .iel8 & { + @include clearfix(); + + & > * { + float: left; + width: 50%; + } + + #side-report { + width: 50%; + } + } } #skip-this-step { @@ -693,12 +752,15 @@ body.authpage { // Wraps around #key-tools box - sticks to the bottom of the screen on desktop .shadow-wrap { - position:fixed; - z-index:10; //this is just to ensure anythign inside .content that has position set goes sites it + position: fixed; + z-index: 10; //this is just to ensure anythign inside .content that has position set goes sites it bottom: 0; - width: 29em; + #{$left}: 0; + margin: 0; + width: $mappage-sidebar-width; overflow: hidden; padding-top: 2em; + ul#key-tools { border-top: 0.25em solid $primary; margin: 0; @@ -757,13 +819,6 @@ body.authpage { } } -// Old versions of IE don't have box-sixing, so negative margins leave a 2em gap. -// We can set a fixed width instead, which might result in a horizontal scrollbar -// while the drawer is opening. Quel dommage. -.iel8 .shadow-wrap.static { - width: 29em; -} - // If JS is disabled, these are still CSS positioned, so don't want behind shining through. #report-share, #report-updates-data { background-color: #fff; @@ -879,18 +934,9 @@ textarea.form-error { } } -// Similar to .with-notes, there's a special version of the -// report details page, that includes a secondary column. -body.with-actions { - #side-report { - width: 27em; - float: #{$left}; - } - - #side-report-secondary { - width: 27em; - float: #{$right}; - } +// The coloured sidebar column on .with-actions pages. +#side-inspect { + background-color: #E9F2FF; } // More general notes diff --git a/web/cobrands/sass/_mixins.scss b/web/cobrands/sass/_mixins.scss index a1a278ad0..6d4f523ce 100644 --- a/web/cobrands/sass/_mixins.scss +++ b/web/cobrands/sass/_mixins.scss @@ -1,32 +1,45 @@ $direction: 'left' !default; // Button reset -@mixin button-reset($c1: #eee, $c2: #ccc, $c3: #999, $c4: #333, $c5: #777, $c6: #999, $c7: #666, $c8: #fff){ +// Uses !important a few times to quickly reset +// styles from a:link, a:hover, a:visited etc. +@mixin button-reset($bg-top: #fff, $bg-bottom: #eee, $border: #ccc, $text: inherit, $hover-bg-bottom: #e9e9e9, $hover-bg-top: #f9f9f9, $hover-border: #ccc, $hover-text: inherit){ display: inline-block; - cursor:pointer; - font:{ - size: 0.875em; - family: Helmet, Freesans, sans-serif; - weight:bold; - } - text-transform:uppercase; - line-height: 1.375em; - padding: 0.7em 0.5em 0.5em; - margin:0; + margin: 0; + padding: 0.75em 1em; width: auto; height: auto; vertical-align: top; + text-align: center; + + font-size: 1em; + line-height: 1em; + font-weight: bold; + font-family: inherit; + text-decoration: none !important; + color: $text !important; + + cursor: pointer; + background: $bg-bottom; + @include linear-gradient($bg-top, $bg-bottom); + + border: 1px solid $border; @include border-radius(4px); - background: $c1; - @include linear-gradient($c1, $c2); - border:1px solid $c3; - color:$c4; - &:hover, &:hover:enabled { - background:$c5; - @include linear-gradient($c6, $c5); - text-decoration: none; - border:1px solid $c7; - color:$c8; + + &:hover, + &:focus { + background: $hover-bg-bottom; + @include linear-gradient($hover-bg-top, $hover-bg-bottom); + text-decoration: none !important; + border-color: $hover-border; + color: $hover-text !important; + } + + &:disabled { + background: $bg-bottom; + border-color: $border; + color: desaturate(darken($bg-bottom, 50%), 50%) !important; + cursor: default; } } @@ -126,3 +139,28 @@ $right: right; background: #{$prefix}linear-gradient($stops); } } + +@mixin flex-container() { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; +} + +@mixin flex($values, $values2009: 0) { + -webkit-box-flex: $values2009; + -moz-box-flex: $values2009; + -webkit-box-flex: $values; + -moz-box-flex: $values; + -webkit-flex: $values; + -ms-flex: $values; + flex: $values; +} + +@mixin flex-align($alignment) { + -webkit-box-align: $alignment; + -webkit-align-items: $alignment; + -ms-flex-align: $alignment; + align-items: $alignment; +} |
