From fff6ea848328cf7bdff21bc148fdaeddaf7e28d6 Mon Sep 17 00:00:00 2001 From: Romain Huet Date: Fri, 13 Oct 2017 16:55:51 -0700 Subject: [PATCH] Improve styles related to Express for Business --- server/public/javascripts/onboarding.js | 17 +++++ server/public/scripts/onboarding.js | 18 ----- server/public/stylesheets/rocketrides.css | 82 +++++++++++------------ server/views/layout.pug | 2 +- server/views/signup.pug | 16 ++--- 5 files changed, 63 insertions(+), 72 deletions(-) create mode 100644 server/public/javascripts/onboarding.js delete mode 100644 server/public/scripts/onboarding.js diff --git a/server/public/javascripts/onboarding.js b/server/public/javascripts/onboarding.js new file mode 100644 index 0000000..b3ad008 --- /dev/null +++ b/server/public/javascripts/onboarding.js @@ -0,0 +1,17 @@ +// Small script to handle selection of the pilot legal entity. + +document.body.addEventListener('change', function(e) { + if (e.target.name !== 'pilot-type') { + return; + } + + // Show the correct header for the select legal entity. + var headerPrefix = (e.target.value === 'individual') ? 'Personal' : 'Company'; + document.querySelector('.pilot-header').innerText = `${headerPrefix} Information`; + + // Show any fields that apply to the new pilot type. + var pilotInfoRows = document.querySelectorAll('.pilot-info'); + pilotInfoRows.forEach(function(row) { + row.classList.toggle('hidden', !row.classList.contains(e.target.value)); + }); +}); diff --git a/server/public/scripts/onboarding.js b/server/public/scripts/onboarding.js deleted file mode 100644 index 36932a8..0000000 --- a/server/public/scripts/onboarding.js +++ /dev/null @@ -1,18 +0,0 @@ -document.body.addEventListener('change', function(e) { - if (e.target.name !== 'pilot-type') { - return; - } - // Show the correct header for legal entity information. - document.querySelector('.type-header.is-visible').classList.toggle('is-visible'); - document.querySelector(`.type-header.${e.target.value}-info`).classList.add('is-visible'); - - // Show any fields that apply to the new pilot type. - Array.prototype.slice.call( - document.querySelectorAll('.pilot-info') - ).forEach(function(elem) { - elem.classList.toggle( - 'is-visible', - elem.classList.contains(`${e.target.value}-type`) - ); - }); -}); diff --git a/server/public/stylesheets/rocketrides.css b/server/public/stylesheets/rocketrides.css index ffc42cb..e6991e2 100644 --- a/server/public/stylesheets/rocketrides.css +++ b/server/public/stylesheets/rocketrides.css @@ -216,7 +216,6 @@ footer { .form { width: 540px; margin: 15px auto; - overflow: auto; } .account { @@ -339,13 +338,13 @@ fieldset .row { padding: 12px 20px 13px; } -fieldset .row + .row { +fieldset .row:not(.hidden) ~ .row { border-top: 1px solid rgba(0, 0, 0, 0.06); } fieldset .row::before { content: attr(label); - width: 100px; + width: 130px; padding-right: 20px; color: #8798AB; font-weight: 500; @@ -650,74 +649,69 @@ form a.button { margin: 0; } -/* Onboarding */ +/* Pilot Onboarding Options */ .pilot-options { - margin-bottom: 20px; + margin: 0 0 25px; + text-align: center; } -.pilot-options .pilot-option { + +.form label.pilot-option { + display: inline-block; + width: auto; + padding: 0; align-items: center; cursor: pointer; - display: inline-flex; - padding: 0; + text-align: left; + margin: 0 20px; } + .pilot-option input { + height: 0; + width: 0; appearance: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; - height: 0; - width: 0; } + .pilot-option input + span { - align-items: center; display: flex; - font-size: 15px; - padding-left: 20px; position: relative; + align-items: center; + color: #8798AB; + font-size: 16px; + font-weight: 500; + padding-left: 20px; } + .pilot-option input + span:before { - background: #fff; - border-radius: 30px; - box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); content: ""; display: inline-block; - flex: 0 0 30px; - height: 30px; - left: -20px; position: relative; - width: 30px; + width: 20px; + height: 20px; + left: -10px; + background: #fff; + border-radius: 20px; + box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15); } -.pilot-option input + span:after { - align-items: center; - bottom: 0; - content: url(/images/checkmark-green.svg); + +.pilot-option input:checked + span:after { + content: ""; display: flex; - height: 13px; - left: 0; - margin: auto; - opacity: 0; position: absolute; - right: calc(100% - 30px); - top: 0; - transform: scale(0.7); - transition: transform 0.2s, opacity 0.2s; - width: 13px; -} -.pilot-option input:checked + span:after { - opacity: 1; - transform: scale(1); + top: 5px; + right: calc(100% - 25px); + width: 10px; + height: 10px; + background: #13B57D; + border-radius: 10px; } -.type-header, -.row.pilot-info { +.row.pilot-info.hidden { display: none; } -.type-header.is-visible, -.pilot-info.is-visible { - display: flex; -} - /* Ride History */ diff --git a/server/views/layout.pug b/server/views/layout.pug index 8900010..9bf0814 100644 --- a/server/views/layout.pug +++ b/server/views/layout.pug @@ -31,4 +31,4 @@ html footer block footer - script(src='/scripts/onboarding.js') + script(src='/javascripts/onboarding.js') diff --git a/server/views/signup.pug b/server/views/signup.pug index 8752620..4743782 100644 --- a/server/views/signup.pug +++ b/server/views/signup.pug @@ -26,24 +26,22 @@ block content when 'profile' form(method='POST', autocomplete='off') - h4 Type of Pilot .pilot-options label.pilot-option input(type='radio', name='pilot-type', value='individual', id='po-individual', checked=true) - span Individual + span Sign up as Individual label.pilot-option input(type='radio', name='pilot-type', value='company', id='po-company') - span Corporation / LLC + span Sign up as Company - h4.type-header.individual-info.is-visible Personal Information - h4.type-header.company-info Company Information + h4.pilot-header Personal Information fieldset - .row.pilot-info.company-type(label='* Biz Name') - input(type='text', name='businessName', placeholder='Infinity and Beyond LLC') - .row.pilot-info.individual-type.is-visible(label='* First Name') + .row.pilot-info.individual(label='* First Name') input(type='text', name='firstName', placeholder='Jane') - .row.pilot-info.individual-type.is-visible(label='* Last Name') + .row.pilot-info.individual(label='* Last Name') input(type='text', name='lastName', placeholder='Diaz') + .row.pilot-info.company.hidden(label='* Company Name') + input(type='text', name='businessName', placeholder='Infinity & Beyond LLC') .row(label='Address') input(type='text', name='address', placeholder='185 Berry St', value='185 Berry St') .row(label='Postal Code')