Skip to content

Commit

Permalink
Merge pull request #441 from alphagov/report-a-problem-improvements
Browse files Browse the repository at this point in the history
Report-a-problem improvements
  • Loading branch information
dsingleton committed Aug 26, 2014
2 parents 726ffb0 + d388eca commit 15a36a1
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 65 deletions.
22 changes: 13 additions & 9 deletions app/assets/javascripts/report-a-problem.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = $('<p class="report-a-problem-toggle js-footer">').append('<a href="">Is there anything wrong with this page?</a>');
$toggleLink.insertBefore('.report-a-problem-container');
var toggleBlock = '<div class="report-a-problem-toggle-wrapper js-footer">' +
'<p class="report-a-problem-toggle">' +
'<a href="">Is there anything wrong with this page?</a>' +
'</p>' +
'</div>';
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('<input type="hidden" name="javascript_enabled" value="true"/>');
$forms.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));

$('.report-a-problem-container form').submit(ReportAProblem.submit);
var $form = $container.find('form');
$form.append('<input type="hidden" name="javascript_enabled" value="true"/>');
$form.append($('<input type="hidden" name="referrer">').val(document.referrer || "unknown"));
$form.submit(ReportAProblem.submit);

});
2 changes: 1 addition & 1 deletion app/assets/stylesheets/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "conditionals";
@import "css3";
@import "device-pixels";
@import "grid_layout";
@import "measurements";
@import "typography";
@import "shims";
Expand All @@ -28,4 +29,3 @@
@import "govuk-component/component";

@import "static-pages/error-pages";

1 change: 1 addition & 0 deletions app/assets/stylesheets/header-footer-only.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
@import "conditionals";
@import "css3";
@import "device-pixels";
@import "grid_layout";
@import "measurements";
@import "typography";
@import "design-patterns/buttons";
Expand Down
28 changes: 2 additions & 26 deletions app/assets/stylesheets/helpers/_core.scss
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ h4 {
top: 9.5em;
width: 100%;
z-index: 0;

@include ie-lte(8) {
z-index: 0;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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%;
Expand Down
48 changes: 39 additions & 9 deletions app/assets/stylesheets/helpers/_report-a-problem.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,24 @@

.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;
font-weight: 600;
margin: 1em 0;
}

div {
.button-wrapper {
padding-top: 0.5em;

.button {
Expand All @@ -31,15 +39,10 @@
@include core-19;
padding: 0;
margin: 0 0 0.22em 0;
display: block;
display: block;
font-weight: bold;
}

@include media-down(mobile) {
margin: 0 1em 2em 1em;
}


input {
&[type="text"] {
display: block;
Expand All @@ -56,3 +59,30 @@
}
}
}

.report-a-problem-toggle{
@include core-16;

a{
color: $secondary-text-colour;
}

@include ie-lte(7) {
zoom: 1;
}
}

.js-tab-content .report-a-problem-toggle {
@include media-down(mobile) {
margin-top:2em;
}
}

.report-a-problem-toggle-wrapper {
@include outer-block;
margin-bottom: 30px;

.report-a-problem-toggle {
@include inner-block;
}
}
46 changes: 26 additions & 20 deletions app/views/root/report_a_problem.raw.html.erb
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
<!-- report_a_problem -->
<div class="report-a-problem-container">
<h2>Help us improve GOV.UK</h2>
<form accept-charset="UTF-8" action="/contact/govuk/problem_reports" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value=""></div>
<input id="url" name="url" type="hidden" value="<%= h request_url %>">
<% if defined?(source) %>
<input id="source" name="source" type="hidden" value="<%= source %>">
<% end %>
<% if defined?(page_owner) %>
<input id="page_owner" name="page_owner" type="hidden" value="<%= page_owner %>">
<% end %>
<div class="report-a-problem-inner">
<div class="report-a-problem-content">
<h2>Help us improve GOV.UK</h2>
<form accept-charset="UTF-8" action="/contact/govuk/problem_reports" method="post">
<div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value=""></div>
<input id="url" name="url" type="hidden" value="<%= h request_url %>">
<% if defined?(source) %>
<input id="source" name="source" type="hidden" value="<%= source %>">
<% end %>
<% if defined?(page_owner) %>
<input id="page_owner" name="page_owner" type="hidden" value="<%= page_owner %>">
<% end %>

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

<label for="what_doing">What you were doing</label>
<input id="what_doing" name="what_doing" type="text" />

<label for="what_wrong">What went wrong</label>
<input id="what_wrong" name="what_wrong" type="text" />
<label for="what_doing">What you were doing</label>
<input id="what_doing" name="what_doing" type="text" />

<div><button name="commit" type="submit" class="button">Send</button></div>
<label for="what_wrong">What went wrong</label>
<input id="what_wrong" name="what_wrong" type="text" />

<!--<p>If you have more extensive feedback, please visit the <a href="/feedback">support page</a>.</p>-->
</form>
<div class="button-wrapper">
<button name="commit" type="submit" class="button">Send</button>
</div>

<!--<p>If you have more extensive feedback, please visit the <a href="/feedback">support page</a>.</p>-->
</form>
</div>
</div>
</div>
<!-- end report_a_problem -->

0 comments on commit 15a36a1

Please sign in to comment.