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

Jump to bottom

Center content on desktop #186632607 #4444

Merged
merged 14 commits into from
Apr 9, 2024
Merged

Center content on desktop #186632607 #4444

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7d30429
Center content on desktop
tofarr Apr 4, 2024
b8444e5
Made content a bit wider
tofarr Apr 4, 2024
0891dcf
WIP
tofarr Apr 5, 2024
a9849a4
WIP
tofarr Apr 5, 2024
6f2463f
WIP
tofarr Apr 5, 2024
43e090f
WIP
tofarr Apr 5, 2024
7b6a6ae
WIP
tofarr Apr 5, 2024
8e3ddad
Centered buttons on desktop
tofarr Apr 8, 2024
7f2926c
Centering buttons
tofarr Apr 8, 2024
aa7d8aa
More style updates
tofarr Apr 8, 2024
f60804c
Merge branch 'main' into center-on-desktop-#186632607
tofarr Apr 8, 2024
40619a4
Force Heroku redeploy
tofarr Apr 8, 2024
541dc46
WIP
tofarr Apr 8, 2024
1ffc8ae
Merge branch 'main' into center-on-desktop-#186632607
tofarr Apr 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
75 changes: 70 additions & 5 deletions app/assets/stylesheets/_state-file.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,11 +426,6 @@
}
}

.landing-page-content {
padding-left: 1rem;
padding-right: 1rem;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed this because the layout of the landing page is fundamentally changing

.partner-logo-wrapper {
display: flex;
align-items: center;
Expand Down Expand Up @@ -627,6 +622,76 @@
text-decoration: none;
}

@media screen and (min-width: $tablet-up) {
.question-layout .question-wrapper {
margin: 0 auto;
max-width: 658px;

.checkbox {
width: 100%;
}

.button {
display: block;
min-width: 15rem;
max-width: 25rem;
margin: 0 auto;
}
}

.options-wrapper .yes-no-buttons {
display: flex;
justify-content: center;

.button {
margin: 0 2rem;
display: block;
min-width: 25rem;
max-width: 25rem;
}
}

.question-layout.landing-page-outer .question-wrapper {
max-width: none;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Landing page content has a logo and is wider - let it fill the main element


main {
display: flex;
justify-content: space-between;
.landing-page-content {
max-width: 570px;
}
.fyst-home-image {
width: 273px;
height: 250px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding definite sizes here prevents annoying reflow as the image is loaded.

}
}
}

.initiate-data-transfer-outer .question-wrapper a.button {
width: 100%;
min-width: 100%;
max-width: 100%;
}

.esign-declaration-outer, .return-status-outer, .submission-confirmation-outer {

.question-wrapper .button--primary {
min-width: 40rem;
max-width: 40rem;
width: 40rem;
}
}

.esign-declaration-outer .text--error {
margin: 0 auto;
text-align: center;
}
}
@media screen and (max-width: $tablet-up) {
.landing-page-container .fyst-home-image {
display: none
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hide the logo on smaller screens

}
}
}

$state-colors: (
Expand Down
2 changes: 1 addition & 1 deletion app/views/layouts/state_file/question.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<%= yield :form_question %>
<% end %>

<section class="slab question-layout">
<section class="slab question-layout <%= controller_name.gsub("_", "-") %>-outer">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding a css class here that is dependent on the page allows us to do outer layout specific rules for each page

<div class="grid">
<div class="grid__item question-wrapper">
<%= yield :notices %>
Expand Down
1 change: 1 addition & 0 deletions app/views/state_file/questions/landing_page/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,5 @@
</h2>
<% end %>
</div>
<%= image_tag 'questions/welcome.svg', class: 'fyst-home-image' %>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Landing page now has an image on it

<% end %>
6 changes: 3 additions & 3 deletions app/views/state_file/questions/w2/edit.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
<div class="form-question spacing-below-25 ny-w2-locality-nm">
<%= f.cfa_input_field(:locality_nm, t(".box20_locality_name"), classes: ["form-width--long"]) %>
</div>
<button class="button button--primary button--wide" type="submit">
<%= t("general.continue") %>
</button>
</div>
<button class="button button--primary button--wide" type="submit">
<%= t("general.continue") %>
</button>
<% end %>
<% end %>