raggedstaff/openfoodnetwork
1
0
Fork 0
mirror of https://github.com/openfoodfoundation/openfoodnetwork synced 2026-01-24 20:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3791 from jazzdragon/1766-registration-scroll

Browse Source 
1766 registration scroll
This commit is contained in:
Luis Ramos
2019-07-08 15:10:35 +01:00
committed by GitHub
parent ec65951ef3 6223a738a7
commit fe71781d70
4 changed files with 86 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/assets/stylesheets/darkswarm/collapsible.css.scss Normal file
View File

@@ -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 {
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
border-top: 5px solid transparent;
content: ' ';
display: inline-block;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
vertical-align: middle;
}
.collapsible-content {
max-height: 0;
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
app/assets/stylesheets/darkswarm/pages/login_modal.css.scss
View File

@@ -1,4 +1,5 @@
@import '../base/colors';
@import '../collapsible';
// Styling for login modal to style tabs
.reveal-modal.login-modal {
@@ -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
app/views/registration/steps/_introduction.html.haml
View File

@@ -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

2
config/locales/en.yml
View File

@@ -1830,7 +1830,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"