From bf7a7db0c6a0ba80954f8d06e3d98f2500417237 Mon Sep 17 00:00:00 2001 From: Jake Benilov Date: Tue, 19 Aug 2014 14:21:15 +0000 Subject: [PATCH 1/2] Move report-a-problem related styles to _report-a-problem.scss This allows apps which rely solely on `header-footer-only.css` to also get the 'report-a-problem' toggle styles. --- app/assets/stylesheets/helpers/_core.scss | 28 ++----------------- .../helpers/_report-a-problem.scss | 24 +++++++++++++++- 2 files changed, 25 insertions(+), 27 deletions(-) diff --git a/app/assets/stylesheets/helpers/_core.scss b/app/assets/stylesheets/helpers/_core.scss index 2c15fff3b..583df6c52 100644 --- a/app/assets/stylesheets/helpers/_core.scss +++ b/app/assets/stylesheets/helpers/_core.scss @@ -93,7 +93,7 @@ h4 { top: 9.5em; width: 100%; z-index: 0; - + @include ie-lte(8) { z-index: 0; } @@ -237,7 +237,7 @@ h4 { content: "\A0\A0\A0\A0\A0\A0"; background-position: 5px 0px; } - + a[rel="external"]:hover:after { background-position: 5px -388px; } @@ -1010,30 +1010,6 @@ article { overflow: hidden; } -/* report a problem */ - -.report-a-problem-toggle{ - @include core-16; - margin:1em 2em 1em 2em; - a{ - color: $secondary-text-colour; - } - - @include ie-lte(7) { - zoom: 1; - } - - @include media-down(mobile) { - margin:0em 1em 1em 1em; - } -} - -.js-tab-content .report-a-problem-toggle { - @include media-down(mobile) { - margin-top:2em; - } -} - /* bunting lol */ .epic-bunting { width: 100%; diff --git a/app/assets/stylesheets/helpers/_report-a-problem.scss b/app/assets/stylesheets/helpers/_report-a-problem.scss index 51ad2890b..aebadd65f 100644 --- a/app/assets/stylesheets/helpers/_report-a-problem.scss +++ b/app/assets/stylesheets/helpers/_report-a-problem.scss @@ -31,7 +31,7 @@ @include core-19; padding: 0; margin: 0 0 0.22em 0; - display: block; + display: block; font-weight: bold; } @@ -56,3 +56,25 @@ } } } + +.report-a-problem-toggle{ + @include core-16; + margin:1em 2em 1em 2em; + a{ + color: $secondary-text-colour; + } + + @include ie-lte(7) { + zoom: 1; + } + + @include media-down(mobile) { + margin:0em 1em 1em 1em; + } +} + +.js-tab-content .report-a-problem-toggle { + @include media-down(mobile) { + margin-top:2em; + } +} From d388ecac14e9f8b669313f5b0afe5f6071c8e817 Mon Sep 17 00:00:00 2001 From: Jake Benilov Date: Tue, 19 Aug 2014 14:26:10 +0000 Subject: [PATCH 2/2] Report-a-problem improvements These changes in markup and styling make the report-a-problem functionality much more self-contained, thus removing the need for apps to include custom CSS for displaying the report-a-problem form correctly. The report-a-problem stylesheets are also refactored to use the latest and greatest from `govuk_frontend_toolkit`. --- app/assets/javascripts/report-a-problem.js | 22 +++++---- app/assets/stylesheets/application.scss | 2 +- .../stylesheets/header-footer-only.scss | 1 + .../helpers/_report-a-problem.scss | 34 ++++++++------ app/views/root/report_a_problem.raw.html.erb | 46 +++++++++++-------- 5 files changed, 62 insertions(+), 43 deletions(-) diff --git a/app/assets/javascripts/report-a-problem.js b/app/assets/javascripts/report-a-problem.js index 1805efa0b..fc8d611a6 100644 --- a/app/assets/javascripts/report-a-problem.js +++ b/app/assets/javascripts/report-a-problem.js @@ -54,20 +54,24 @@ var ReportAProblem = { $(document).ready(function() { // Add in the toggle link for reporting a problem at the bottom of the page - var $toggleLink = $('

').append('Is there anything wrong with this page?'); - $toggleLink.insertBefore('.report-a-problem-container'); + var toggleBlock = '

' + + '

' + + 'Is there anything wrong with this page?' + + '

' + + '
'; + var $container = $('.report-a-problem-container') + $container.before(toggleBlock); // Add a click handler for the toggle - $toggleLink.on('click', function() { - $('.report-a-problem-container').toggle(); + $('.report-a-problem-toggle a').on('click', function() { + $container.toggle(); return false; }); // form submission for reporting a problem - var $forms = $('.report-a-problem-container form, .report-a-problem form'); - $forms.append(''); - $forms.append($('').val(document.referrer || "unknown")); - - $('.report-a-problem-container form').submit(ReportAProblem.submit); + var $form = $container.find('form'); + $form.append(''); + $form.append($('').val(document.referrer || "unknown")); + $form.submit(ReportAProblem.submit); }); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 30d972f1f..e3a9e4bfe 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -3,6 +3,7 @@ @import "conditionals"; @import "css3"; @import "device-pixels"; +@import "grid_layout"; @import "measurements"; @import "typography"; @import "shims"; @@ -28,4 +29,3 @@ @import "govuk-component/component"; @import "static-pages/error-pages"; - diff --git a/app/assets/stylesheets/header-footer-only.scss b/app/assets/stylesheets/header-footer-only.scss index ed1524e18..d626d0e07 100644 --- a/app/assets/stylesheets/header-footer-only.scss +++ b/app/assets/stylesheets/header-footer-only.scss @@ -3,6 +3,7 @@ @import "conditionals"; @import "css3"; @import "device-pixels"; +@import "grid_layout"; @import "measurements"; @import "typography"; @import "design-patterns/buttons"; diff --git a/app/assets/stylesheets/helpers/_report-a-problem.scss b/app/assets/stylesheets/helpers/_report-a-problem.scss index aebadd65f..8d5a2e68a 100644 --- a/app/assets/stylesheets/helpers/_report-a-problem.scss +++ b/app/assets/stylesheets/helpers/_report-a-problem.scss @@ -4,8 +4,16 @@ .report-a-problem-container{ clear: both; - margin: 3em 0 2em 2em; - max-width: 38em; + @include outer-block; + margin-bottom: 60px; + + .report-a-problem-inner { + @include inner-block; + + .report-a-problem-content { + max-width: 35em; + } + } h2 { @include core-24; @@ -13,7 +21,7 @@ margin: 1em 0; } - div { + .button-wrapper { padding-top: 0.5em; .button { @@ -35,11 +43,6 @@ font-weight: bold; } - @include media-down(mobile) { - margin: 0 1em 2em 1em; - } - - input { &[type="text"] { display: block; @@ -59,7 +62,7 @@ .report-a-problem-toggle{ @include core-16; - margin:1em 2em 1em 2em; + a{ color: $secondary-text-colour; } @@ -67,10 +70,6 @@ @include ie-lte(7) { zoom: 1; } - - @include media-down(mobile) { - margin:0em 1em 1em 1em; - } } .js-tab-content .report-a-problem-toggle { @@ -78,3 +77,12 @@ margin-top:2em; } } + +.report-a-problem-toggle-wrapper { + @include outer-block; + margin-bottom: 30px; + + .report-a-problem-toggle { + @include inner-block; + } +} diff --git a/app/views/root/report_a_problem.raw.html.erb b/app/views/root/report_a_problem.raw.html.erb index 78480bce6..dd61ac09f 100644 --- a/app/views/root/report_a_problem.raw.html.erb +++ b/app/views/root/report_a_problem.raw.html.erb @@ -1,28 +1,34 @@
-

Help us improve GOV.UK

-
-
- - <% if defined?(source) %> - - <% end %> - <% if defined?(page_owner) %> - - <% end %> +
+
+

Help us improve GOV.UK

+ +
+ + <% if defined?(source) %> + + <% end %> + <% if defined?(page_owner) %> + + <% end %> -

Please don't include any personal or financial information, - for example your National Insurance or credit card numbers.

+

Please don't include any personal or financial information, + for example your National Insurance or credit card numbers.

- - - - - + + -
+ + - - +
+ +
+ + + +
+