Improve styles related to Express for Business

W4ngCoder · Oct 13, 2017 · fff6ea8 · fff6ea8
1 parent 3ef60a1
commit fff6ea8
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 72 deletions.
diff --git a/server/public/javascripts/onboarding.js 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
diff --git 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
@@ -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
@@ -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')