From 271330d2fc3af12a18930b19cfbb93807017b4ee Mon Sep 17 00:00:00 2001 From: jazzdragon Date: Sat, 4 May 2019 19:43:46 -0700 Subject: [PATCH 1/7] Add collapsible elements and styles --- .../darkswarm/pages/login_modal.css.scss | 34 ++++++++++++++ .../steps/_introduction.html.haml | 44 +++++++++++-------- 2 files changed, 59 insertions(+), 19 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss index 3a9d3854410..83f59601563 100644 --- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss +++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss @@ -23,3 +23,37 @@ } } } + +.collapsible-checkbox { + display: none; +} + +.lbl-toggle > ::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 + .lbl-toggle + .collapsible-content { + max-height: 350px; +} + +.collapsible-checkbox:checked + .lbl-toggle > ::before { + transform: rotate(90deg) translateX(-3px); +} diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml index 84bbb9840e5..53315b7815a 100644 --- a/app/views/registration/steps/_introduction.html.haml +++ b/app/views/registration/steps/_introduction.html.haml @@ -10,27 +10,33 @@ .row{ '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.lbl-toggle{:for => "collapsible-registration-checklist"} + %h5= t(".registration_checklist")+":" + .collapsible-content + %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.lbl-toggle{:for => "collapsible-registration-outcome"} + %h5 + = t(".registration_outcome_headline") + .collapsible-content + %p= t(".registration_outcome1_html") + %p= t(".registration_outcome2") + %p= t(".registration_outcome3") .row{'ng-init' => "tos_required=#{Spree::Config.enterprises_require_tos}" } %hr From a876f81f0aaf44780af18151adea08ed3b526a91 Mon Sep 17 00:00:00 2001 From: jazzdragon Date: Sat, 4 May 2019 19:48:30 -0700 Subject: [PATCH 2/7] Make collapsible always visible on large screen --- .../stylesheets/darkswarm/pages/login_modal.css.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss index 83f59601563..9b83a8f9339 100644 --- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss +++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss @@ -57,3 +57,13 @@ .collapsible-checkbox:checked + .lbl-toggle > ::before { transform: rotate(90deg) translateX(-3px); } + +@media only screen and (min-width: 1025px) { + .lbl-toggle > ::before { + display: none; + } + + .collapsible-content { + max-height: 350px; + } +} From 623471290ebc2f525c2d5cb14280d6dbba70a56a Mon Sep 17 00:00:00 2001 From: jazzdragon Date: Sat, 4 May 2019 19:52:08 -0700 Subject: [PATCH 3/7] Make sure styling doesn't get messed up if resizing down and back up --- app/assets/stylesheets/darkswarm/pages/login_modal.css.scss | 5 +++++ app/views/registration/steps/_introduction.html.haml | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss index 9b83a8f9339..565c22196ba 100644 --- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss +++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss @@ -66,4 +66,9 @@ .collapsible-content { max-height: 350px; } + + // make sure styling doesn't get messed up if resizing down and back up + .collapsible-menus-container { + min-height: 250px; + } } diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml index 53315b7815a..aa151251487 100644 --- a/app/views/registration/steps/_introduction.html.haml +++ b/app/views/registration/steps/_introduction.html.haml @@ -8,7 +8,7 @@ %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 } %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"} %label.lbl-toggle{:for => "collapsible-registration-checklist"} From 37d15a1be3f97aec573e5e71680dc6cb9e0dfd18 Mon Sep 17 00:00:00 2001 From: jazzdragon Date: Sat, 4 May 2019 20:12:12 -0700 Subject: [PATCH 4/7] Add classes to indicate collapsible is for medium screens or smaller --- .../darkswarm/collapsible.css.scss | 52 +++++++++++++++++++ .../darkswarm/pages/login_modal.css.scss | 43 +-------------- .../steps/_introduction.html.haml | 8 +-- 3 files changed, 57 insertions(+), 46 deletions(-) create mode 100644 app/assets/stylesheets/darkswarm/collapsible.css.scss diff --git a/app/assets/stylesheets/darkswarm/collapsible.css.scss b/app/assets/stylesheets/darkswarm/collapsible.css.scss new file mode 100644 index 00000000000..7066f9cbbb5 --- /dev/null +++ b/app/assets/stylesheets/darkswarm/collapsible.css.scss @@ -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; + } +} diff --git a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss index 565c22196ba..e6baba33935 100644 --- a/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss +++ b/app/assets/stylesheets/darkswarm/pages/login_modal.css.scss @@ -1,4 +1,5 @@ @import '../base/colors'; +@import '../collapsible'; // Styling for login modal to style tabs .reveal-modal.login-modal { @@ -24,49 +25,7 @@ } } -.collapsible-checkbox { - display: none; -} - -.lbl-toggle > ::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 + .lbl-toggle + .collapsible-content { - max-height: 350px; -} - -.collapsible-checkbox:checked + .lbl-toggle > ::before { - transform: rotate(90deg) translateX(-3px); -} - @media only screen and (min-width: 1025px) { - .lbl-toggle > ::before { - display: none; - } - - .collapsible-content { - max-height: 350px; - } - // make sure styling doesn't get messed up if resizing down and back up .collapsible-menus-container { min-height: 250px; diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml index aa151251487..f92c4a470f9 100644 --- a/app/views/registration/steps/_introduction.html.haml +++ b/app/views/registration/steps/_introduction.html.haml @@ -11,9 +11,9 @@ .row.collapsible-menus-container{ 'data-equalizer' => true } .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true } %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"} - %label.lbl-toggle{:for => "collapsible-registration-checklist"} + %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-checklist"} %h5= t(".registration_checklist")+":" - .collapsible-content + .collapsible-content.collapsible-content-md %ul.check-list %li = t(".registration_time") @@ -30,10 +30,10 @@ .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true} %input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"} - %label.lbl-toggle{:for => "collapsible-registration-outcome"} + %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-outcome"} %h5 = t(".registration_outcome_headline") - .collapsible-content + .collapsible-content.collapsible-content-md %p= t(".registration_outcome1_html") %p= t(".registration_outcome2") %p= t(".registration_outcome3") From 473fb45132030b1e623e3b107fe8d29f401958c3 Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Thu, 13 Jun 2019 19:25:22 +0100 Subject: [PATCH 5/7] Remove an extra break line to remove html space and make sure alignment is correct --- app/views/registration/steps/_introduction.html.haml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml index f92c4a470f9..5a755dbe65e 100644 --- a/app/views/registration/steps/_introduction.html.haml +++ b/app/views/registration/steps/_introduction.html.haml @@ -31,8 +31,7 @@ .small-9.medium-8.large-5.columns.pad-top.end{ 'data-equalizer-watch' => true} %input#collapsible-registration-outcome.collapsible-checkbox{:type => "checkbox"} %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-outcome"} - %h5 - = t(".registration_outcome_headline") + %h5= t(".registration_outcome_headline") .collapsible-content.collapsible-content-md %p= t(".registration_outcome1_html") %p= t(".registration_outcome2") From a370216f5439f848925b504c6217d41569512a33 Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Thu, 13 Jun 2019 19:24:57 +0100 Subject: [PATCH 6/7] Change default translation in the registration introduction so that it looks better when collapsed --- app/views/registration/steps/_introduction.html.haml | 2 +- config/locales/en.yml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/views/registration/steps/_introduction.html.haml b/app/views/registration/steps/_introduction.html.haml index 5a755dbe65e..91150145937 100644 --- a/app/views/registration/steps/_introduction.html.haml +++ b/app/views/registration/steps/_introduction.html.haml @@ -12,7 +12,7 @@ .small-12.medium-12.large-6.columns.pad-top{ 'data-equalizer-watch' => true } %input#collapsible-registration-checklist.collapsible-checkbox{:type => "checkbox"} %label.collapsible-label.collapsible-label-md{:for => "collapsible-registration-checklist"} - %h5= t(".registration_checklist")+":" + %h5= t(".registration_checklist") .collapsible-content.collapsible-content-md %ul.check-list %li diff --git a/config/locales/en.yml b/config/locales/en.yml index 6ec88c03fd2..bc6010d8450 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -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" From 6223a738a7127a6a3224b0d5cd59fa62141dc94d Mon Sep 17 00:00:00 2001 From: luisramos0 Date: Thu, 13 Jun 2019 19:32:33 +0100 Subject: [PATCH 7/7] Fix rubocop issues in collapsible.css --- .../stylesheets/darkswarm/collapsible.css.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/assets/stylesheets/darkswarm/collapsible.css.scss b/app/assets/stylesheets/darkswarm/collapsible.css.scss index 7066f9cbbb5..fdabb08ce5d 100644 --- a/app/assets/stylesheets/darkswarm/collapsible.css.scss +++ b/app/assets/stylesheets/darkswarm/collapsible.css.scss @@ -6,22 +6,22 @@ $collapsible-max-height: 350px; } .collapsible-label > ::before { - content: ' '; - display: inline-block; - - border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; + border-top: 5px solid transparent; + + content: ' '; + display: inline-block; - vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); - transition: transform .2s ease-out; + + vertical-align: middle; } .collapsible-content { - max-height: 0px; + max-height: 0; overflow: hidden; transition: max-height .25s ease-in-out;