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 7 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;
}
}
45 changes: 25 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,34 @@
%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")
.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")
.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
2 changes: 1 addition & 1 deletion config/locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1822,7 +1822,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
introduction:
registration_greeting: "Hi there!"
registration_intro: "You can now create a profile for your Producer or Hub"
registration_checklist: "You'll need"
registration_checklist: "What do I need?"
registration_time: "5-10 minutes"
registration_enterprise_address: "Enterprise address"
registration_contact_details: "Primary contact details"
Expand Down