Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix feedback component layout on mobile #1211

Merged
merged 3 commits into from
Nov 29, 2019
Merged

Fix feedback component layout on mobile #1211

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3972ac7
Fix feedback component layout on mobile
kr8n3r Nov 28, 2019
bea7861
Update tests
kr8n3r Nov 28, 2019
36b371e
Amend CHANGELOG
kr8n3r Nov 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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