Skip to content

Commit

Permalink
Reformat component to match new design
Browse files Browse the repository at this point in the history 
The original component used float based layout techniques to achieve a variety of different layouts. This was fairly delicate but worked in the context of the original markup.

With the design now requiring tighter positioning of elements, the legacy setup was not robust enough and needed updating. In particular, the "Is this page useful?" question needed to flow better for foreign languages, where the text often wraps to multiple lines on mobile.

Now the layout uses flexbox to arrange elements more robustly, and improves responsiveness at various screen sizes.
  • Loading branch information
@matthillco @patrickpatrickpatrick
matthillco authored and patrickpatrickpatrick committed Oct 20, 2022
1 parent 8a19b07 commit 1af8fe4
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 128 deletions.
154 changes: 81 additions & 73 deletions app/assets/stylesheets/govuk_publishing_components/components/_feedback.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,104 +2,109 @@
background: govuk-colour("white");
margin-top: govuk-spacing(6);

@include govuk-media-query($from: tablet) {
@include govuk-media-query($from: desktop) {
margin-top: govuk-spacing(9);
border-bottom: 1px solid govuk-colour("white");
}

// New design has the box flush with edges of smaller screens
// We need to compensate for `govuk-width-container` margins:
@include govuk-media-query($until: tablet) {
margin-right: govuk-spacing(-3);
margin-left: govuk-spacing(-3);
}
@include govuk-media-query($from: tablet, $until: desktop) {
margin-right: govuk-spacing(-6);
margin-left: govuk-spacing(-6);
}
// Scoped to the feedback component temporarily
[hidden] {
// stylelint-disable-next-line declaration-no-important
display: none !important;
}
}

