Refactor Request Quote page to flat-style

app/core/forms.coffee

@@ -83,8 +83,8 @@ module.exports.setErrorToProperty = setErrorToProperty = (el, property, message,
   setErrorToField input, message, warning
   
 module.exports.scrollToFirstError = ($el=$('body')) ->
-  $first = $el.find('.has-error, .alert-danger, .error-help-block, .has-warning, .alert-warning, .warning-help-block').first()
-  $('body').animate({ scrollTop: $first.offset().top - 20 }, 300)
+  $first = $el.find('.has-error, .alert-danger, .error-help-block, .has-warning, .alert-warning, .warning-help-block').filter(':visible').first()
+  $('html, body').animate({ scrollTop: $first.offset().top - 20 }, 300)
 
 module.exports.clearFormAlerts = (el) ->
   $('.has-error', el).removeClass('has-error')

app/styles/request-quote-view.sass

@@ -1,27 +1,32 @@
 #request-quote-view
-  
-  label
-    margin-bottom: 2px
-  
-  .row
-    margin: 10px 0
+  #site-content-area
+    //TODO: Maybe this should go in style-flat
+    margin: 50px 10px 100px
     
+  .section
+    margin-top: 80px
+    margin-bottom: 50px
+  
+  .form-group
+    label
+      margin-bottom: 0
+      
+  label.checkbox
+    font-weight: normal
+  
   .help-block
-    margin: 0
+    margin: -4px 0 2px
   
   p
     margin: 0 0 20px
     
-  hr
-    margin: 30px 0
-    
   .checkbox, .checkbox-inline
-    margin: 0
-  
-  #anything-else-row
-    margin: 50px 0 20px
+    input
+      margin-top: 8px
   
   #other-education-level-input
+    label
+    display: inline-block
     display: inline-block
     width: 200px
     margin-left: 5px

app/templates/request-quote-view.jade

@@ -1,155 +1,152 @@
-extends /templates/base
+extends /templates/base-flat
 
 block content
-  form.form(class=view.trialRequest.isNew() ? '' : 'hide')
-    h1.text-center(data-i18n="teachers_quote.title")
-    p.text-center(data-i18n="teachers_quote.subtitle")
+  .container
+    form.form(class=view.trialRequest.isNew() ? '' : 'hide')
+      h1.text-center(data-i18n="teachers_quote.title")
+      h2.text-center(data-i18n="teachers_quote.subtitle")
 
-    .row
-      .col-sm-offset-2.col-sm-4
-        .form-group
-          label.control-label(data-i18n="general.name")
-          - var name = me.get('name') || '';
-          input.form-control(name="name" value=name, disabled=!!name)
-          
-      .col-sm-4
-        #email-form-group.form-group
-          label.control-label(data-i18n="general.email")
-          - var email = me.get('email') || '';
-          input.form-control(name="email" type="email", value=email, disabled=!!email)
-            
-    
-    .row
-      .col-sm-offset-2.col-sm-4
-        .form-group
-          label.control-label
-            span(data-i18n="teachers_quote.phone_number")
-            span.spl.text-muted(data-i18n="signup.optional")
-          .help-block
-            em.text-info(data-i18n="teachers_quote.phone_number_help")
-          input.form-control(name="phoneNumber")
-          
-      .col-sm-4
-        .form-group
-          label.control-label(data-i18n="teachers_quote.role_label")
-          .help-block
-            em.text-info(data-i18n="teachers_quote.role_help")
-          select.form-control(name="role")
-            option
-            option(data-i18n="courses.teacher", value="Teacher")
-            option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator")
-            option(data-i18n="teachers_quote.advisor", value="Advisor")
-            option(data-i18n="teachers_quote.principal", value="Principal")
-            option(data-i18n="teachers_quote.superintendent", value="Superintendent")
-            option(data-i18n="teachers_quote.parent", value="Parent")
-    
-    .row
-      .col-sm-offset-2.col-sm-8
-        hr
-    
-    .row
-      .col-sm-offset-2.col-sm-4
-        .form-group
-          label.control-label(data-i18n="teachers_quote.organization_label")
-          input.form-control(name="organization")
-          
-      .col-sm-4
-        .form-group
-          label.control-label(data-i18n="teachers_quote.city")
-          input.form-control(name="city")
-          
-    .row
-      .col-sm-offset-2.col-sm-4
-        .form-group
-          label.control-label(data-i18n="teachers_quote.state")
-          input.form-control(name="state")
-          
-      .col-sm-4
-        .form-group
-          label.control-labellabel.control-label(data-i18n="teachers_quote.country")
-          input.form-control(name="country")
-          
-    .row
-      .col-sm-offset-2.col-sm-8
-        hr
-          
-    .row
-      .col-sm-offset-2.col-sm-5
-        .form-group
-          label.control-label(data-i18n="courses.number_students")
-          .help-block
-            em.text-info(data-i18n="teachers_quote.num_students_help")
-          select.form-control(name="numStudents")
-            option
-            option 1-10
-            option 11-50
-            option 51-100
-            option 101-200
-            option 201-500
-            option 501-1000
-            option 1000+
-            
-    .form-group
-
-      .row
-        .col-sm-offset-2.col-sm-4
-            label.control-label(data-i18n="teachers_quote.education_level_label")
-            .help-block
-              em.text-info(data-i18n="teachers_quote.education_level_help")
+      #form-teacher-info.section
+        .row
+          .col-sm-offset-2.col-sm-4
+            .form-group
+              label.control-label(data-i18n="general.name")
+              - var name = me.get('name') || '';
+              input.form-control(name="name" value=name, disabled=!!name)
               
-      .row
-        .col-sm-offset-2.col-sm-2
-          label.control-label.checkbox
-            input(type="checkbox" name="educationLevel" value="Elementary")
-            span(data-i18n="teachers_quote.elementary_school")
-        .col-sm-2
-          label.control-label.checkbox
-            input(type="checkbox" name="educationLevel" value="High")
-            span(data-i18n="teachers_quote.high_school")
-        .col-sm-6
-          // Other field uses custom logic, so no name field is included in either input.
-          // That way the forms library ignores it.
-          .checkbox-inline
-            label.control-label
-              input#other-education-level-checkbox(type="checkbox")
-              span(data-i18n="nav.other")
-              br
-              span(data-i18n="teachers_quote.please_explain")
-          input#other-education-level-input.form-control
+          .col-sm-4
+            #email-form-group.form-group
+              label.control-label(data-i18n="general.email")
+              - var email = me.get('email') || '';
+              input.form-control(name="email" type="email", value=email, disabled=!!email)
+                
         
-      .row
-        .col-sm-offset-2.col-sm-2
-          label.control-label.checkbox
-            input(type="checkbox" name="educationLevel" value="Middle")
-            span(data-i18n="teachers_quote.middle_school")
-        .col-sm-2
-          label.control-label.checkbox
-            input(type="checkbox" name="educationLevel" value="College+")
-            span(data-i18n="teachers_quote.college_plus")
-        
-    #anything-else-row.row
-      .col-sm-offset-2.col-sm-8
-        label.control-label
-          span(data-i18n="teachers_quote.anything_else")
-          span.spl.text-muted(data-i18n="signup.optional")
-        
-        textarea.form-control(rows=8, name="notes")
-        
-    #buttons-row.row.text-center
-      input#submit-request-btn.btn.btn-primary(type="submit" data-i18n="[value]common.send")
+        .row
+          .col-sm-offset-2.col-sm-4
+            .form-group
+              label.control-label
+                span(data-i18n="teachers_quote.phone_number")
+                span.spl.text-muted(data-i18n="signup.optional")
+              .help-block.small
+                em.text-info(data-i18n="teachers_quote.phone_number_help")
+              input.form-control(name="phoneNumber")
+              
+          .col-sm-4
+            .form-group
+              label.control-label(data-i18n="teachers_quote.role_label")
+              .help-block.small
+                em.text-info(data-i18n="teachers_quote.role_help")
+              select.form-control(name="role")
+                option
+                option(data-i18n="courses.teacher", value="Teacher")
+                option(data-i18n="teachers_quote.tech_coordinator", value="Technology coordinator")
+                option(data-i18n="teachers_quote.advisor", value="Advisor")
+                option(data-i18n="teachers_quote.principal", value="Principal")
+                option(data-i18n="teachers_quote.superintendent", value="Superintendent")
+                option(data-i18n="teachers_quote.parent", value="Parent")
       
-      
-  #form-submit-success.text-center(class=view.trialRequest.isNew() ? 'hide' : '')
-    h1.text-center(data-i18n="teachers_quote.thanks_header")
-    p.text-center
-      span.spr(data-i18n="teachers_quote.thanks_p")
-      a.spl(href="mailto:team@codecombat.com") team@codecombat.com
+      #form-school-info.section
+        .row
+          .col-sm-offset-2.col-sm-4
+            .form-group
+              label.control-label(data-i18n="teachers_quote.organization_label")
+              input.form-control(name="organization")
+              
+          .col-sm-4
+            .form-group
+              label.control-label(data-i18n="teachers_quote.city")
+              input.form-control(name="city")
+              
+        .row
+          .col-sm-offset-2.col-sm-4
+            .form-group
+              label.control-label(data-i18n="teachers_quote.state")
+              input.form-control(name="state")
+              
+          .col-sm-4
+            .form-group
+              label.control-labellabel.control-label(data-i18n="teachers_quote.country")
+              input.form-control(name="country")
+            
+      #form-students-info.section
+        .row
+          .col-sm-offset-2.col-sm-5
+            .form-group
+              label.control-label(data-i18n="courses.number_students")
+              .help-block.small
+                em.text-info(data-i18n="teachers_quote.num_students_help")
+              select.form-control(name="numStudents")
+                option
+                option 1-10
+                option 11-50
+                option 51-100
+                option 101-200
+                option 201-500
+                option 501-1000
+                option 1000+
+              
+        .form-group
 
-    if me.isAnonymous()
-      p.text-center(data-i18n="teachers_quote.thanks_anon")
+          .row
+            .col-sm-offset-2.col-sm-4
+                label.control-label(data-i18n="teachers_quote.education_level_label")
+                .help-block.small
+                  em.text-info(data-i18n="teachers_quote.education_level_help")
+                  
+          .row
+            .col-sm-offset-2.col-sm-2
+              label.control-label.checkbox
+                input(type="checkbox" name="educationLevel" value="Elementary")
+                span(data-i18n="teachers_quote.elementary_school")
+            .col-sm-2
+              label.control-label.checkbox
+                input(type="checkbox" name="educationLevel" value="High")
+                span(data-i18n="teachers_quote.high_school")
+            .col-sm-2
+              label.control-label.checkbox
+                input(type="checkbox" name="educationLevel" value="Middle")
+                span(data-i18n="teachers_quote.middle_school")
+            .col-sm-2
+              label.control-label.checkbox
+                input(type="checkbox" name="educationLevel" value="College+")
+                span(data-i18n="teachers_quote.college_plus")
+                
+          .row
+            .col-sm-offset-2.col-sm-6
+              // Other field uses custom logic, so no name field is included in either input.
+              // That way the forms library ignores it.
+              .form-group
+                label.control-label.checkbox
+                  input#other-education-level-checkbox(type="checkbox")
+                  span(data-i18n="nav.other")
+                  | 
+                  span(data-i18n="teachers_quote.please_explain")
+                input#other-education-level-input.form-control
+            
+      #anything-else-row.section
+        .row
+          .col-sm-offset-2.col-sm-8
+            label.control-label
+              span(data-i18n="teachers_quote.anything_else")
+              span.spl.text-muted(data-i18n="signup.optional")
+            
+            textarea.form-control(rows=8, name="notes")
+            
+      #buttons-row.row.text-center
+        input#submit-request-btn.btn.btn-lg.btn-primary(type="submit" data-i18n="[value]common.send")
         
+        
+    #form-submit-success.text-center(class=view.trialRequest.isNew() ? 'hide' : '')
+      h1.text-center(data-i18n="teachers_quote.thanks_header")
       p.text-center
-        button#login-btn.btn.btn-info(data-i18n="login.log_in")
-        button#signup-btn.btn.btn-info(data-i18n="login.sign_up")
-    else
-      p.text-center(data-i18n="teachers_quote.thanks_logged_in")
+        span.spr(data-i18n="teachers_quote.thanks_p")
+        a.spl(href="mailto:team@codecombat.com") team@codecombat.com
+
+      if me.isAnonymous()
+        p.text-center(data-i18n="teachers_quote.thanks_anon")
+          
+        p.text-center
+          button#login-btn.btn.btn-info(data-i18n="login.log_in")
+          button#signup-btn.btn.btn-info(data-i18n="login.sign_up")
+      else
+        p.text-center(data-i18n="teachers_quote.thanks_logged_in")

app/views/RequestQuoteView.coffee

@@ -105,6 +105,7 @@ module.exports = class RequestQuoteView extends RootView
         .addClass('has-error')
         .append($("<div class='help-block error-help-block'>#{userExists} <a id='email-exists-login-link'>#{logIn}</a>"))
     @$('#submit-request-btn').text('Submit').attr('disabled', false)
+    forms.scrollToFirstError()
 
   onClickEmailExistsLoginLink: ->
     modal = new AuthModal({