diff options
89 files changed, 640 insertions, 1202 deletions
diff --git a/templates/web/angus/header.html b/templates/web/angus/header.html index a7199949d..19e9e7f68 100644 --- a/templates/web/angus/header.html +++ b/templates/web/angus/header.html @@ -50,15 +50,6 @@ </div> </header> - [% IF c.user_exists %] - <div id="user-meta"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('sign out') %]</a> - </p> - </div> - [% END %] - [% INCLUDE 'post_header_extra.html' %] [% pre_container_extra %] diff --git a/templates/web/base/around/display_location.html b/templates/web/base/around/display_location.html index 7bf62e528..337b97b8e 100755 --- a/templates/web/base/around/display_location.html +++ b/templates/web/base/around/display_location.html @@ -7,7 +7,7 @@ = pc ? c.uri_for( "/rss/pc", pc ) : c.uri_for( "/rss/l/$latitude,$longitude" ); - + email_url = c.uri_for( '/alert/list', { @@ -28,6 +28,7 @@ ); PROCESS "maps/${map.type}.html" around_page = 1; + sidebar_html = PROCESS 'report/new/sidebar.html' js = 1 report.used_map = 1; SET bodyclass = 'mappage'; SET rss = [ tprintf(loc('Recent local problems, %s', "%s is the site name"), site_name), rss_url ]; @@ -71,32 +72,32 @@ </div> + <div id="map_sidebar"> - - <div id="side"> - - [% IF allow_creation %] + <div id="side"> + [% IF allow_creation %] [% INCLUDE 'around/_report_banner.html' %] [% TRY %][% INCLUDE 'around/extra_text.html' %][% CATCH file %][% END %] - [% END %] - - [% INCLUDE 'around/_updates.html' %] + [% END %] + + [% INCLUDE 'around/_updates.html' %] + <section class="full-width"> + [% INCLUDE "around/tabbed_lists.html" %] + </section> + </div> + + [% IF allow_creation %] + <div style="display:none" id="side-form"> + [% INCLUDE "report/new/fill_in_details_form.html" + js = 1, + report.used_map = 1 + report.name = c.user.name + %] + </div> + [% END %] - <section class="full-width"> - [% INCLUDE "around/tabbed_lists.html" %] - </section> </div> - [% IF allow_creation %] - <div style="display:none" id="side-form"> - [% INCLUDE "report/new/fill_in_details_form.html" - js = 1, - report.used_map = 1 - report.name = c.user.name - %] - </div> - [% END %] - [% IF allow_creation %] </form> [% END %] diff --git a/templates/web/base/footer.html b/templates/web/base/footer.html index c10d9c008..d046d6297 100644 --- a/templates/web/base/footer.html +++ b/templates/web/base/footer.html @@ -23,7 +23,7 @@ >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="[% base %]/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="[% base %]/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% diff --git a/templates/web/base/header.html b/templates/web/base/header.html index 7ef37675a..8e5cb3c73 100644 --- a/templates/web/base/header.html +++ b/templates/web/base/header.html @@ -34,7 +34,6 @@ <![endif]--> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] @@ -57,15 +56,6 @@ </div> </header> - [% IF c.user_exists %] - <div id="user-meta"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('sign out') %]</a> - </p> - </div> - [% END %] - [% pre_container_extra %] <div class="container"> diff --git a/templates/web/base/my/my.html b/templates/web/base/my/my.html index c3911d4c1..4d5fed1cd 100644 --- a/templates/web/base/my/my.html +++ b/templates/web/base/my/my.html @@ -7,14 +7,23 @@ [% IF problems.size %] [% map_html %] </div> - <div id="side"> + <div id="map_sidebar"> + <div id="side"> [% ELSE %] - <div id="skipped-map"> + <div id="map_sidebar"> + <div id="skipped-map"> [% END %] -<h1>[% loc('Your Reports') %]</h1> +<h1>[% loc('Your account') %]</h1> -<p><a href="/auth/change_password">[% loc('Change password') %]</a></p> +<p>[% c.user.name %] [% c.user.email %]</p> + +<p class="my-account-buttons"> + <a href="/auth/change_password">[% loc('Change password') %]</a> + <a href="/auth/sign_out">[% loc('Sign out') %]</a> +</p> + +<h2>[% loc('Your reports') %]</h2> [% IF ! has_content %] [% tprintf( loc('You haven’t created any reports yet. <a href="%s">Report a problem now.</a>'), @@ -63,6 +72,7 @@ [% "</ul>" IF loop.last %] [% END %] -</div> + </div> + </div> [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html index 1068e21e3..312300b9d 100644 --- a/templates/web/base/questionnaire/index.html +++ b/templates/web/base/questionnaire/index.html @@ -9,6 +9,8 @@ </div> +<div id="map_sidebar"> + <h1>[% loc('Questionnaire') %]</h1> <h2 class="questionnaire-report-header">[% loc('Your report') %]</h2> @@ -107,4 +109,6 @@ </form> +</div> + [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/report/display.html b/templates/web/base/report/display.html index 05e07d501..e9f0b2914 100644 --- a/templates/web/base/report/display.html +++ b/templates/web/base/report/display.html @@ -1,4 +1,4 @@ -[% +[% SET bodyclass = 'mappage'; PROCESS "report/photo-js.html"; PROCESS "maps/${map.type}.html"; @@ -13,6 +13,8 @@ [% map_html %] </div> +<div id="map_sidebar"> + [% IF login_success %] <p class='form-success'>[% loc('You have successfully signed in; please check and confirm your details are accurate:') %]</p> [% INCLUDE 'report/update-form.html' %] @@ -41,4 +43,6 @@ [% INCLUDE 'report/update-form.html' %] [% END %] +</div> + [% INCLUDE 'footer.html' %] diff --git a/templates/web/base/report/new/fill_in_details.html b/templates/web/base/report/new/fill_in_details.html index 55b3a5207..fc272b533 100644 --- a/templates/web/base/report/new/fill_in_details.html +++ b/templates/web/base/report/new/fill_in_details.html @@ -1,6 +1,9 @@ [% + sidebar_html = PROCESS 'report/new/sidebar.html'; + SET bodyclass = ''; SET bodyclass = 'mappage' IF report.used_map; + SET bodyclass = bodyclass _ " with-notes" IF sidebar_html; PROCESS "maps/${map.type}.html" IF report.used_map; INCLUDE 'header.html', title => loc('Reporting a problem'); %] @@ -25,24 +28,27 @@ <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% latitude | html %]"> <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% longitude | html %]"> - [% IF report.used_map %] - [% map_html %] - </div> + [% IF report.used_map %] + [% map_html %] + </div> + <div id="map_sidebar"> <div id="side"> - [% ELSE %] + [% ELSE %] + <div id="map_sidebar"> <div id="skipped-map"> - [% END %] + [% END %] + + <div id="report-a-problem-main"> + [% IF login_success %] + [% PROCESS 'report/new/login_success_form.html' %] + [% ELSIF oauth_need_email %] + [% PROCESS 'report/new/oauth_email_form.html' %] + [% ELSE %] + [% PROCESS 'report/new/fill_in_details_form.html' %] + [% END %] + </div> - <div id="report-a-problem-main"> - [% IF login_success %] - [% PROCESS 'report/new/login_success_form.html' %] - [% ELSIF oauth_need_email %] - [% PROCESS 'report/new/oauth_email_form.html' %] - [% ELSE %] - [% PROCESS 'report/new/fill_in_details_form.html' %] - [% END %] </div> - </div> </form> diff --git a/templates/web/base/report/new/fill_in_details_form.html b/templates/web/base/report/new/fill_in_details_form.html index f9da3753f..663b13e6a 100644 --- a/templates/web/base/report/new/fill_in_details_form.html +++ b/templates/web/base/report/new/fill_in_details_form.html @@ -23,7 +23,7 @@ <p class="form-error">[% loc('Sorry, we could not log you in. Please fill in the form below.') %]</p> [% END %] -[% TRY %][% PROCESS 'report/new/sidebar.html' %][% CATCH file %][% END %] +[% sidebar_html %] [% INCLUDE 'errors.html' %] diff --git a/templates/web/base/report/new/fill_in_details_text.html b/templates/web/base/report/new/fill_in_details_text.html index 05527bb24..686c8bde5 100644 --- a/templates/web/base/report/new/fill_in_details_text.html +++ b/templates/web/base/report/new/fill_in_details_text.html @@ -1,7 +1,7 @@ [% - IF area_ids_to_list.size != 0; + IF bodies_to_list.size != 0; loc('The council won’t be able to help unless you leave as much detail as you can. Please describe the exact location of the problem (e.g. on a wall), what it is, how long it has been there, a description (and a photo of the problem if you have one), etc.'); - IF category_extras; + IF category_extras.size; ' ' _ loc('Some categories may require additional information.'); END; ELSE; diff --git a/templates/web/base/report/new/login_success_form.html b/templates/web/base/report/new/login_success_form.html index 45d0221a7..2eade7c7d 100644 --- a/templates/web/base/report/new/login_success_form.html +++ b/templates/web/base/report/new/login_success_form.html @@ -2,7 +2,7 @@ <p class='form-success'>[% loc('You have successfully signed in; please check and confirm your details are accurate:') %]</p> -[% TRY %][% PROCESS 'report/new/sidebar.html' %][% CATCH file %][% END %] +[% sidebar_html %] [% INCLUDE 'errors.html' %] diff --git a/templates/web/base/report/new/oauth_email_form.html b/templates/web/base/report/new/oauth_email_form.html index c897aaeea..2c9b1a3ca 100644 --- a/templates/web/base/report/new/oauth_email_form.html +++ b/templates/web/base/report/new/oauth_email_form.html @@ -5,7 +5,7 @@ [% loc('We need your email address, please give it below.') %] </p> -[% TRY %][% PROCESS 'report/new/sidebar.html' %][% CATCH file %][% END %] +[% sidebar_html %] [% INCLUDE 'errors.html' %] diff --git a/templates/web/base/reports/body.html b/templates/web/base/reports/body.html index 2ec409765..55f9a0881 100755 --- a/templates/web/base/reports/body.html +++ b/templates/web/base/reports/body.html @@ -27,7 +27,8 @@ [% map_html %] </div> -<div id="side"> +<div id="map_sidebar"> + <div id="side"> <h1 id="reports_heading"> [% IF ward %] @@ -66,5 +67,6 @@ [% INCLUDE 'pagination.html', param = 'p' %] + </div> </div> [% INCLUDE 'footer.html' %] diff --git a/templates/web/bromley/footer.html b/templates/web/bromley/footer.html index 6412ec03c..87d244480 100644 --- a/templates/web/bromley/footer.html +++ b/templates/web/bromley/footer.html @@ -14,7 +14,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %]>[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/bromley/report/display.html b/templates/web/bromley/report/display.html index da83e005f..06db8f001 100644 --- a/templates/web/bromley/report/display.html +++ b/templates/web/bromley/report/display.html @@ -1,4 +1,4 @@ -[% +[% PROCESS "report/photo-js.html"; PROCESS "maps/${map.type}.html"; @@ -11,9 +11,10 @@ %] [% map_html %] - </div> +<div id="map_sidebar"> + [% IF login_success %] <p class='form-success'>[% loc('You have successfully signed in; please check and confirm your details are accurate:') %]</p> [% END %] @@ -107,12 +108,12 @@ </select> [% ELSE %] [% IF problem.is_fixed AND c.user_exists AND c.user.id == problem.user_id %] - + <input type="checkbox" name="reopen" id="form_reopen" value="1"[% ' checked' IF update.mark_open %]> <label class="inline" for="form_reopen">[% loc('This problem has not been fixed') %]</label> - + [% ELSIF !problem.is_fixed %] - + <div class="checkbox-group"> <input type="checkbox" name="fixed" id="form_fixed" value="1"[% ' checked' IF update.mark_fixed %]> <label class="inline" for="form_fixed">[% loc('This problem has been fixed') %]</label> @@ -124,9 +125,9 @@ [% IF c.user_exists %] [% INCLUDE name %] - + <input class="final-submit green-btn" type="submit" id="update_post" value="[% loc('Post') %]"> - + [% ELSE %] @@ -146,7 +147,7 @@ <h5>Confirm my report by email</h5> [% INCLUDE name %] - + <label for="password_register">[% loc('Password (optional)') %]</label> <div class="general-notes"> @@ -185,7 +186,7 @@ </form> </div> - +</div> [% INCLUDE 'footer.html' %] diff --git a/templates/web/eastsussex/header.html.template b/templates/web/eastsussex/header.html.template index d80d4101a..325d1b6e6 100644 --- a/templates/web/eastsussex/header.html.template +++ b/templates/web/eastsussex/header.html.template @@ -10,7 +10,6 @@ <link rel="stylesheet" href="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/layout.css') %]"> <![endif]--> - <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/report-form.js') %]"></script> diff --git a/templates/web/fiksgatami/footer.html b/templates/web/fiksgatami/footer.html index f5088bcb4..8bc9f5d4f 100644 --- a/templates/web/fiksgatami/footer.html +++ b/templates/web/fiksgatami/footer.html @@ -18,7 +18,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/fiksgatami/header.html b/templates/web/fiksgatami/header.html index 5bc0eaf4b..3e77e89ca 100644 --- a/templates/web/fiksgatami/header.html +++ b/templates/web/fiksgatami/header.html @@ -23,7 +23,6 @@ <![endif]--> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] @@ -42,15 +41,6 @@ </div> </header> - [% IF c.user_exists %] - <div id="user-meta"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('sign out') %]</a> - </p> - </div> - [% END %] - [% pre_container_extra %] <div class="container"> diff --git a/templates/web/fiksgatami/nn/footer.html b/templates/web/fiksgatami/nn/footer.html index d7703388a..08ec155f5 100644 --- a/templates/web/fiksgatami/nn/footer.html +++ b/templates/web/fiksgatami/nn/footer.html @@ -18,7 +18,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/fixamingata/footer.html b/templates/web/fixamingata/footer.html index a3cf589b9..5364c0b60 100644 --- a/templates/web/fixamingata/footer.html +++ b/templates/web/fixamingata/footer.html @@ -14,7 +14,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/fixmindelo/footer.html b/templates/web/fixmindelo/footer.html index afd8984c7..76ebef40c 100644 --- a/templates/web/fixmindelo/footer.html +++ b/templates/web/fixmindelo/footer.html @@ -36,7 +36,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/greenwich/footer.html b/templates/web/greenwich/footer.html index 7ff0dd0af..a7c939358 100644 --- a/templates/web/greenwich/footer.html +++ b/templates/web/greenwich/footer.html @@ -14,7 +14,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports/Royal+Borough+of+Greenwich' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/harrogate/footer.html b/templates/web/harrogate/footer.html index 625096b32..a37f94a35 100644 --- a/templates/web/harrogate/footer.html +++ b/templates/web/harrogate/footer.html @@ -19,7 +19,7 @@ [% selected = c.req.uri.path == '/my' %] <li> <[% IF selected %]span[% ELSE %]a href="/my"[% END %]> - [% loc("Your reports") %]</[% selected ? 'span' : 'a' %]></li> + [% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% selected ? 'span' : 'a' %]></li> [% selected = c.req.uri.path == '/reports/Harrogate' %] <li> diff --git a/templates/web/harrogate/header.html b/templates/web/harrogate/header.html index 451832dda..8612cb3f8 100644 --- a/templates/web/harrogate/header.html +++ b/templates/web/harrogate/header.html @@ -23,7 +23,6 @@ <![endif]--> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] @@ -46,15 +45,6 @@ </div> </header> - [% IF c.user_exists %] - <div id="user-meta"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('sign out') %]</a> - </p> - </div> - [% END %] - [% pre_container_extra %] <div class="container"> diff --git a/templates/web/hart/header.html b/templates/web/hart/header.html index 6337aad64..ed5d2fed4 100644 --- a/templates/web/hart/header.html +++ b/templates/web/hart/header.html @@ -24,21 +24,8 @@ <![endif]--> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] - <script type="text/javascript"> - $(function(){ - var $html = $('html'); - $(window).resize(function(){ - if(!$html.hasClass('mobile')) { - // Hart has a bigger header and so needs more room for - // the map controls - $('#fms_pan_zoom').css({ top: '17.75em' }); - } - }).resize(); - }); - </script> <link rel="Shortcut Icon" type="image/x-icon" href="/cobrands/hart/favicon.ico"> @@ -57,7 +44,7 @@ <li> <a href="#main-nav"><div class="menu-icon"> </div></a> </ul> </div> - <div class="header-container"> + <div class="container"> <a id="site-logo" href="http://www.hart.gov.uk">Hart District Council</a> </div> </header> diff --git a/templates/web/oxfordshire/footer.html b/templates/web/oxfordshire/footer.html index 3153125fd..26bdf7ab2 100644 --- a/templates/web/oxfordshire/footer.html +++ b/templates/web/oxfordshire/footer.html @@ -18,7 +18,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/oxfordshire/header.html b/templates/web/oxfordshire/header.html index e69757dad..6c4427414 100644 --- a/templates/web/oxfordshire/header.html +++ b/templates/web/oxfordshire/header.html @@ -21,7 +21,6 @@ <![endif]--> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/oxfordshire/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] @@ -39,15 +38,6 @@ <div style="clear:both"></div> <span class="header"><a href="/">Report a road or street problem</a></span> - [% IF c.user_exists %] - <div class="oxford-user"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('Sign out') %]</a> - </p> - </div> - [% END %] - <div id="navigation"> <div class="menubar"> <div class="menu-inner"> @@ -57,7 +47,7 @@ </li> <li> <[% IF c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]> + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]> </li> <li> <[% IF c.req.uri.path == '/reports/Oxfordshire' %]span[% ELSE %]a href="/reports/Oxfordshire"[% END @@ -88,15 +78,6 @@ </div> </header> - [% IF c.user_exists %] - <div id="user-meta"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('sign out') %]</a> - </p> - </div> - [% END %] - [% pre_container_extra %] <div class="container"> diff --git a/templates/web/seesomething/around/display_location.html b/templates/web/seesomething/around/display_location.html index b54311264..3ed7cac46 100644 --- a/templates/web/seesomething/around/display_location.html +++ b/templates/web/seesomething/around/display_location.html @@ -11,6 +11,7 @@ ); PROCESS "maps/${map.type}.html"; + sidebar_html = PROCESS 'report/new/sidebar.html', js = 1, report.used_map = 1; INCLUDE 'header.html', title => loc('Viewing a location') @@ -29,19 +30,20 @@ <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% longitude | html %]"> [% map_html %] - </div> - <div id="side"> + <div id="map_sidebar"> + <div id="side"> [% INCLUDE 'around/_report_banner.html' %] - </div> - - <div style="display:none" id="side-form"> - [% INCLUDE "report/new/fill_in_details_form.html" - js = 1, - report.used_map = 1 - report.name = c.user.name - %] + </div> + + <div style="display:none" id="side-form"> + [% INCLUDE "report/new/fill_in_details_form.html" + js = 1, + report.used_map = 1 + report.name = c.user.name + %] + </div> </div> </form> diff --git a/templates/web/seesomething/tokens/confirm_problem.html b/templates/web/seesomething/tokens/confirm_problem.html index 4a11d14b4..0a455434b 100644 --- a/templates/web/seesomething/tokens/confirm_problem.html +++ b/templates/web/seesomething/tokens/confirm_problem.html @@ -11,19 +11,23 @@ %] - [% IF report.used_map %] +[% IF report.used_map %] [% map_html %] - </div> - [% END %] + <div id="map_sidebar"> +[% END %] + + <div id="side"> + <div id="report-a-problem-main"> + <h1>Complete</h1> + <p>Your report has been sent. If you included contact details we may be in touch to follow up or request more details.</p> + <p>Thank you for saying something and making our transport safer.</p> + <p><img src="../cobrands/seesomething/images/btp-wmp-logos.png" alt="British Transport Police and the West Midlands Police" width="271" height="116"></p> + </div> + </div> - <div id="side"> -<div id="report-a-problem-main"> - <h1>Complete</h1> - <p>Your report has been sent. If you included contact details we may be in touch to follow up or request more details.</p> - <p>Thank you for saying something and making our transport safer.</p> - <p><img src="../cobrands/seesomething/images/btp-wmp-logos.png" alt="British Transport Police and the West Midlands Police" width="271" height="116"></p> -</div> +[% IF report.used_map %] </div> +[% END %] [% INCLUDE 'footer.html' %] diff --git a/templates/web/stevenage/footer.html b/templates/web/stevenage/footer.html index b81a949a1..3fcd9b5a1 100644 --- a/templates/web/stevenage/footer.html +++ b/templates/web/stevenage/footer.html @@ -94,7 +94,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports/Stevenage' %]span[% ELSE %]a href="/reports/Stevenage"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/stevenage/header.html b/templates/web/stevenage/header.html index ffcc9ec86..fb6f2ae5b 100644 --- a/templates/web/stevenage/header.html +++ b/templates/web/stevenage/header.html @@ -19,7 +19,6 @@ <![endif]--> <script src="[% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] @@ -36,16 +35,6 @@ <a href="#main-nav" id="nav-link">Main Navigation</a> </div> </header> - - [% IF c.user_exists %] - <div id="user-meta"> - <p> - [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] - <a href="/auth/sign_out">[% loc('sign out') %]</a> - </p> - </div> - [% END %] - [% pre_container_extra %] <div class="container"> diff --git a/templates/web/trinidadtobago/footer.html b/templates/web/trinidadtobago/footer.html index bace22e71..ac90417d6 100644 --- a/templates/web/trinidadtobago/footer.html +++ b/templates/web/trinidadtobago/footer.html @@ -20,7 +20,7 @@ <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %] class="report-a-problem-btn" >[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END - %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% + %]>[% c.user_exists ? loc("Your account") : loc("Sign in") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% END %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]></li>[% %]<li><[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END diff --git a/templates/web/warwickshire/header.html b/templates/web/warwickshire/header.html index c6d2bc048..b76ecc2ae 100644 --- a/templates/web/warwickshire/header.html +++ b/templates/web/warwickshire/header.html @@ -27,7 +27,6 @@ <![endif]--> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/' _ c.cobrand.moniker _ '/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] diff --git a/templates/web/zurich/admin/header.html b/templates/web/zurich/admin/header.html index 929df8352..a423cf22f 100644 --- a/templates/web/zurich/admin/header.html +++ b/templates/web/zurich/admin/header.html @@ -23,7 +23,6 @@ .overdue { background-color: #ffcccc; } select { width: auto; } .admin-report-edit select { max-width: 100%; } - #fms_pan_zoom { top: 13em !important; } </style> <script> $(function(){ diff --git a/templates/web/zurich/admin/report_edit-sdm.html b/templates/web/zurich/admin/report_edit-sdm.html index 63c6b5e6f..3cdf3d8c3 100644 --- a/templates/web/zurich/admin/report_edit-sdm.html +++ b/templates/web/zurich/admin/report_edit-sdm.html @@ -10,6 +10,8 @@ [% map_html %] </div> +<div id="map_sidebar"> + <form method="post" action="[% c.uri_for( 'report_edit', problem.id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8"> <input type="hidden" name="token" value="[% token %]" > <input type="hidden" name="submit" value="1" > @@ -143,6 +145,8 @@ </div> </form> +</div> + <div id="print_report_map" class="print-only"> [% INCLUDE 'maps/noscript_map.html' map=print_report_map nsm_prefix="large_" %] </div> diff --git a/templates/web/zurich/admin/report_edit.html b/templates/web/zurich/admin/report_edit.html index dd876935c..512ea4708 100644 --- a/templates/web/zurich/admin/report_edit.html +++ b/templates/web/zurich/admin/report_edit.html @@ -10,6 +10,8 @@ [% map_html %] </div> +<div id="map_sidebar"> + [% pstate = problem.get_extra_metadata('closure_status') || problem.state %] <form id="report_edit" method="post" action="[% c.uri_for( 'report_edit', problem.id ) %]" enctype="application/x-www-form-urlencoded" accept-charset="utf-8"> @@ -296,6 +298,8 @@ </form> +</div> + <script type="text/javascript"> $(function(){ var form_fields_changed = false; diff --git a/templates/web/zurich/header.html b/templates/web/zurich/header.html index ee00b851c..b87dd913b 100644 --- a/templates/web/zurich/header.html +++ b/templates/web/zurich/header.html @@ -23,7 +23,6 @@ <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css"> <script src="[% start %][% version('/js/modernizr.custom.js') %]" charset="utf-8"></script> - <script src="[% start %][% version('/cobrands/fixmystreet/position_map.js') %]" charset="utf-8"></script> [% INCLUDE 'common_header_tags.html' %] [% extra_js %] diff --git a/templates/web/zurich/report/new/fill_in_details_form.html b/templates/web/zurich/report/new/fill_in_details_form.html index 1e9db6b31..21acab609 100644 --- a/templates/web/zurich/report/new/fill_in_details_form.html +++ b/templates/web/zurich/report/new/fill_in_details_form.html @@ -1,33 +1,8 @@ +[% sidebar_html %] + <div id="report-a-problem-main"> <h1>[% loc('Reporting a problem') %]</h1> - <div id="report-a-problem-sidebar"> - <!-- - The text for this section needs checking, but I can't work out which bit comes from where - --> - <div class="sidebar-tips"> - [% IF report.used_map %] - [% IF partial_token %] - <p id="unknown">[% loc('Please note your report has <strong>not yet been sent</strong>. Choose a category and add further information below, then submit.') %]</p> - [% END %] - <p>[% loc('You have located the problem at the point marked with a green pin on the map. If this is not the correct location, simply click on the map again. ') %]</p> - [% END %] - - <p> - [% IF report.used_map %] - [% INCLUDE 'report/new/fill_in_details_text.html' %] - [% ELSE %] - [% loc('Please fill in the form below with details of the problem, and describe the location as precisely as possible in the details box.') %] - [% END %] - </p> - </div> - - <div class="sidebar-notes"> - [% INCLUDE 'report/new/notes.html' %] - </div> - - </div> - [% INCLUDE 'errors.html' %] <fieldset> <div id="problem_form"> diff --git a/templates/web/zurich/report/new/sidebar.html b/templates/web/zurich/report/new/sidebar.html new file mode 100644 index 000000000..2e3d148d2 --- /dev/null +++ b/templates/web/zurich/report/new/sidebar.html @@ -0,0 +1,22 @@ +<div id="report-a-problem-sidebar"> + <div class="sidebar-tips"> + [% IF report.used_map %] + [% IF partial_token %] + <p id="unknown">[% loc('Please note your report has <strong>not yet been sent</strong>. Choose a category and add further information below, then submit.') %]</p> + [% END %] + <p>[% loc('You have located the problem at the point marked with a green pin on the map. If this is not the correct location, simply click on the map again. ') %]</p> + [% END %] + + <p> + [% IF report.used_map %] + [% INCLUDE 'report/new/fill_in_details_text.html' %] + [% ELSE %] + [% loc('Please fill in the form below with details of the problem, and describe the location as precisely as possible in the details box.') %] + [% END %] + </p> + </div> + + <div class="sidebar-notes"> + [% INCLUDE 'report/new/notes.html' %] + </div> +</div> diff --git a/templates/web/zurich/reports/index.html b/templates/web/zurich/reports/index.html index fd0efcf94..5f7613a1c 100755 --- a/templates/web/zurich/reports/index.html +++ b/templates/web/zurich/reports/index.html @@ -7,24 +7,25 @@ [% map_html %] </div> -<div id="side"> +<div id="map_sidebar"> + <div id="side"> -<h1>[% loc('All Reports') %]</h1> + <h1>[% loc('All Reports') %]</h1> -[% INCLUDE 'pagination.html', param = 'p' %] + [% INCLUDE 'pagination.html', param = 'p' %] -<section class="full-width"> - [% IF problems.0 %] - <ul class="item-list item-list--reports"> - [% FOREACH problem IN problems.0 %] - [% INCLUDE 'reports/_list-entry.html' %] - [% END %] - </ul> - [% END %] -</section> + <section class="full-width"> + [% IF problems.0 %] + <ul class="item-list item-list--reports"> + [% FOREACH problem IN problems.0 %] + [% INCLUDE 'reports/_list-entry.html' %] + [% END %] + </ul> + [% END %] + </section> -[% INCLUDE 'pagination.html', param = 'p' %] + [% INCLUDE 'pagination.html', param = 'p' %] + </div> </div> [% INCLUDE 'footer.html' %] - diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss index fa4305715..564c78348 100644 --- a/web/cobrands/angus/_colours.scss +++ b/web/cobrands/angus/_colours.scss @@ -24,7 +24,7 @@ $nav_fg_hover: transparent; $col_big_numbers: $primary; -$col_click_map: $angus_green; +$col_click_map: $angus_blue; $col_click_map_dark: darken($col_click_map, 10%); $col_fixed_label: $angus_green; diff --git a/web/cobrands/angus/base.scss b/web/cobrands/angus/base.scss index 98b25f59e..50f207058 100644 --- a/web/cobrands/angus/base.scss +++ b/web/cobrands/angus/base.scss @@ -25,7 +25,7 @@ body.frontpage #site-logo, } } -.item-list--reports__item, #user-meta p, #front-main #postcodeForm { +.item-list--reports__item, #front-main #postcodeForm { // background-color: $greenwich_light_grey; } diff --git a/web/cobrands/angus/layout.scss b/web/cobrands/angus/layout.scss index cb358679d..35d629400 100644 --- a/web/cobrands/angus/layout.scss +++ b/web/cobrands/angus/layout.scss @@ -165,17 +165,6 @@ body.frontpage { background-color: $base_bg; } } - #user-meta p { - right: -119px; - top: -93px; - margin: 0; - padding: 0; - color: $base_bg; - - a { - position: static; - } - } } body.twothirdswidthpage .content .sticky-sidebar { @@ -283,11 +272,11 @@ footer p.social a:active,footer p.social a:focus,footer p.social a:hover .container { display: block; font-size: 0.9em; - padding: 1em 20px .75em 20px; + padding: 1em 0 0.75em 0; ul { margin: 0; - padding: 0; + padding: 0 20px; list-style: none; li { @@ -378,16 +367,6 @@ body.mappage { } } - #user-meta { - p { - color: $primary_text; - } - - & ~ .container .content { - padding-top: 3.5em; // make room for user menu! - } - } - #category_meta h4 { display: none; } @@ -399,12 +378,6 @@ body.mappage { } } -#user-meta p { - top: 6em; - left: -6em; - color: $angus_light_grey; -} - .angus_footer { border-top: solid 8px $angus_grey; background: $angus_dark_grey; @@ -418,7 +391,6 @@ body.mappage { .tablewrapper, .tablewrapper.bordered { border-top: none; - width: 100%; color: white; padding-bottom: 1em; diff --git a/web/cobrands/angus/position_map.js b/web/cobrands/angus/position_map.js index 36f572f93..31ca1c09a 100644 --- a/web/cobrands/angus/position_map.js +++ b/web/cobrands/angus/position_map.js @@ -333,25 +333,4 @@ var add_streetlights = (function() { return add_streetlights; })(); -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } - add_streetlights(); -} - -function map_fix() {} -var slide_wards_down = 0; +$(add_streetlights); diff --git a/web/cobrands/arreglamibarrio/_colours.scss b/web/cobrands/arreglamibarrio/_colours.scss index cb7013db2..3b1a671e3 100644 --- a/web/cobrands/arreglamibarrio/_colours.scss +++ b/web/cobrands/arreglamibarrio/_colours.scss @@ -14,7 +14,6 @@ $nav_fg_hover: #444; // The "Click map" box on /around $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; // The "fixed" message on a report page $col_fixed_label: #00BD08; diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss index e4686b97c..c36182ff8 100644 --- a/web/cobrands/bromley/_colours.scss +++ b/web/cobrands/bromley/_colours.scss @@ -18,6 +18,5 @@ $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: $bromley_blue; -$col_click_map_dark: darken($bromley_blue, 10%); $col_fixed_label: $bromley_blue; $col_fixed_label_dark: darken($bromley_blue, 10%); diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss index ed3ba193f..27bd45889 100644 --- a/web/cobrands/bromley/layout.scss +++ b/web/cobrands/bromley/layout.scss @@ -64,32 +64,6 @@ body.alertindex form.full-width { margin-left: 0; } -// Override the little banner you get when you're logged in on the map page -// because FMS makes it a different colour and moves it over to the left. -body.mappage #user-meta p { - background-color: $bromley_blue; - border-bottom: 1px solid #444; -} - -// And also override the banner on other pages so that it lines up properly -#user-meta, body.mappage #user-meta { - max-width: 1200px; -} -#user-meta p, -body.frontpage #user-meta p { - top: 0; - right: auto; - background-color: $bromley_blue; - color: #fff; - box-shadow: none; -} - -// Because we've moved the user-meta, we also have to move the #front-main div -// down a bit so that it shows the #user-meta -#front-main { - margin-top:3em -} - // The page h1 needs to be white on desktop, because it's in a blue box h1.main { color: #fff; diff --git a/web/cobrands/default/_colours.scss b/web/cobrands/default/_colours.scss index 5bd3d958f..72f9607cd 100644 --- a/web/cobrands/default/_colours.scss +++ b/web/cobrands/default/_colours.scss @@ -23,7 +23,6 @@ $nav_fg_hover: $primary; $col_big_numbers: #ccc; $col_click_map: $bluey; -$col_click_map_dark: darken($bluey, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/eastsussex/_colours.scss b/web/cobrands/eastsussex/_colours.scss index 0887ba82e..c24c6e688 100644 --- a/web/cobrands/eastsussex/_colours.scss +++ b/web/cobrands/eastsussex/_colours.scss @@ -5,7 +5,6 @@ $eastsussex_primary: #155F91; $primary: $eastsussex_primary; $col_click_map: $eastsussex_primary; -$col_click_map_dark: $eastsussex_primary; $col_fixed_label_dark: $eastsussex_primary; $col_fixed_label: $eastsussex_primary; diff --git a/web/cobrands/eastsussex/base.scss b/web/cobrands/eastsussex/base.scss index d2489f1b0..30f3ba934 100644 --- a/web/cobrands/eastsussex/base.scss +++ b/web/cobrands/eastsussex/base.scss @@ -93,11 +93,6 @@ h1.main { } } -#report-a-problem-sidebar .sidebar-notes a { - color: #fff; - text-decoration: underline; -} - .big-green-banner { text-transform: none; z-index: 5000; diff --git a/web/cobrands/eastsussex/layout.scss b/web/cobrands/eastsussex/layout.scss index 20be807a6..f8836bd1f 100644 --- a/web/cobrands/eastsussex/layout.scss +++ b/web/cobrands/eastsussex/layout.scss @@ -1,4 +1,6 @@ -@import "_colours";; +$mappage-header-height: 16em; + +@import "_colours"; @import "../sass/layout"; #front-main { @@ -6,6 +8,7 @@ margin-top: 0; padding: 0 } + #front-main-container { background-color: $eastsussex_primary; padding: 1em; @@ -64,48 +67,34 @@ body.mappage { display: none; } - #fms_pan_zoom { - top: 18em!important; - } - #mysociety { margin-top: 0; padding-top: 16em; padding-bottom: 0; width: auto; background: transparent; + float: none; } - .content { - div { - max-width: 27em; - } - - // required for non-js placement - #map_box { - left: 30em; - } - } - - #wrapper { display: block; width: auto; } - #report-a-problem-sidebar { - top: 1em; - } - - // Keep the headers fixed at the top on the map page #site-header { - position: fixed; + position: fixed; // Keep the headers fixed at the top on the map page width: 100%; z-index: 2; + background: #dae1e5; // the same colour that the .application-nav normally is + } + + .application-nav { + background: transparent; + padding: 0.2em 0 0 0; } } -.general-notes, #report-a-problem-sidebar p, #report-a-problem-sidebar .sidebar-notes .plain-list li { +.general-notes { font-size: 13px; line-height: 14px; } @@ -220,9 +209,7 @@ body.twothirdswidthpage .content aside { } } -@media only screen and (min-width: 48em) { - footer { - display: block; - } +footer { + display: block; } diff --git a/web/cobrands/eastsussex/position_map.js b/web/cobrands/eastsussex/position_map.js deleted file mode 100644 index 71794e8d6..000000000 --- a/web/cobrands/eastsussex/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } -} - -function map_fix() {} -var slide_wards_down = 0; diff --git a/web/cobrands/fiksgatami/_colours.scss b/web/cobrands/fiksgatami/_colours.scss index 40ec78543..8899f4c97 100644 --- a/web/cobrands/fiksgatami/_colours.scss +++ b/web/cobrands/fiksgatami/_colours.scss @@ -18,7 +18,6 @@ $nav_fg: #fff; $nav_fg_hover: $primary; $col_click_map: $bg; -$col_click_map_dark: darken($bg, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixamingata/_colours.scss b/web/cobrands/fixamingata/_colours.scss index a35e3147f..8ebd0712f 100644 --- a/web/cobrands/fixamingata/_colours.scss +++ b/web/cobrands/fixamingata/_colours.scss @@ -14,6 +14,5 @@ $nav_fg: $primary_text; $nav_fg_hover: #444; $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixmindelo/_colours.scss b/web/cobrands/fixmindelo/_colours.scss index ac39f72e3..e92843203 100644 --- a/web/cobrands/fixmindelo/_colours.scss +++ b/web/cobrands/fixmindelo/_colours.scss @@ -18,7 +18,6 @@ $nav_fg: #000; $nav_fg_hover: $primary; $col_click_map: $mindelo_green; -$col_click_map_dark: darken($mindelo_green, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/fixmystreet.com/_colours.scss b/web/cobrands/fixmystreet.com/_colours.scss index 17447c86e..908356d36 100644 --- a/web/cobrands/fixmystreet.com/_colours.scss +++ b/web/cobrands/fixmystreet.com/_colours.scss @@ -14,7 +14,6 @@ $nav_fg_hover: #444; // The "Click map" box on /around $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; // The "fixed" message on a report page $col_fixed_label: #00BD08; diff --git a/web/cobrands/fixmystreet.com/layout.scss b/web/cobrands/fixmystreet.com/layout.scss index 99b801ed4..848490e7a 100644 --- a/web/cobrands/fixmystreet.com/layout.scss +++ b/web/cobrands/fixmystreet.com/layout.scss @@ -195,10 +195,6 @@ body.twothirdswidthpage { .container { .content { footer { - max-width: 48em; - @media only screen and (min-width: 61em) { - max-width: 60em; - } .tablewrapper { border: 0px; } diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 5935d2bae..dc9637d08 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -11,25 +11,6 @@ function isR2L() { } /* - * general height fixing function - * - * elem1: element to check against - * elem2: target element - * offset: this will be added (if present) to the final value, useful for height errors - */ -function heightFix(elem1, elem2, offset, force) { - var h1 = $(elem1).height(), - h2 = $(elem2).height(); - if (offset === undefined) { - offset = 0; - } - if (h1 > h2 || force) { - $(elem2).css( { 'min-height': h1+offset } ); - } -} - - -/* * very simple tab function * * elem: trigger element, must have an href attribute (so probably needs to be an <a>) @@ -56,24 +37,6 @@ function tabs(elem, indirect) { } } -/* Geographic functions for faking map centre, as it appears to be offset from - where it actually is */ - -function midpoint_box_excluding_column(col_offset, col_width, box_offset, box_width) { - var r2l = isR2L(), - diff = r2l ? box_width : (box_offset.left - col_width), - q = (col_offset.left - diff) / 2; - if ((r2l && q > 0) || (!r2l && q < 0)) { - return 0; - } - return q; -} - -function fixmystreet_midpoint() { - var $content = $('.content'), mb = $('#map_box'); - return midpoint_box_excluding_column($content.offset(), $content.width(), mb.offset(), mb.width()); -} - $(function(){ var $html = $('html'); @@ -91,12 +54,7 @@ $(function(){ if (last_type == type) { return; } if (type == 'mobile') { $html.addClass('mobile'); - $('#map_box').prependTo('.content').css({ - zIndex: '', position: '', - top: '', left: '', right: '', bottom: '', - width: '', height: '10em', - margin: '' - }); + $('#map_box').css({ height: '10em' }); if (typeof fixmystreet !== 'undefined') { fixmystreet.state_map = ''; // XXX } @@ -114,8 +72,6 @@ $(function(){ .addClass('mobile-map-banner') .appendTo('#map_box') .html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); - } else { - $('#fms_pan_zoom').css({ top: '0.5em' }); } $('span.report-a-problem-btn').on('click.reportBtn', function(){ $('html, body').animate({scrollTop:0}, 500); @@ -125,7 +81,7 @@ $(function(){ } else { // Make map full screen on non-mobile sizes. $html.removeClass('mobile'); - position_map_box(); + $('#map_box').css({ height: '' }); if (typeof fixmystreet !== 'undefined') { fixmystreet.state_map = 'full'; } @@ -135,6 +91,12 @@ $(function(){ if (cobrand !== 'oxfordshire') { $('#site-header').show(); } + $('#map_box').prependTo('.content').css({ + position: '', + top: '', left: '', right: '', bottom: '', + height: '', + margin: '' + }); if (typeof variation !== 'undefined' && variation === 1) { banner_text = 'Click map to request a fix'; } @@ -143,7 +105,7 @@ $(function(){ .prependTo('#side') .html(banner_text); } - $('#fms_pan_zoom').css({ top: '4.75em' }); + $('#fms_pan_zoom').css({ top: '' }); $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn'); } last_type = type; @@ -152,11 +114,6 @@ $(function(){ /* * Report a problem page */ - //desktop - if ($('#report-a-problem-sidebar').is(':visible')) { - heightFix('#report-a-problem-sidebar', '.content', 26); - } - //show/hide notes on mobile $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-fwd">' + translation_strings.how_to_send + '</a>').hide(); $('.rap-notes-trigger').click(function(e){ @@ -388,68 +345,74 @@ $(function(){ // A sliding drawer from the bottom of the page, large version $.fn.drawer = function(id, ajax) { - // IE7 positions the fixed tool bar 1em to the left unless it comes after - // the full-width section, ho-hum. Move it to where it would be after an - // open/close anyway - if ($('html.ie7').length) { - var $sw = $('.shadow-wrap'), $content = $('.content[role="main"]'); - $sw.appendTo($content); - } + + // The link/button that triggered the drawer + var $this = $(this); + + // A bunch of elements that will come in handy when opening/closing + // the drawer. Because $sw changes its position in the DOM, we capture + // all these elements just once, the first time .drawer() is called. + var $sidebar = $('#map_sidebar'); + var $sw = $this.parents('.shadow-wrap'); + var $swparent = $sw.parent(); + this.toggle(function(){ - var $this = $(this), d = $('#' + id), $content = $('.content[role="main"]'); - if (!$this.addClass('hover').data('setup')) { - // make a drawer div with an innerDiv - if (!d.length) { - d = $('<div id="' + id + '">'); - } - var innerDiv = $('<div>'); - d.wrapInner(innerDiv); + // Find the specified drawer, or create it if it doesn't exist + var $drawer = $('#' + id); + if ($drawer.length === 0) { + $drawer = $('<div id="' + id + '">'); + $drawer.appendTo($swparent); + } - // if ajax, load it with a spinner + if ( ! $this.data('setup') ) { + // Optionally fill $drawer with HTML from an AJAX data source if (ajax) { var href = $this.attr('href') + ';ajax=1'; var margin = isR2L() ? 'margin-left' : 'margin-right'; - $this.prepend(' <img class="spinner" src="/cobrands/fixmystreet/images/spinner-black-333.gif" style="' + margin + ':2em;">'); - innerDiv.load(href, function(){ - $('.spinner').remove(); - }); + var $ajax_result = $('<div>').appendTo($drawer); + $ajax_result.html('<p style="text-align:center">Loading</p>'); + $ajax_result.load(href); } - // Tall drawer - put after .content for scrolling to work okay. - // position over the top of the main .content in precisely the correct location + // Style up the $drawer + var drawer_top = $(window).height() - $sw.height(); var drawer_css = { - position: 'absolute', - zIndex: '1100', - marginTop: $('html.ie6, html.ie7').length ? '-3em' : 0, // IE6/7 otherwise include the 3em padding and stay too low - top: $(window).height() - $content.offset().top + position: 'fixed', + zIndex: 10, + top: drawer_top, + bottom: 0, + width: $sidebar.css('width'), + paddingLeft: $sidebar.css('padding-left'), + paddingRight: $sidebar.css('padding-right'), + overflow: 'auto', + background: '#fff' }; drawer_css[isR2L() ? 'right' : 'left'] = 0; - d.insertAfter($content).addClass('content').css(drawer_css) - .removeClass('hidden-js').find('h2').css({ marginTop: 0 }); + $drawer.css(drawer_css).removeClass('hidden-js').find('h2').css({ marginTop: 0 }); $this.data('setup', true); } - //do the animation - $('.shadow-wrap').prependTo(d).addClass('static'); - d.show().animate({top:'3em'}, 1000, function(){ - $content.fadeOut(function() { - d.css({ position: 'relative' }); - }); - }); + // Insert the .shadow-wrap controls into the top of the drawer. + $sw.addClass('static').prependTo($drawer); + + // Animate the drawer into place, enitrely covering the sidebar. + var sidebar_top_px = $sidebar.position().top; + $drawer.show().animate({ top: sidebar_top_px }, 1000); + }, function(e){ - var $this = $(this), d = $('#' + id), $sw = $('.shadow-wrap'), - $content = $('.content[role="main"]'), - tot_height = $(window).height() - d.offset().top; - $this.removeClass('hover'); - d.css({ position: 'absolute' }).animate({ top: tot_height }, 1000, function(){ - d.hide(); - $sw.appendTo($content).removeClass('static'); + // Slide the drawer down, move the .shadow-wrap back to its + // original parent, and hide the drawer for potential re-use later. + var $drawer = $('#' + id); + var drawer_top = $(window).height() - $sw.height(); + + $drawer.animate({ top: drawer_top }, 1000, function(){ + $sw.removeClass('static').appendTo($swparent); + $drawer.hide(); }); - $content.show(); }); }; - if ($('html.mobile').length || slide_wards_down ) { + if ($('html.mobile').length) { $('#council_wards').hide().removeClass('hidden-js').find('h2').hide(); $('#key-tool-wards').click(function(e){ e.preventDefault(); @@ -541,23 +504,4 @@ $.fn.drawer = function(id, ajax) { }); } - /* - * heightfix the desktop .content div - * - * this must be kept near the end so that the - * rendered height is used after any page manipulation (such as tabs) - */ - if (!$('html.mobile').length) { - if (!($('body').hasClass('fullwidthpage'))){ - var offset = -15 * 16; - if (cobrand == 'oxfordshire') { - // Oxfordshire uses box-sizing:border-box and padding to work out height - offset = 0; - } - heightFix(window, '.content', offset, 1); - // in case we have a map that isn't full screen - map_fix(); - } - } - }); diff --git a/web/cobrands/fixmystreet/images/chevron-white-left.svg b/web/cobrands/fixmystreet/images/chevron-white-left.svg index 4dc587e79..544197dd2 100644 --- a/web/cobrands/fixmystreet/images/chevron-white-left.svg +++ b/web/cobrands/fixmystreet/images/chevron-white-left.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M62 0H49L36 16l13 16h13L49 16"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="43" height="33"><path fill="#fff" d="M42 0H29L16 16l13 16h13L29 16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/images/chevron-white-right.svg b/web/cobrands/fixmystreet/images/chevron-white-right.svg index 3aa713765..7a953bfbc 100644 --- a/web/cobrands/fixmystreet/images/chevron-white-right.svg +++ b/web/cobrands/fixmystreet/images/chevron-white-right.svg @@ -1 +1 @@ -<svg xmlns="http://www.w3.org/2000/svg" width="63" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file +<svg xmlns="http://www.w3.org/2000/svg" width="43" height="33"><path fill="#fff" d="M0 0h13l13 16-13 16H0l13-16"/></svg>
\ No newline at end of file diff --git a/web/cobrands/fixmystreet/position_map.js b/web/cobrands/fixmystreet/position_map.js deleted file mode 100644 index 71794e8d6..000000000 --- a/web/cobrands/fixmystreet/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } -} - -function map_fix() {} -var slide_wards_down = 0; diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss index 2f3aa913c..d2dc1c3ed 100644 --- a/web/cobrands/greenwich/_colours.scss +++ b/web/cobrands/greenwich/_colours.scss @@ -20,7 +20,6 @@ $nav_fg_hover: transparent; $col_big_numbers: $primary; $col_click_map: $greenwich_red; -$col_click_map_dark: darken($col_click_map, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/greenwich/base.scss b/web/cobrands/greenwich/base.scss index dc85f5600..517b16471 100644 --- a/web/cobrands/greenwich/base.scss +++ b/web/cobrands/greenwich/base.scss @@ -28,7 +28,7 @@ body.frontpage #site-logo, background-size: cover; } -.item-list--reports__item, #user-meta p, #front-main #postcodeForm { +.item-list--reports__item, #front-main #postcodeForm { background-color: $greenwich_light_grey; } diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss index a60313de3..ad31941f6 100644 --- a/web/cobrands/greenwich/layout.scss +++ b/web/cobrands/greenwich/layout.scss @@ -61,10 +61,6 @@ body.frontpage #site-header, #site-header { } body.frontpage { - #user-meta p { - top: -9em; - } - .item-list--reports__item { border-left: solid 4px $primary; } @@ -76,11 +72,6 @@ body.frontpage { } } -body.twothirdswidthpage #user-meta p { - padding-bottom: 0; - z-index: 2; -} - .nav-wrapper .nav-wrapper-2 { border-top: none; } diff --git a/web/cobrands/harrogate/_colours.scss b/web/cobrands/harrogate/_colours.scss index 11bf383f7..1c943ede3 100644 --- a/web/cobrands/harrogate/_colours.scss +++ b/web/cobrands/harrogate/_colours.scss @@ -8,7 +8,6 @@ $primary: $harrogate_primary; $primary_dark: darken($harrogate_primary, 20%); $col_click_map: $harrogate_primary; -$col_click_map_dark: $harrogate_primary; $col_fixed_label_dark: $harrogate_primary; $col_fixed_label: $harrogate_primary; diff --git a/web/cobrands/harrogate/layout.scss b/web/cobrands/harrogate/layout.scss index 417eff539..287fd85f4 100644 --- a/web/cobrands/harrogate/layout.scss +++ b/web/cobrands/harrogate/layout.scss @@ -1,55 +1,36 @@ +// Super tall map page header to accommodate the big logo +$mappage-header-height: 10em; + @import "_colours"; @import "../sass/layout"; -@media only screen and (min-width: 48em) { - #site-logo, - .ie6 #site-logo, - - body.frontpage #site-logo, - .ie6 body.frontpage #site-logo, - - body.twothirdswidthpage #site-logo, - .ie6 body.twothirdswidthpage #site-logo - { - position: relative; - top: 1.2em; - margin: 0; - padding: 0; - background: url("/cobrands/harrogate/HBCLogo.png") 0 0 no-repeat; - width: 227px; - height: 122px; - } - - body.frontpage #site-header, - .ie6 body.frontpage #site-header, - - body.twothirdswidthpage #site-header, - .ie6 body.twothirdswidthpage #site-header, - - body.mappage #site-header, - .ie6 body.mappage #site-header, - body.mappage .nav-wrapper-2, - .ie6 body.mappage .nav-wrapper-2 - { - height: 10em; - } - - #fms_pan_zoom { - top: 10.75em!important; - } +#site-logo, +.ie6 #site-logo, +body.frontpage #site-logo +{ + position: relative; + top: 1.2em; + margin: 0; + padding: 0; + background: url("/cobrands/harrogate/HBCLogo.png") 0 0 no-repeat; + width: 227px; + height: 122px; +} + +#site-header, +body.frontpage #site-header, +.ie6 body.frontpage #site-header, +.ie7 body.frontpage #site-header, +.nav-wrapper-2 +{ + height: 10em; } -@media only screen and (min-width: 48em) { - body.twothirdswidthpage .container .content footer .tablewrapper a:link, - body.twothirdswidthpage .container .content footer .tablewrapper a:visited, - body.fullwidthpage .container .content footer .tablewrapper a:link, - body.fullwidthpage .container .content footer .tablewrapper a:visited { - color: white; - } - - body.mappage #user-meta+.container .content { - padding-top: 1.5em; - } +body.twothirdswidthpage .container .content footer .tablewrapper a:link, +body.twothirdswidthpage .container .content footer .tablewrapper a:visited, +body.fullwidthpage .container .content footer .tablewrapper a:link, +body.fullwidthpage .container .content footer .tablewrapper a:visited { + color: white; } #main-nav { @@ -69,10 +50,8 @@ body.twothirdswidthpage .container .content { padding-right: 0; } -@media only screen and (min-width: 48em) { - body.fullwidthpage .container .content { - margin-top: 3em; // push far enough for the sign-out link to also be visible - } +body.fullwidthpage .container .content { + margin-top: 3em; // push far enough for the sign-out link to also be visible } body.twothirdswidthpage .content aside { @@ -130,18 +109,6 @@ body.mappage .nav-wrapper .nav-wrapper-2 { } -body.frontpage #user-meta p { - top: -2.4em; -} - -body.mappage #user-meta { - top: 2em; - p { - background: $primary; - border-color: $primary_dark; - } -} - body.mappage .content { margin-top: 4em; } diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss index ce47a17c4..947b97625 100644 --- a/web/cobrands/hart/_colours.scss +++ b/web/cobrands/hart/_colours.scss @@ -4,7 +4,6 @@ $hart_primary: #7ECBA2; $primary: $hart_primary; $col_click_map: $hart_primary; -$col_click_map_dark: $hart_primary; $col_fixed_label_dark: $hart_primary; $col_fixed_label: $hart_primary; diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss index ac833934d..95607242c 100644 --- a/web/cobrands/hart/hart.scss +++ b/web/cobrands/hart/hart.scss @@ -12,23 +12,23 @@ input[type=text], input[type=password], input[type=email], input[type=file], -textarea, +textarea, select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px; @include border-radius(0); } .green-btn, button.green-btn, input.green-btn { - background: #5b7189; - border: 1px solid #8e9eb0; - color: #fff; - font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; - font-weight: normal; - margin: 0; min-height: 23px; + background: #5b7189; + border: 1px solid #8e9eb0; + color: #fff; + font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; + font-weight: normal; + margin: 0; min-height: 23px; /* outline: 1px solid #405062; */ - padding: 4px 8px; - text-transform: uppercase; + padding: 4px 8px; + text-transform: uppercase; } -.green-btn:hover, button.green-btn:hover, input.green-btn:hover { - background: #5b7189; border: 1px solid #8e9eb0; +.green-btn:hover, button.green-btn:hover, input.green-btn:hover { + background: #5b7189; border: 1px solid #8e9eb0; } .form-txt-submit-box input[type=submit] { padding-top: 0; padding-bottom: 0; width: auto; @@ -38,11 +38,11 @@ select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1d h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; } body { color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.4; background-color: $base_bg;} -.nav-wrapper-2, +.nav-wrapper-2, body.mappage .nav-wrapper .nav-wrapper-2, body.frontpage .nav-wrapper-2 { border: 0; - border-top: solid 4px $hart_primary; /* otherwise overridden in base layout.scss + border-top: solid 4px $hart_primary; /* otherwise overridden in base layout.scss for some templates only */ min-height: auto; background-color: $hart_primary; @@ -53,6 +53,11 @@ body.frontpage .nav-wrapper-2 { } @media only screen and (min-width:48em) { + #map_box, + #map_sidebar { + top: 173px + 32px; + } + body.frontpage #site-header { height: 13em; @@ -61,6 +66,13 @@ body.frontpage .nav-wrapper-2 { } } + body.mappage { + .header-container, + .main-menu { + max-width: none; // containers are full width on map page + } + } + #skipped-map { clear: both; margin-top: 3em; /* required to push "Your Reports" visible on Safari/IE */ @@ -145,22 +157,16 @@ body.frontpage #site-logo, .sign-in a:hover, .sign-in a:active {text-decoration:underline;} .main-menu-wrapper { - /* z-index:2; */ background-color: #FFF; - width:100%; + width: 100%; + @media only screen and (min-width:48em) { position: absolute; - } -} - -@media only screen and (min-width:48em) { - body.mappage .main-menu-wrapper { - position: fixed + box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map } } .main-menu { - li { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; margin: 0; @@ -186,8 +192,7 @@ body.frontpage #site-logo, } } @media only screen and (min-width:48em) { - margin-top: 173px; - height: 2em; + height: 32px; max-width: 60em; margin: 173px auto 0 auto; @@ -196,7 +201,7 @@ body.frontpage #site-logo, margin-left: 1em; text-align: center; - span { + span { display: inline; } @@ -248,10 +253,10 @@ body.frontpage .table-cell .content { height: auto; overflow: hidden; padding: 15px 15px 50px 15px; - color:#fff; + color:#fff; @media only screen and (min-width:48em) { - margin-left:-15px; + margin-left:-15px; padding: 35px 25px 40px 25px; } @@ -298,10 +303,10 @@ body.frontpage .table-cell .content { p { margin: 0; } - a:link, a:visited { - color: #fff; text-decoration: none; + a:link, a:visited { + color: #fff; text-decoration: none; } - a:hover, a:active { + a:hover, a:active { text-decoration: underline; } @@ -327,30 +332,30 @@ body.frontpage .table-cell .content { } .footer-nav, { - height:35px; + height:35px; margin-left: 0; margin-bottom: 0; @media only screen and (min-width:48em) { - float: right; + float: right; } - li { + li { list-style-type: none; - float: left; + float: left; width: 50%; margin-bottom: 0; a { display: block; - border-bottom:1px solid #797f7f; + border-bottom:1px solid #797f7f; padding: 10px 0; margin-left: 10px; margin-right: 10px; } @media only screen and (min-width:48em) { - border-right:1px solid #fff; + border-right:1px solid #fff; width: auto; a { border-bottom: none; @@ -358,8 +363,8 @@ body.frontpage .table-cell .content { margin-left: 0; margin-right: 0; } - &:last-child { - border: none; + &:last-child { + border: none; padding-right: 0; } } @@ -403,7 +408,7 @@ body.frontpage .table-cell .content { .main-menu ul { margin: 0; - padding-top: 8px; + line-height: 32px; } .main-menu li { @@ -415,9 +420,6 @@ body.frontpage .table-cell .content { padding-right: 0; } -.main-menu li.last a:hover, .main-menu li.last a:active { -} - //#search input { display: inline; margin: 0; @include border-radius(0em); } //#search input.button { font-weight: normal; text-transform: none; } // The footer breaks the map pages layout, easier to exclude it than @@ -425,6 +427,7 @@ body.frontpage .table-cell .content { body.mappage .hart-footer-wrapper { display: none; } + #hart-powered-by { float: left; width: 50%; @@ -446,10 +449,6 @@ body.mappage .hart-footer-wrapper { display: inline; } -#fms_pan_zoom { - top: 12em; -} - #hart_hants_note { background-color: lighten($hart_primary, 30%); padding: 0.5em; diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss index 99f8bdfcf..f17614cc1 100644 --- a/web/cobrands/hart/layout.scss +++ b/web/cobrands/hart/layout.scss @@ -1,44 +1,20 @@ @import "_colours"; @import "../sass/layout"; -@media only screen and (min-width: 48em) { - .content { - margin-top: 8em; - } - .header-container { - max-width: 60em; - margin: 0 auto; - padding: 0em; - position: relative; - } - body.mappage .content { - margin-top: 14em; - } - - #front-main-container { - background-color: $hart_primary; - } - .hart-footer-wrapper { - display: block; - } +.content { + margin-top: 8em; } -#report-a-problem-sidebar { - top: 14em; +#front-main-container { + background-color: $hart_primary; } body.twothirdswidthpage .content { - width: 30em; aside { - left: 672px; - width: 208px; - padding: 16px; @include box-shadow(none); } .sticky-sidebar { - left: 672px; aside { - position: fixed; top: 14em; } } diff --git a/web/cobrands/hart/position_map.js b/web/cobrands/hart/position_map.js deleted file mode 100644 index e5bc78c9a..000000000 --- a/web/cobrands/hart/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 250, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 250, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } -} - -function map_fix() {} -var slide_wards_down = 0; diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss index ed494674a..a8a78dc6e 100644 --- a/web/cobrands/oxfordshire/_colours.scss +++ b/web/cobrands/oxfordshire/_colours.scss @@ -21,7 +21,6 @@ $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: $oxfordshire_lt_green; -$col_click_map_dark: $primary_text; $col_fixed_label: $oxfordshire_lt_green; $col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%); diff --git a/web/cobrands/oxfordshire/_oxon.scss b/web/cobrands/oxfordshire/_oxon.scss index 46de1f22b..20a38ac7f 100644 --- a/web/cobrands/oxfordshire/_oxon.scss +++ b/web/cobrands/oxfordshire/_oxon.scss @@ -64,16 +64,6 @@ body { margin: 0px 5px 0px 5px } } - .oxford-user { - float: right; - p { - padding: 0.25em; - margin: 0.5em 0; - a { - margin: 0 0.5em; - } - } - } } #oxford-main-menu { diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss index 0bd37b95f..62b2598e8 100644 --- a/web/cobrands/oxfordshire/layout.scss +++ b/web/cobrands/oxfordshire/layout.scss @@ -1,3 +1,7 @@ +// We specify a 4em header height in pixels, to make +// the .menubar link padding calculations simpler. +$mappage-header-height: 64px; + @import "_colours"; @import "../sass/layout"; @import "../sass/report_list_pins"; @@ -24,8 +28,7 @@ body, body a { } // Currently hide the nav-wrapper, because it's in going into Oxfordshire's own nav -// likewise with user-meta -.nav-wrapper, #user-meta { +.nav-wrapper { display: none; } @@ -71,10 +74,6 @@ body.twothirdswidthpage { .full-width { width: 464px; } .shadow-wrap { width: 464px; } -#map_box { - width: 956px; - height: 600px; -} .content { width: 432px; } body.fullwidthpage .content { width: auto; } @@ -94,8 +93,6 @@ body.twothirdswidthpage .content { } body.mappage { - $mappage-header-height: 60px; - #oxford-wrapper { width: auto; padding: 0; @@ -103,13 +100,13 @@ body.mappage { } #oxford-header { - position: fixed; + position: absolute; top: 0; left: 0; right: 0; - z-index: 2; // 1 more than `body.mappage .content` + z-index: 1; width: auto; - min-height: $mappage-header-height; + min-height: $mappage-header-height; // override the normal min-height of 133px padding: 0; background-color: #069b01; // picked from header.jpg background-position: 100% 40%; @@ -160,25 +157,6 @@ body.mappage { } } } - - .oxford-user { - display: block; - font-size: 13px; - margin: 0; - color: mix(#ddd, #069b01, 80%); - - p { - margin: 0; - padding-top: ($mappage-header-height - 20px) / 2; - padding-bottom: ($mappage-header-height - 20px) / 2; - line-height: 20px; - } - - a { - padding: 0 10px; - text-decoration: none; - } - } } .wrapper .table-cell { @@ -190,36 +168,27 @@ body.mappage { width: auto; } - .content { - padding: 1em; - padding-top: $mappage-header-height + 10px; - position: relative; - z-index: 1; - box-shadow: 0 0 5px rgba(0,0,0,0.3); + #map_sidebar { background-color: $oxfordshire_very_light_green; + } - // fixmystreet.js gives this element a min-height equal to the window height. - // Set border-box sizing, so that our padding doesn't get added onto height. - box-sizing: border-box; - - .extra-text { - padding: 1em; - margin: 0 -1em; - border-bottom: 1px solid $oxfordshire_mid_grey_green; + .extra-text { + padding: 1em; + margin: 0 -1em; + border-bottom: 1px solid $oxfordshire_mid_grey_green; - p:last-child { - margin-bottom: 0; - } + p:last-child { + margin-bottom: 0; } + } - .full-width { - width: auto; - margin: 0 -1em; - } + .full-width { + width: auto; + margin: 0 -1em; + } - input[type="file"] { - background-color: transparent; - } + input[type="file"] { + background-color: transparent; } // Space between green header and sidebar content @@ -306,8 +275,6 @@ h4.static-with-rule { } .shadow-wrap { - width: 432px; - ul#key-tools { -webkit-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green; -moz-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green; diff --git a/web/cobrands/oxfordshire/position_map.js b/web/cobrands/oxfordshire/position_map.js deleted file mode 100644 index bcd0e0c12..000000000 --- a/web/cobrands/oxfordshire/position_map.js +++ /dev/null @@ -1,22 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } -} - -function map_fix() {} -var slide_wards_down = 0; - diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 2c8c90c6f..15abd823f 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -554,27 +554,6 @@ body.mappage .wrapper { position: static; } -// this is the user's logged in details or the login link etc -#user-meta { - p { - position: relative; - color: $primary_text; - background: $primary; - padding: flip(1em 6em 1em 1em, 1em 1em 1em 6em); - a { - position: absolute; - #{$right}: 1em; - @include inline-block; - text-transform:uppercase; - font-size:0.75em; - background:#333; - padding:0.25em 0.75em; - color:#fff; - @include border-radius(0.25em); - } - } -} - // #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic .shadow-wrap { @@ -829,25 +808,13 @@ input.final-submit { .big-green-banner { position: relative; - top:-1.75em; + top: -1.75em; background: $col_click_map; color: #fff; - padding:1em; - text: { - transform:uppercase; - align:center; - } - font-size:0.875em; - &:before { - content: ""; - #{$left}: -0.5em; - top:0; - position: absolute; - width: 0; - height: 0; - border-#{$left}: 0.5em solid transparent; - border-bottom: 0.5em solid $col_click_map_dark; - } + padding: 1em; + text-transform: uppercase; + text-align: center; + font-size: 0.875em; } .banner { @@ -1061,17 +1028,27 @@ input.final-submit { } // map stuff -#map_box{ +#map_box { @extend .full-width; background: #333; height: 29em; margin-bottom: 1em; overflow: hidden; position: relative; + #map { width: 100%; height: 100%; - position: relative; + + // IE7 doesn't understand 100% height when the parent height is "auto", + // so we have to explicitly tell it to pin the element to the top and + // bottom of the parent. No need for an ie7-specific condition, because + // this makes no difference in other browsers. + // We keep the "height: 100%" in there to give IE7 context for the 100% + // height on #map's child, div.olMapViewport. + position: absolute; + top: 0; + bottom: 0; } } @@ -1085,9 +1062,9 @@ html.js #map .noscript { // OpenLayers fix for navigation being top right // Left and right so that zoom can be left, pan right. #fms_pan_zoom { - top: 0.5em; - #{$left}: 0.5em !important; - #{$right}: 0.5em !important; + top: 0.5em; // This will be overridden in JS if there's a full screen map with banner + #{$left}: 0.5em; + #{$right}: 0.5em; } // The left and right of the above causes the navigation to move off-screen left in IE6. .ie6 #fms_pan_zoom { @@ -1101,55 +1078,55 @@ html.js #map .noscript { #fms_pan_zoom_panright, #fms_pan_zoom_zoomin, #fms_pan_zoom_zoomout { - width:36px !important; - height:36px !important; + width: 36px; + height: 36px; text-indent: flip(-999999px, 999999px); // text-align from OL style makes this necessary - background:url($image-sprite) no-repeat; + background: url($image-sprite) no-repeat; filter: none !important; // Override OpenLayers PNG handling of the navigation } #fms_pan_zoom_zoomworld { - display:none !important; - visibility:none !important; + display: none !important; + visibility: none !important; } #fms_pan_zoom_panup { - background-position:-42px -222px; - #{$right}: 30px !important; - #{$left}: auto !important; - top:0 !important; + background-position: -42px -222px; + #{$right}: 30px; + #{$left}: auto; + top: 0; } #fms_pan_zoom_pandown { - background-position:-42px -282px; - #{$right}: 30px !important; - #{$left}: auto !important; - top:72px !important; + background-position: -42px -282px; + #{$right}: 30px; + #{$left}: auto; + top: 72px; } #fms_pan_zoom_panleft { - background-position:-12px -252px; - width:48px !important; - #{$right}: flip(48px, 0) !important; - #{$left}: auto !important; - top:36px !important; + background-position: -12px -252px; + width: 48px; + #{$right}: flip(48px, 0); + #{$left}: auto; + top: 36px; } #fms_pan_zoom_panright { - background-position:-60px -252px; - width:48px !important; - #{$right}: flip(0, 48px) !important; - #{$left}: auto !important; - top:36px !important; + background-position: -60px -252px; + width: 48px; + #{$right}: flip(0, 48px); + #{$left}: auto; + top: 36px; } #fms_pan_zoom_zoomin { - background-position:-152px -223px; - height:44px !important; - #{$left}: 0 !important; - top:0 !important; + background-position: -152px -223px; + height: 44px; + #{$left}: 0; + top: 0; } #fms_pan_zoom_zoomout { - background-position:-152px -259px; - height:44px !important; - #{$left}: 0 !important; - top:44px !important; + background-position: -152px -259px; + height: 44px; + #{$left}: 0; + top: 44px; } //hide pins, show old reports etc @@ -1819,6 +1796,13 @@ table.nicetable { } } +.my-account-buttons a { + display: inline-block; + background: #f6f6f6; + padding: 0.5em 1em; + border-radius: 0.2em; +} + @media screen { .print-only { diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss index 02dab82d8..99e6d7761 100644 --- a/web/cobrands/sass/_layout.scss +++ b/web/cobrands/sass/_layout.scss @@ -2,13 +2,15 @@ $image-sprite: '/cobrands/fixmystreet/images/sprite.png' !default; $layout_front_stats_color: $primary !default; +$mappage-header-height: 4em !default; .internal-link-fixed-header { display: block; - /* 5em is roughly the height of .nav-wrapper-2 (4em) plus the border-top on - .nav-wrapper-2 (4px), plus the padding-top on .item-list__item (0.5em). */ - padding-top: 5em; - margin-top: -5em; + /* Roughly the height of .nav-wrapper-2 (mappage-header-height) plus the + * border-top on .nav-wrapper-2 (4px), plus the padding-top on + * .item-list__item (0.5em). */ + padding-top: $mappage-header-height + 1em; + margin-top: -($mappage-header-height + 1em); } //hacks for desk/mob only stuff @@ -42,16 +44,6 @@ h1 { position: relative; } -//z-index stack order gets reset to 0 in ie6/7 if you position anything, -//so to fix things we give it a high value (don't ask me why) -//see: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ -//this affects #site-logo -.ie6, .ie7 { - .container { - z-index:100; - } -} - .wrapper{ display: table; caption-side: top; @@ -105,27 +97,22 @@ h1 { .container { position: static;//reset position so the nav links become clickable } + + .ie6 &, + .ie7 & { + height: 3em; + // Without this, the #site-logo is unclickable. + // Something to do with broken z-index nesting in IE6-7. + z-index: 2; + } } + #site-logo { top: 0.9em; #{$left}: auto; position: absolute; z-index: 3; } -.ie6, .ie7 { - #site-header { - height:3em; - .container { - //ie broken z-index bug: the site-logo won't appear if we don't do this - //doesn't seem to render the nav link unclickable like in other browsers - position: relative; - } - } - #site-logo { - position: absolute; - top:-3.25em; - } -} #nav-link { #{$right}: auto; @@ -235,18 +222,42 @@ h1 { // map page - has fixed header and different styling body.mappage { + + .wrapper .table-cell, + .nav-wrapper { + // No need for the table-cell stuff now we're using absolute positioning + display: block; + } + .container { width: auto; + position: static; } .content { - float: $left; - padding: 1em 1em 10em; + width: auto; + padding: 0; margin: 0; } + #site-header { + // With the exception of the #site-logo child, the rest of + // #site-header gets entirely hidden behind .nav-wrapper-2 + position: absolute; + z-index: auto; + top: 0; + left: 0; + right: 0; + height: $mappage-header-height; + } + #site-logo { + position: absolute; #{$left}: 12px; + // Also inherits... + // `top: 0.9em` + // `z-index: 3` + // ...from the non-mappage version, above } #main-nav { @@ -254,50 +265,34 @@ body.mappage { margin-#{$right}: 1em; } - .nav-menu--main a, .nav-menu--main span { - padding: 1.4em 0.75em 1.35em; - } + .nav-wrapper { + .nav-wrapper-2 { + position: absolute; + z-index: auto; + top: 0; + left: 0; + right: 0; + background: $map_nav_bg; - .nav-menu--main a.report-a-problem-btn { - padding: 0.5em; - margin: 0.9em 0.25em 0.85em; - } + // Watch out! If the nav links break onto two lines, the header will + // get taller, and overlap the top of #map_sidebar and #map_box. + // (But at least the nav links will be legible.) + min-height: $mappage-header-height; - .nav-wrapper{ - .nav-wrapper-2{ - position: fixed; - background: $map_nav_bg; + // Count the 4px border-top as part of the height (mappage-header-height) + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } } - #site-logo{ - position: fixed; + .nav-menu--main a, .nav-menu--main span { + padding: 1.4em 0.75em 1.35em; } - #user-meta { - max-width: none; - p { - display: block; - height: auto; - width: 22.2em; // 27em (.content width) - 2em (.content padding) - 6em - 0.8em - padding: flip(0.5em 6em 0.5em 0.8em, 0.5em 0.8em 0.5em 6em); - top: 0; - #{$left}: 0; - z-index: 1; - box-shadow: none; - background: #FCEA9A; - border-bottom: 1px solid #ffd000; - - a { - // move the "Sign out" link in and down a bit, because of extra padding on parent - top: 0.8em; - #{$right}: 0.8em; - } - } - - & + .container .content { - padding-top: 3.5em; // make room for user menu! - } + .nav-menu--main a.report-a-problem-btn { + padding: 0.5em; + margin: 0.9em 0.25em 0.85em; } .banner { @@ -324,9 +319,6 @@ body.mappage { #site-logo { position: absolute; } - #user-meta { - margin-#{$left}: 2em; - } } } //ie8 needs different stuff on .nav-wrapper so we @@ -347,6 +339,42 @@ body.mappage { } } +#map_box { + position: absolute; + z-index: auto; + top: $mappage-header-height; + bottom: 0; + #{$right}: 0; + #{$left}: 29em; // width of sidebar + 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; + } +} + +#map_sidebar { + position: absolute; + z-index: auto; + top: $mappage-header-height; + #{$left}: 0; + bottom: 0; + width: 27em; // width of sidebar, minus padding + padding: 1em 1em 3em 1em; // extra padding-bottom to clear the .shadow-wrap element + 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; + // 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); + } +} + #skip-this-step { display: block; color: inherit; @@ -597,17 +625,6 @@ body.authpage { } } -// map box (fallback for non js really as most users -// will have fullscreen map) -#map_box{ - position: absolute; - height: 29em; - width: 29em; - #{$right}: 1em; - top: 3em; - z-index:1; -} - // Openlayers map controls (overrides) #fms_pan_zoom_panup, #fms_pan_zoom_pandown, @@ -623,14 +640,14 @@ body.authpage { // push zoom back over to right #fms_pan_zoom_zoomin { - #{$left}: auto !important; - #{$right}: 30px !important; - top:130px !important; + #{$left}: auto; + #{$right}: 30px; + top: 130px; } #fms_pan_zoom_zoomout { - #{$left}: auto !important; - #{$right}: 30px !important; - top:174px !important; + #{$left}: auto; + #{$right}: 30px; + top: 174px; } .olControlAttribution { @@ -668,45 +685,6 @@ body.authpage { } } -// log in bit, pokes above the .content div -#user-meta{ - display:block; - position: relative; - max-width: 60em; - margin: 0 auto; - p { - @include inline-block; - position: absolute; - top: 1em; - #{$left}: 1em; - height:2em; - padding: flip(0.25em 6em 0.5em 0.5em, 0.25em 0.5em 0.5em 6em); - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); - a { - top:0.5em; - #{$right}: 0.5em; - font-size:0.6875em; - padding:0.5em 0.75em; - line-height:1em; - &:hover { - text-decoration:none; - background:#444; - } - } - } -} -.ie6, .ie7 { - #user-meta { - z-index:1; - p { - top:-2em; - } - } -} -.ie6 #user-meta { - width: 60em; //ie6 doesn't like max-width -} - // Wraps around #key-tools box - sticks to the bottom of the screen on desktop .shadow-wrap { @@ -764,13 +742,22 @@ body.authpage { &.static { padding: 0 0 1em; position: static; + width: auto; // avoid horizontal scrollbar as drawer opens (on devices with permanent scroll bars) } } + // The padding is for the fading out when it's fixed positioned, which it isn't in IE6. .ie6 .shadow-wrap { padding-top: 0; } +// 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; @@ -780,24 +767,14 @@ body.authpage { margin-bottom: 0; } -// pokes over the RHS with a little triangle .big-green-banner { top: auto; - #{$right}: -1.25em; - margin-#{$left}: -2em; + margin: (-1em/1.375) (-1em/1.375) 0 (-1em/1.375); font-size: 1.375em; - padding: flip(1em 3em 1em 1em, 1em 1em 1em 3em); + padding: flip(1em 2em 1em 1em, 1em 1em 1em 2em); background: $col_click_map inline-image("../fixmystreet/images/chevron-white-#{$right}.svg") $right center no-repeat; - background-size: 27px+36px 33px; - &:before { - left: flip(auto, 0); - right: flip(0, auto); - top: -0.5em; - position: absolute; - border-top: 0.5em solid transparent; - border-#{$left}: 0.5em solid $col_click_map_dark; - border-bottom:none; - } + background-size: 43px 33px; + span { display: block; font-size: 80%; @@ -848,14 +825,6 @@ body.authpage { } } - -// for pulling elements fullwidth regardless -// of .contents' padding -.full-width{ - margin: flip(0 0 0em -1em, 0 -1em 0 0); - width: 29em; -} - /*FORMS*/ input[type=text], input[type=password], @@ -875,40 +844,32 @@ textarea.form-error { @include border-radius(0 0 0.25em 0.25em); } -#report-a-problem-sidebar { - position: absolute; - #{$left}: 29em; - width: 15em; - @include box-shadow(rgba(0, 0, 0, 0.6) 0px 0px 4px 1px); +// If the form is .with-notes, limit the width of the inputs +// to make space for the #report-a-problem-sidebar. +#side-form, #side { + .with-notes & { + width: 27em; + } } -// Report a problem sidebar notes +// Notes presented alongside the reporting form #report-a-problem-sidebar { - top:5em; - div { - padding:1em; - font-size:0.75em; - background:#eeeeee; - } - .sidebar-notes { - background:#333333; - color:#ffffff; + margin-bottom: 2em; + + // If the parent is .with-notes we know we have space to + // float the sidebar content to the side of the form. + .with-notes & { + float: #{$right}; + width: 13em; + margin-#{$right}: -15em; } -} -.ie6, .ie7 { - #report-a-problem-sidebar { - #{$left}: 28.5em; // 0.5em left margin gone on .content in IE6/7, so reduce this accordingly. - z-index: 1; + + div { + font-size: 0.75em; } -} -.no-js #report-a-problem-sidebar { - position: static; - width: auto; - @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); - .sidebar-tips, .sidebar-notes { - font-size:1em; + color: #666; } } @@ -937,24 +898,6 @@ body.frontpage { height: 60px; background: url($image-sprite) -2px -108px no-repeat; } - #user-meta { - z-index:10; - p { - top: -4em; - #{$left}: auto; - #{$right}: 0; - color:$primary; - background:none; - @include box-shadow(rgba(0, 0, 0, 0) 0 0 0); - a { - background:#fff; - color:#1a1a1a; - &:hover { - background:#ddd; - } - } - } - } } //logo fix .iel8 { @@ -1138,12 +1081,6 @@ body.frontpage { background-position: 50% 50%; } - //Map becomes percentage width - #map_box{ - #{$left}: 32em; - width:auto; - } - //Revert to mobile use of the .full-width class .full-width{ width: auto; diff --git a/web/cobrands/sass/_report_list_pins.scss b/web/cobrands/sass/_report_list_pins.scss index 143588b0e..2b77c4675 100644 --- a/web/cobrands/sass/_report_list_pins.scss +++ b/web/cobrands/sass/_report_list_pins.scss @@ -79,7 +79,7 @@ body.frontpage { .click-the-map { color: #000; - margin: -10px -1em 0; // overlap padding on parents + margin: -1em -1em 0; // overlap padding on parents padding: 18px; border-bottom: 1px solid #e5e5e5; // TODO This is not right-to-left enabled yet diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss index 54eda1b2c..62514b8f3 100644 --- a/web/cobrands/stevenage/_colours.scss +++ b/web/cobrands/stevenage/_colours.scss @@ -14,6 +14,5 @@ $nav_fg: #fff; $nav_fg_hover: #444; $col_click_map: #00BD08; -$col_click_map_dark: #4B8304; $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss index f55ac0d15..63de06652 100644 --- a/web/cobrands/stevenage/layout.scss +++ b/web/cobrands/stevenage/layout.scss @@ -96,29 +96,13 @@ body.twothirdswidthpage { } } -// 15591af7 - Stevenage Map page changes -#map_box { - top: 140px; -} -#fms_pan_zoom { - top: 190px !important; -} - -// 2a23e09f - Moved menu on map page and reverted to full header. -#report-a-problem-sidebar { - top: 9em; -} - // d523b431 body.frontpage { .nav-wrapper-2 { height: auto; } - // 1162d5c8 - Changed the colour of the user text when you're logged in to be more readable - #user-meta { - p { - color: #fff; - } + #site-header { + height: auto; } } @@ -183,7 +167,6 @@ body.mappage { position: absolute; top: 0; padding: 0; - height: 4em; background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left; } diff --git a/web/cobrands/trinidadtobago/_colours.scss b/web/cobrands/trinidadtobago/_colours.scss index f5d0e2b90..c96c6a7c3 100644 --- a/web/cobrands/trinidadtobago/_colours.scss +++ b/web/cobrands/trinidadtobago/_colours.scss @@ -17,7 +17,6 @@ $nav_fg: #000; $nav_fg_hover: $primary; $col_click_map: $trinidad_secondary; -$col_click_map_dark: darken($trinidad_secondary, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/warwickshire/_colours.scss b/web/cobrands/warwickshire/_colours.scss index 41ede9ea0..473d8cb03 100644 --- a/web/cobrands/warwickshire/_colours.scss +++ b/web/cobrands/warwickshire/_colours.scss @@ -14,7 +14,6 @@ $nav_fg: #000; $nav_fg_hover: $primary; $col_click_map: $green; -$col_click_map_dark: darken($green, 10%); $col_fixed_label: #00BD08; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss index e1d34cee6..177d5773e 100644 --- a/web/cobrands/warwickshire/layout.scss +++ b/web/cobrands/warwickshire/layout.scss @@ -1,18 +1,14 @@ +$mappage-header-height: 41px + 100px + 37px; // .navbar-inverse + #top-header + #mega-menu-navbar + @import "_colours"; @import "../sass/layout"; #site-header { position: relative; - border-top-width: 0; - .navbar { margin-bottom: 0; } - - .container { - min-height: 0; - } } // Needs to be within body.frontpage to override an existing rule in _layout.scss @@ -22,16 +18,6 @@ body.frontpage { } } -#fms_pan_zoom { - top: 14em !important; -} - -@media (max-width: 61em) and (min-width: 48em) { - #site-header { - height: auto; - } -} - body.mappage { footer, .footer-container, #footer-container, #footer-logos-bottom { display: none; @@ -41,11 +27,17 @@ body.mappage { display: none; } - #wrapper { - padding: 0; - width: auto; - display: block; - position: relative; + .navbar-container { + width: auto !important; // 100% width for the FMS nav links container ONLY + } + + #site-header .navbar { + margin-top: 0; // remove space between FMS nav links and green header + } + + #mega-menu-navbar .navbar-inner { + border-width: 0 0 1px 0; + border-radius: 0; } } @@ -71,16 +63,11 @@ body.twothirdswidthpage .content .sticky-sidebar { // default FMS style. // http://www.warwickshire.gov.uk/wp-content/themes/gamma/style.css -.container, -.navbar-static-top .container, -.navbar-fixed-top .container, -.navbar-fixed-bottom .container, -body.mappage .container { +.container { width: 940px; } -.navbar .container, -body.mappage .container { +.navbar .container { width: auto; } diff --git a/web/cobrands/warwickshire/position_map.js b/web/cobrands/warwickshire/position_map.js deleted file mode 100644 index 02ec71f2f..000000000 --- a/web/cobrands/warwickshire/position_map.js +++ /dev/null @@ -1,21 +0,0 @@ -function position_map_box() { - var $html = $('html'); - if ($html.hasClass('ie6')) { - $('#map_box').prependTo('body').css({ - zIndex: -1, position: 'absolute', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: $(window).height(), - margin: 0 - }); - } else { - $('#map_box').prependTo('body').css({ - zIndex: 0, position: 'fixed', - top: 0, left: 0, right: 0, bottom: 0, - width: '100%', height: '100%', - margin: 0 - }); - } -} - -function map_fix() {} -var slide_wards_down = 0; diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss index 8ae175583..d05be2102 100644 --- a/web/cobrands/zurich/_colours.scss +++ b/web/cobrands/zurich/_colours.scss @@ -15,9 +15,7 @@ $map_nav_bg: #fff; $nav_fg: $primary_text; $nav_fg_hover: $primary/1.1; - $col_click_map: $zurich_blue; -$col_click_map_dark: darken($zurich_blue, 20%); $col_fixed_label: #648721; $col_fixed_label_dark: #4B8304; diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss index 3f24b3685..7bb44c231 100644 --- a/web/cobrands/zurich/layout.scss +++ b/web/cobrands/zurich/layout.scss @@ -1,3 +1,6 @@ +// Zurich has a taller map page header than most cobrands. +$mappage-header-height: 7em; + @import "colours"; @import "../sass/layout"; @import "zurich"; @@ -24,8 +27,9 @@ body.mappage .content, body.frontpage .content { } } /* The header on a map page needs a shadow too */ -body.mappage .nav-wrapper-2 { +body.mappage .nav-wrapper .nav-wrapper-2 { @include box-shadow(0 0 6px 1px #000); + z-index: 2; // One more than #zurich-main-nav so it's on top } /* Except on admin pages where there's an admin nav directly underneath it */ body.mappage.admin .nav-wrapper-2 { @@ -90,7 +94,7 @@ body.mappage #site-logo-text { border-top: none; } .nav-wrapper-3 { - height: 99px; + height: 6em; // rough figure, enough to show the blue band, but less than .nav-wrapper-2 height padding-top: 18px; } } @@ -99,7 +103,6 @@ body.mappage { .nav-wrapper { .nav-wrapper-2 { border-top: none; - height: 117px; // 99px+18px for padding padding: 0 10px; box-sizing: border-box; } @@ -107,8 +110,6 @@ body.mappage { /* Ugh :( But first wrapper is the caption, second is the fixed (so first we can do padding on) so a third seems necessary for the background then. */ .nav-wrapper-3 { - height: 99px; - padding-top: 18px; background: #fff url(logo_portal.x.jpg) top left repeat-x; } .content { @@ -187,6 +188,19 @@ body.mappage { #zurich-footer { display: none; } + + #map_sidebar { + padding-top: 3em; // make space for the #zurich-main-nav + } + + #zurich-main-nav { + margin: 0; + position: absolute; + top: 7em; + left: 0; + width: 29em; // width of #map_sidebar (including padding) + z-index: 1; + } } body.twothirdswidthpage { @@ -224,13 +238,13 @@ body.twothirdswidthpage { } #fms_pan_zoom { - top: 9em !important; + top: 2em; } #fms_pan_zoom_zoomin { - top: 0 !important; + top: 0; } #fms_pan_zoom_zoomout { - top: 44px !important; + top: 44px; } // Admin specific changes diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 267643898..f5f5f2934 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -1,7 +1,7 @@ // This function might be passed either an OpenLayers.LonLat (so has // lon and lat) or an OpenLayers.Geometry.Point (so has x and y) function fixmystreet_update_pin(lonlat) { - lonlat.transform( + lonlat = lonlat.clone().transform( fixmystreet.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326") ); @@ -18,6 +18,7 @@ function fixmystreet_update_pin(lonlat) { } $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show(); $('#side-form').hide(); + $('body').removeClass('with-notes'); return; } $('#side-form, #site-logo').show(); @@ -57,7 +58,7 @@ function fixmystreet_update_pin(lonlat) { function fixmystreet_activate_drag() { fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { onComplete: function(feature, e) { - fixmystreet_update_pin( feature.geometry.clone() ); + fixmystreet_update_pin( feature.geometry ); } } ); fixmystreet.map.addControl( fixmystreet.drag ); @@ -72,9 +73,6 @@ function fixmystreet_zoomToBounds(bounds) { z = 13; } fixmystreet.map.setCenter(center, z); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } } function fms_markers_list(pins, transform) { @@ -396,13 +394,10 @@ $(function(){ }, fixmystreet.map_options) ); - // Need to do this here, after the map is created - if ($('html').hasClass('mobile')) { - if (fixmystreet.page == 'around') { - $('#fms_pan_zoom').css({ top: '2.75em' }); - } - } else { - $('#fms_pan_zoom').css({ top: '4.75em' }); + // Need to do this here, after the map is created (might not have been when + // resize() called) + if ($('html').hasClass('mobile') && fixmystreet.page == 'around') { + $('#fms_pan_zoom').css({ top: '2.75em' }); } // Set it up our way @@ -440,10 +435,6 @@ $(function(){ fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); } - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } - if (document.getElementById('mapForm')) { var click = new OpenLayers.Control.Click(); fixmystreet.map.addControl(click); @@ -470,6 +461,8 @@ $(function(){ fixmystreet.drag.deactivate(); $('#side-form').hide(); $('#side').show(); + $('body').removeClass('with-notes'); + fixmystreet.map.updateSize(); // required after changing the size of the map element $('#sub_map_links').show(); //only on mobile $('#mob_sub_map_links').remove(); @@ -529,12 +522,8 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { case "zoomin": case "zoomout": case "zoomworld": - var mid_point = 0; - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - mid_point = fixmystreet_midpoint(); - } var size = this.map.getSize(), - xy = { x: size.w / 2 + mid_point, y: size.h / 2 }; + xy = { x: size.w / 2, y: size.h / 2 }; switch (btn.action) { case "zoomin": this.map.zoomTo(this.map.getZoom() + 1, xy); @@ -547,6 +536,22 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { break; } } + }, + moveTo: function(){}, + draw: function(px) { + // A customised version of .draw() that doesn't specify + // and dimensions/positions for the buttons, since we + // size and position them all using CSS. + OpenLayers.Control.prototype.draw.apply(this, arguments); + this.buttons = []; + this._addButton("panup", "north-mini.png"); + this._addButton("panleft", "west-mini.png"); + this._addButton("panright", "east-mini.png"); + this._addButton("pandown", "south-mini.png"); + this._addButton("zoomin", "zoom-plus-mini.png"); + this._addButton("zoomworld", "zoom-world-mini.png"); + this._addButton("zoomout", "zoom-minus-mini.png"); + return this.div; } }); @@ -560,14 +565,6 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, } var center = this.map.getCenter(); - if ( center && fixmystreet.state_map && fixmystreet.state_map == 'full' ) { - // Translate the permalink co-ords so that 'centre' is accurate - var mid_point = fixmystreet_midpoint(); - var p = this.map.getViewPortPxFromLonLat(center); - p.x += mid_point; - p.y += 25; - center = this.map.getLonLatFromViewPortPx(p); - } var zoom = this.map.getZoom(); if ( alter_zoom ) { @@ -684,9 +681,6 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { trigger: function(e) { var cobrand = $('meta[name="cobrand"]').attr('content'); - if (typeof fixmystreet.nav_control != 'undefined') { - fixmystreet.nav_control.disableZoomWheel(); - } var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy); if (fixmystreet.page == 'new') { /* Already have a pin */ @@ -710,48 +704,41 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { // Store pin location in form fields, and check coverage of point fixmystreet_update_pin(lonlat); - // Already did this first time map was clicked, so no need to do it again. + // It's possible to invoke the OpenLayers.Control `trigger` callback + // multiple times in a row (eg: by clicking on the map multiple times, + // to reposition your report). + // But there is some stuff we only want to happen the first time you + // switch from the "around" view to the "new" report view. + // So, here we check whether we've already transitioned into the "new" + // report view, and if so, we return from the callback early, + // skipping the remainder of the setup stuff. if (fixmystreet.page == 'new') { + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; return; } - fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. + // If there are notes to be displayed, add the .with-notes class + // to make the sidebar wider. + if ($('#report-a-problem-sidebar').length) { + $('body').addClass('with-notes'); + } + /* For some reason on IOS5 if you use the jQuery show method it * doesn't display the JS validation error messages unless you do this * or you cause a screen redraw by changing the phone orientation. - * NB: This has to happen after the call to show() */ + * NB: This has to happen after the call to show() in fixmystreet_update_pin */ if ( navigator.userAgent.match(/like Mac OS X/i)) { document.getElementById('side-form').style.display = 'block'; } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } - - // If we clicked the map somewhere inconvenient - var sidebar = $('#report-a-problem-sidebar'); - if (sidebar.css('position') == 'absolute') { - var w = sidebar.width(), h = sidebar.height(), - o = sidebar.offset(), - $map_boxx = $('#map_box'), bo = $map_boxx.offset(); - // e.xy is relative to top left of map, which might not be top left of page - e.xy.x += bo.left; - e.xy.y += bo.top; - - // 24 and 64 is the width and height of the marker pin - if (e.xy.y <= o.top || (e.xy.x >= o.left && e.xy.x <= o.left + w + 24 && e.xy.y >= o.top && e.xy.y <= o.top + h + 64)) { - // top of the page, pin hidden by header; - // or underneath where the new sidebar will appear - lonlat.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); - var p = fixmystreet.map.getViewPortPxFromLonLat(lonlat); - p.x -= midpoint_box_excluding_column(o, w, bo, $map_boxx.width()); - lonlat = fixmystreet.map.getLonLatFromViewPortPx(p); - fixmystreet.map.panTo(lonlat); - } - } + + fixmystreet.map.updateSize(); // required after changing the size of the map element + + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; $('#sub_map_links').hide(); if ($('html').hasClass('mobile')) { diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js index 9b0a73fb8..5e29daea1 100644 --- a/web/js/map-bing-ol.js +++ b/web/js/map-bing-ol.js @@ -4,16 +4,10 @@ function _set_map_config() { permalink_id = 'map_permalink'; } - var nav_opts = { zoomWheelEnabled: false }; - if (fixmystreet.page == 'around' && $('html').hasClass('mobile')) { - nav_opts = {}; - } - fixmystreet.nav_control = new OpenLayers.Control.Navigation(nav_opts); - fixmystreet.controls = [ new OpenLayers.Control.Attribution(), new OpenLayers.Control.ArgParser(), - fixmystreet.nav_control, + new OpenLayers.Control.Navigation(), new OpenLayers.Control.PermalinkFMS(permalink_id), new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' }) ]; diff --git a/web/js/map-google.js b/web/js/map-google.js index 0e7cd824e..5009bebac 100644 --- a/web/js/map-google.js +++ b/web/js/map-google.js @@ -119,9 +119,6 @@ function fms_map_clicked(e) { } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } // If we clicked the map somewhere inconvenient // TODO @@ -190,13 +187,6 @@ function fms_map_initialize() { paddingDiv.index = 0; fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - // TODO Work better with window resizing, this is pretty 'set up' only at present - var q = fixmystreet_midpoint(); - // Need to try and fake the 'centre' being 75% from the edge - fixmystreet.map.panBy(-q, -25); - } - if (document.getElementById('mapForm')) { var l = google.maps.event.addListener(fixmystreet.map, 'click', fms_map_clicked); } diff --git a/web/js/map-wmts-zurich.js b/web/js/map-wmts-zurich.js index 4c386e87d..9e0555079 100644 --- a/web/js/map-wmts-zurich.js +++ b/web/js/map-wmts-zurich.js @@ -56,15 +56,9 @@ $(function(){ function set_map_config(perm) { // This stuff is copied from js/map-bing-ol.js - var nav_opts = { zoomWheelEnabled: false }; - if (fixmystreet.page == 'around' && $('html').hasClass('mobile')) { - nav_opts = {}; - } - fixmystreet.nav_control = new OpenLayers.Control.Navigation(nav_opts); - fixmystreet.controls = [ new OpenLayers.Control.ArgParser(), - fixmystreet.nav_control + new OpenLayers.Control.Navigation() ]; if ( fixmystreet.page != 'report' || !$('html').hasClass('mobile') ) { fixmystreet.controls.push( new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' }) ); |