.gem-c-feedback__prompt-questions {
text-align: center;
border-bottom: 1px solid govuk-colour("white");
padding: govuk-spacing(5) govuk-spacing(5) govuk-spacing(5) govuk-spacing(5);
box-sizing: border-box;
.gem-c-feedback__prompt {
background-color: govuk-colour("light-grey");
color: govuk-colour("black");
border-top: 1px solid $govuk-border-colour;
outline: 0;
}

.gem-c-feedback__prompt-content {
display: flex;
flex-direction: column;
padding: 0 govuk-spacing(3);
@include govuk-media-query($from: tablet) {
width: 50%;
display: table-cell;
text-align: left;
border-bottom: 0;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}

.gem-c-feedback__prompt-questions--something-is-wrong {
text-align: center;

.gem-c-feedback__prompt-questions {
text-align: left;
padding: govuk-spacing(4) 0;
@include govuk-media-query($from: tablet) {
text-align: right;
vertical-align: bottom;
float: none;
margin: 0 govuk-spacing(3);
}
}

.gem-c-feedback__prompt {
@include govuk-clearfix;
background-color: govuk-colour("blue");
color: govuk-colour("white");
outline: 0;

.gem-c-feedback__prompt-questions--something-is-wrong {
border-top: 1px solid $govuk-border-colour;
@include govuk-media-query($from: tablet) {
@include govuk-font(16, $weight: bold);
display: table;
width: 100%;
border: 0;
}
}

.gem-c-feedback__prompt-question-answer {
display: flex;
align-items: center;
@include govuk-media-query($until: mobile) {
justify-content: center;
flex-wrap: wrap;
}
}

.gem-c-feedback__prompt-question,
.gem-c-feedback__prompt-success {
@include govuk-font(19, $weight: bold);

@include govuk-media-query($from: tablet) {
@include govuk-font(16, $weight: bold);
}
}

.gem-c-feedback__prompt-question {
vertical-align: top;
display: inline-block;
margin: govuk-spacing(2) govuk-spacing(4);
margin: 0;
padding-bottom: govuk-spacing(2);

&:focus {
outline: 0;
}

@include govuk-media-query($from: tablet) {
margin-left: 0;
margin-top: 0;
display: block;
}

// This custom media-query is to account for some awkward positioning where the yes and no buttons are too big to sit inline with the prompt question
@include govuk-media-query($from: 950px) {
display: inline-block;
margin-top: govuk-spacing(2);
@include govuk-media-query($from: mobile) {
padding-bottom: 0;
margin-right: govuk-spacing(2);
}
}

.gem-c-feedback__prompt-link {
@include govuk-font(19);
background: transparent;
box-shadow: 0 2px 0 govuk-colour("white");
border: 1px govuk-colour("white") solid;
min-width: 100%;
color: govuk-colour("black");
box-shadow: 0 3px 0 govuk-colour("black");
border: 1px govuk-colour("black") solid;
margin-bottom: 0;
width: 100%;

&:hover {
// backup style for browsers that don't support rgba
background: govuk-colour("black");
background: govuk-colour("mid-grey");
background: rgba(govuk-colour("black"), .2);
color: govuk-colour("black");
}

@include govuk-media-query($from: mobile) {
min-width: 100px;
margin-bottom: 0;
&:active:focus:not(:hover) {
background: govuk-colour("yellow");
}

@include govuk-media-query($from: tablet) {
@include govuk-font(16);
}
Expand All @@ -108,42 +113,44 @@
.gem-c-feedback__email-link,
.gem-c-feedback__prompt-link {
position: relative;

&:focus:not(:active):not(:hover) {
border-color: govuk-colour("black");
}

&:focus,
&:active {
color: $govuk-focus-text-colour;
}
}

.gem-c-feedback__prompt-link:link,
.gem-c-feedback__prompt-link:visited {
color: govuk-colour("white");
color: govuk-colour("black");

&:focus {
&:focus,
&:active {
color: $govuk-focus-text-colour;
}
}

.gem-c-feedback__option-list {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
margin-top: govuk-spacing(2);

@include govuk-media-query($from: mobile) {
display: inline-block;
margin-right: govuk-spacing(2);
}

@include govuk-media-query($from: tablet) {
margin-top: 0;
}
}

.gem-c-feedback__option-list-item {
@include govuk-media-query($from: mobile) {
display: inline-block;
&:last-child {
margin-left: govuk-spacing(2);
}
}

.gem-c-feedback__option-list-item:last-child {
@include govuk-media-query($from: mobile) {
margin-left: govuk-spacing(4);
.gem-c-feedback__option-list-item .gem-c-feedback__prompt-link {
min-width: 100px;
@include govuk-media-query($until: desktop) {
min-width: 80px;
}
}

Expand All @@ -158,7 +165,7 @@
outline: solid 3px $govuk-focus-colour;
}

@include govuk-media-query($from: tablet) {
@include govuk-media-query($from: desktop) {
border-width: $govuk-border-width;
}

Expand Down Expand Up @@ -190,11 +197,11 @@
}

.gem-c-feedback__form {
padding: govuk-spacing(3) 0;
border-top: govuk-spacing(2) solid govuk-colour("blue");
padding: govuk-spacing(3);
border-top: 1px solid $govuk-border-colour;

@include govuk-media-query($from: tablet) {
padding: govuk-spacing(6) 0;
padding: govuk-spacing(6);
}
}

Expand All @@ -217,8 +224,10 @@
}

.gem-c-feedback__close {
float: right;
margin: 0 govuk-spacing(1) govuk-spacing(2) 0;
margin: 0 govuk-spacing(2);
@include govuk-media-query($until: tablet) {
margin: govuk-spacing(4) 0 0;
}
}

.gem-c-feedback__email-link {
Expand All @@ -228,7 +237,6 @@
@include govuk-media-query($from: desktop) {
display: inline-block;
margin-top: govuk-spacing(2);
margin-left: govuk-spacing(3);
}
}

Expand Down
18 changes: 10 additions & 8 deletions app/views/govuk_publishing_components/components/feedback/_problem_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,6 @@
data-track-action="GOV.UK Send Form"
method="post"
hidden>
<button
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
data-track-category="Onsite Feedback"
data-track-action="GOV.UK Close Form"
aria-controls="something-is-wrong"
aria-expanded="true">
<%= t("components.feedback.close") %>
</button>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
Expand Down Expand Up @@ -49,6 +41,16 @@
<%= render "govuk_publishing_components/components/button", {
text: t("components.feedback.send")
} %>

<button
class="govuk-button govuk-button--secondary gem-c-feedback__close gem-c-feedback__js-show js-close-form"
data-track-category="Onsite Feedback"
data-track-action="GOV.UK Close Form"
aria-controls="something-is-wrong"
aria-expanded="true">
<%= t("components.feedback.close") %>
</button>

</div>
</div>
</form>
Expand Down
20 changes: 11 additions & 9 deletions app/views/govuk_publishing_components/components/feedback/_survey_signup_form.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,6 @@
data-track-category="yesNoFeedbackForm"
data-track-action="Send Form"
method="post">
<button
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
data-track-category="yesNoFeedbackForm"
data-track-action="ffFormClose"
aria-controls="page-is-not-useful"
aria-expanded="true"
hidden>
<%= t("components.feedback.close") %>
</button>

<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds" id="survey-wrapper">
Expand All @@ -37,6 +28,17 @@
<%= render "govuk_publishing_components/components/button", {
text: t("components.feedback.send_me_survey"),
} %>

<button
class="govuk-button govuk-button--secondary gem-c-feedback__close js-close-form"
data-track-category="yesNoFeedbackForm"
data-track-action="ffFormClose"
aria-controls="page-is-not-useful"
aria-expanded="true"
hidden>
<%= t("components.feedback.close") %>
</button>

</div>
</div>
</form>
Loading

0 comments on commit 1af8fe4

Please sign in to comment.