Skip to content

Commit

Permalink
Merge pull request #1211 from alphagov/fix-feedback-component-layoput…
Browse files Browse the repository at this point in the history 
…-on-mobile

Fix feedback component layout on mobile
  • Loading branch information
@kr8n3r
kr8n3r authored Nov 29, 2019
2 parents da4f20a + 36b371e commit cac8001
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 27 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@

## Unreleased

* Fix Feedback component layout on mobile ([#1211](https://github.com/alphagov/govuk_publishing_components/pull/1207))

* Fix header environment label layout on mobile ([PR #1212](https://github.com/alphagov/govuk_publishing_components/pull/1212))

## 21.13.2
Expand Down
91 changes: 75 additions & 16 deletions app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,9 @@
.gem-c-feedback__prompt-link {
@include govuk-link-common;
@include govuk-font(19);
margin-left: govuk-spacing(3);

@include govuk-media-query($from: tablet) {
@include govuk-font(16);
float: left; // needed to ensure vertical alignment consistent with prompt-link--wrong
margin-left: govuk-spacing(2);
}
}
Expand All @@ -82,20 +80,6 @@
}
}

.gem-c-feedback__prompt-link--wrong {
display: block;
clear: both;
margin-top: govuk-spacing(3);
margin-left: 0;

@include govuk-media-query($from: tablet) {
float: right;
clear: none;
margin-top: 0;
margin-left: govuk-spacing(2);
}
}

.gem-c-feedback__error-summary {
margin-bottom: govuk-spacing(3);
padding: govuk-spacing(3);
Expand Down Expand Up @@ -203,3 +187,78 @@
margin: 0;
padding: 0;
}


.js-enabled {
.gem-c-feedback__js-prompt-questions {
@include govuk-media-query($until: tablet) {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 140));
grid-template-rows: repeat(2, auto);
}
}

.gem-c-feedback__prompt-question {
@include govuk-media-query($until: tablet) {
grid-area: 1 / 1;
}
}

.gem-c-feedback__option-list {
list-style-type: none;
margin: 0;
padding: 0;

@include govuk-media-query($until: tablet) {
grid-area: 1 / 1 / 2 / 3;
display: grid;
grid-template-columns: repeat(2, minmax(140px, 140px));
grid-template-rows: repeat(2, auto);
// older grid spec
grid-row-gap: govuk-spacing(3);
// newer grid spec
row-gap: govuk-spacing(3); // sass-lint:disable-line no-misspelled-properties
}
}

.gem-c-feedback__option-list-item {
@include govuk-media-query($from: tablet) {
float: left;
}
}

.gem-c-feedback__option-list-item--useful {
@include govuk-media-query($until: tablet) {
display: inline-block;
@supports (display: grid) {
grid-area: 1 / 2;
padding-left: govuk-spacing(3);
}
}
}

.gem-c-feedback__option-list-item--not-useful {
@include govuk-media-query($until: tablet) {
display: inline-block;
@supports (display: grid) {
grid-area: 1 / 2;
padding-left: 50px;
}
}
}

.gem-c-feedback__option-list-item--wrong {
@include govuk-media-query($until: tablet) {
display: block;
margin-top: govuk-spacing(3);
@supports (display: grid) {
margin-top: 0;
grid-area: 2 / 1 / 2 / 3;
}
}

@include govuk-media-query($from: tablet) {
float: right;
}
}
}
10 changes: 5 additions & 5 deletions app/views/govuk_publishing_components/components/feedback/_yes_no_banner.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
Maybe
<% end %>
<ul class="gem-c-feedback__option-list">
<li class="gem-c-feedback__option-list-item">
<li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--useful">
<%= link_to contact_govuk_path, {
class: 'gem-c-feedback__prompt-link gem-c-feedback__prompt-link--useful js-page-is-useful',
class: 'gem-c-feedback__prompt-link js-page-is-useful',
data: {
'track-category' => 'yesNoFeedbackForm',
'track-action' => 'ffYesClick'
Expand All @@ -33,7 +33,7 @@
Yes <span class="visually-hidden">this page is useful</span>
<% end %>
</li>
<li class="gem-c-feedback__option-list-item">
<li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--not-useful">
<%= link_to contact_govuk_path, {
class: 'gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful',
data: {
Expand All @@ -47,9 +47,9 @@
No <span class="visually-hidden">this page is not useful</span>
<% end %>
</li>
<li class="gem-c-feedback__option-list-item">
<li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--wrong">
<%= link_to contact_govuk_path, {
class: 'gem-c-feedback__prompt-link gem-c-feedback__prompt-link--wrong js-toggle-form js-something-is-wrong',
class: 'gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong',
data: {
'track-category' => 'Onsite Feedback',
'track-action' => 'GOV.UK Open Form'
Expand Down
4 changes: 2 additions & 2 deletions spec/components/feedback_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,14 @@ def component_name
it "asks the user if the page is useful without javascript enabled" do
render_component({})

assert_select ".gem-c-feedback .gem-c-feedback__prompt-link--useful[href='/contact/govuk']", text: 'Yes this page is useful'
assert_select ".gem-c-feedback .gem-c-feedback__option-list-item--useful a[href='/contact/govuk']", text: 'Yes this page is useful'
assert_select ".gem-c-feedback .gem-c-feedback__prompt-link.js-page-is-not-useful[href='/contact/govuk']", text: 'No this page is not useful'
end

it "asks the user if there is anything wrong with the page without javascript enabled" do
render_component({})

assert_select ".gem-c-feedback .gem-c-feedback__prompt-link--wrong[href='/contact/govuk']", text: 'Is there anything wrong with this page?'
assert_select ".gem-c-feedback .gem-c-feedback__option-list-item--wrong a[href='/contact/govuk']", text: 'Is there anything wrong with this page?'
end

it "removes top margin when margin_top flag is set" do
Expand Down
21 changes: 17 additions & 4 deletions spec/javascripts/components/feedback-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,24 @@ describe('Feedback component', function () {
'<div class="gem-c-feedback__prompt js-prompt" tabindex="-1">' +
'<div class="js-prompt-questions">' +
'<h3 class="gem-c-feedback__is-useful-question">Is this page useful?</h3>' +
'<a href="/contact/govuk" class="gem-c-feedback__prompt-link gem-c-feedback__prompt-link--useful js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick">Yes <span class="visually-hidden">this page is useful</span></a>' +
'<a href="/contact/govuk" class="gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false">No <span class="visually-hidden">this page is not useful</span></a>' +
'<a href="/contact/govuk" class="gem-c-feedback__prompt-link gem-c-feedback__prompt-link--wrong js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV.UK Open Form" aria-controls="something-is-wrong" aria-expanded="false">Is there anything wrong with this page?</a>' +
'<ul class="gem-c-feedback__option-list">' +
'<li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--useful">' +
'<a class="gem-c-feedback__prompt-link js-page-is-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffYesClick" aria-expanded="false" role="button" href="/contact/govuk">' +
'Yes <span class="visually-hidden">this page is useful</span>' +
'</a>' +
'</li>' +
'<li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--not-useful">' +
'<a class="gem-c-feedback__prompt-link js-toggle-form js-page-is-not-useful" data-track-category="yesNoFeedbackForm" data-track-action="ffNoClick" aria-controls="page-is-not-useful" aria-expanded="false" role="button" href="/contact/govuk">' +
'No <span class="visually-hidden">this page is not useful</span>' +
'</a>' +
'</li>' +
'<li class="gem-c-feedback__option-list-item gem-c-feedback__option-list-item--wrong">' +
'<a class="gem-c-feedback__prompt-link js-toggle-form js-something-is-wrong" data-track-category="Onsite Feedback" data-track-action="GOV.UK Open Form" aria-controls="something-is-wrong" aria-expanded="false" role="button" href="/contact/govuk">' +
'Is there anything wrong with this page?' +
'</a>' +
'</li>' +
'</ul>' +
'</div>' +

'<div class="gem-c-feedback__prompt-success js-prompt-success js-hidden" tabindex="-1">' +
'Thanks for your feedback.' +
'</div>' +
Expand Down

0 comments on commit cac8001

Please sign in to comment.