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

1766 registration scroll #3791

Merged
merged 8 commits into from
Jul 8, 2019
Merged

1766 registration scroll #3791

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
271330d
Add collapsible elements and styles
alondahari May 5, 2019
a876f81
Make collapsible always visible on large screen
alondahari May 5, 2019
6234712
Make sure styling doesn't get messed up if resizing down and back up
alondahari May 5, 2019
37d15a1
Add classes to indicate collapsible is for medium screens or smaller
alondahari May 5, 2019
ae0563a
Merge branch 'master' into 1766-registration-scroll
luisramos0 Jun 13, 2019
473fb45
Remove an extra break line to remove html space and make sure alignme…
luisramos0 Jun 13, 2019
a370216
Change default translation in the registration introduction so that i…
luisramos0 Jun 13, 2019
6223a73
Fix rubocop issues in collapsible.css
luisramos0 Jun 13, 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
52 changes: 52 additions & 0 deletions app/assets/stylesheets/darkswarm/collapsible.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
// A bit arbitrary, works for it's use at time of implementation
$collapsible-max-height: 350px;

.collapsible-checkbox {
display: none;
}

.collapsible-label > ::before {
content: ' ';
display: inline-block;

border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;

vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);

transition: transform .2s ease-out;
}

.collapsible-content {
max-height: 0px;
overflow: hidden;

transition: max-height .25s ease-in-out;
}

.collapsible-checkbox:checked + .collapsible-label + .collapsible-content {
max-height: $collapsible-max-height;
}

.collapsible-checkbox:checked + .collapsible-label > ::before {
transform: rotate(90deg) translateX(-3px);
}

@media only screen and (min-width: 1025px) {
// This double class is used to so this rule is more specific than the one in
// all.scss
.collapsible-label.collapsible-label-md {
margin-left: 0;
}

.collapsible-label-md > ::before {
display: none;
}

.collapsible-content-md {
max-height: $collapsible-max-height;
}
}
8 changes: 8 additions & 0 deletions app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import '../base/colors';
@import '../collapsible';

// Styling for login modal to style tabs
.reveal-modal.login-modal {
Expand All @@ -23,3 +24,10 @@
}
}
}

@media only screen and (min-width: 1025px) {
// make sure styling doesn't get messed up if resizing down and back up
.collapsible-menus-container {
min-height: 250px;
}
}
46 changes: 26 additions & 20 deletions app/views/registration/steps/_introduction.html.haml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,35 @@
%i.ofn-i_040-hub
= t(".registration_intro")

.row{ 'data-equalizer' => true }
.row.collapsible-menus-container{ 'data-equalizer' => true }
.small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
%h5= t(".registration_checklist")+":"
%ul.check-list
%li
= t(".registration_time")
%li
= t(".registration_enterprise_address")
%li
= t(".registration_contact_details")
%li
= t(".registration_logo")
%li
= t(".registration_promo_image")
%li
= t(".registration_about_us")
%input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"}
%label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-checklist"}
%h5= t(".registration_checklist")+":"
Copy link
Member

Choose a reason for hiding this comment

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

Hmm, a collapsed heading "You'll need:" doesn't look right... What do you think of changing the base translation to something similar to "What do I get?" in the second column, such as "What do I need?". To make it simple, it can be the same for both mobile and desktop.

Copy link
Contributor

Choose a reason for hiding this comment

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

I'll do this.

Copy link
Contributor

@luisramos0 luisramos0 Jun 13, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

a370216

.collapsible-content.collapsible-content-md
%ul.check-list
%li
= t(".registration_time")
%li
= t(".registration_enterprise_address")
%li
= t(".registration_contact_details")
%li
= t(".registration_logo")
%li
= t(".registration_promo_image")
%li
= t(".registration_about_us")

.small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true}
%h5
= t(".registration_outcome_headline")
%p= t(".registration_outcome1_html")
%p= t(".registration_outcome2")
%p= t(".registration_outcome3")
%input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"}
%label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-outcome"}
%h5
= t(".registration_outcome_headline")
Copy link
Member

Choose a reason for hiding this comment

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

Having this in a different line adds a space before the text, so the text is no longer aligned with the heading of the first set.

Copy link
Contributor

Choose a reason for hiding this comment

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

yes, there is the space in the html, on my test it looks aligned anyway.
I'll make this a single line.

Copy link
Contributor

@luisramos0 luisramos0 Jun 13, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

473fb45

.collapsible-content.collapsible-content-md
%p= t(".registration_outcome1_html")
%p= t(".registration_outcome2")
%p= t(".registration_outcome3")

.row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" }
%hr
Expand Down