_form.html.haml in hackathon_manager-0.13.12

- old
+ new
@@ -2,77 +2,86 @@
   = bs_horizontal_simple_form_for @questionnaire, url: url_for(action: @questionnaire.new_record? ? "create" : "update", controller: "questionnaires"), html: { "data-validate" => "form" } do |f|
 
     - if f.error_notification.present?
       = f.error_notification
 
-    %fieldset
-      - if @questionnaire&.user&.provider == 'mlh'
-        %legend Provided by My MLH
-      %br
-      = f.input :first_name, input_html: { "data-validate" => "presence" }, label: "First Name", autofocus: true
-      = f.input :last_name, input_html: { "data-validate" => "presence" }, label: "Last Name"
-      = f.input :email, input_html: { "data-validate" => "presence email", value: @questionnaire.user.try(:email) }, required: true, hint: 'Can be an existing user (without a questionnaire) or a new user. If this is a new user, they will receive a randomly-generated password that they must request a password reset for.'
-      = f.input :phone, input_html: { "data-validate" => "presence" }
-      = f.input :date_of_birth, start_year: Date.today.year - 18, end_year: Date.today.year - 90, order: [:month, :day, :year], input_html: { "data-validate" => "presence" }
+    .row
+      .col-xl-6
+        .card.mb-4
+          .card-header Personal information
+          .card-body
+            - if @questionnaire&.user&.provider == 'mlh'
+              %h6.card-subtitle.mb-2
+                %span.badge.badge-info Provided by My MLH
+            = f.input :first_name, input_html: { "data-validate" => "presence" }, label: "First Name", autofocus: true
+            = f.input :last_name, input_html: { "data-validate" => "presence" }, label: "Last Name"
+            = f.input :email, input_html: { "data-validate" => "presence email", value: @questionnaire.user.try(:email) }, required: true, hint: 'Can be an existing user (without a questionnaire) or a new user. If this is a new user, they will receive a randomly-generated password that they must request a password reset for.'
+            = f.input :phone, input_html: { "data-validate" => "presence" }
+            = f.input :date_of_birth, start_year: Date.today.year - 18, end_year: Date.today.year - 90, order: [:month, :day, :year], input_html: { "data-validate" => "presence" }
 
-      = f.input :school_id, as: :school_selection, input_html: { "data-validate" => "presence" }
-      = f.input :level_of_study, input_html: { "data-validate" => "presence" }
-      = f.input :major, input_html: { "data-validate" => "presence" }
-      = f.input :shirt_size, as: :select, collection: Questionnaire::POSSIBLE_SHIRT_SIZES, include_blank: "(select one...)", input_html: { "data-validate" => "presence" }
-      = f.input :gender, input_html: { "data-validate" => "presence" }
-      = f.input :dietary_restrictions, label: "Health Restrictions"
-      = f.input :special_needs, label: "Special needs"
+            = f.input :school_id, as: :school_selection, input_html: { "data-validate" => "presence" }
+            = f.input :level_of_study, input_html: { "data-validate" => "presence" }
+            = f.input :major, input_html: { "data-validate" => "presence" }
+            = f.input :shirt_size, as: :select, collection: Questionnaire::POSSIBLE_SHIRT_SIZES, include_blank: "(select one...)", input_html: { "data-validate" => "presence" }
+            = f.input :gender, input_html: { "data-validate" => "presence" }
+            = f.input :dietary_restrictions, label: "Health Restrictions"
+            = f.input :special_needs, label: "Special needs"
 
-    %br
+      .col-xl-6
+        .card.mb-4
+          .card-header Resume
+          .card-body
+            - if HackathonManager.field_enabled?(:why_attend)
+              = f.input :why_attend, label: "Why #{Rails.configuration.hackathon['name']}?", placeholder: "In a sentence or two, why would you like to attend #{Rails.configuration.hackathon['name']}?", input_html: { rows: 3, maxlength: 280 }
 
-    .form-inputs
-      %br
-      - if HackathonManager.field_enabled?(:why_attend)
-        = f.input :why_attend, label: "Why #{Rails.configuration.hackathon['name']}?", placeholder: "In a sentence or two, why would you like to attend #{Rails.configuration.hackathon['name']}?", input_html: { rows: 3, maxlength: 280 }
+            = f.input :experience, as: :select, collection: Questionnaire::POSSIBLE_EXPERIENCES.invert, include_blank: "(select one...)", label: "Experience", input_html: { "data-validate" => "presence" }
+            = f.input :interest, as: :select, collection: Questionnaire::POSSIBLE_INTERESTS.invert, include_blank: "(select one...)", label: "Interest", input_html: { "data-validate" => "presence" }
 
-      = f.input :experience, as: :select, collection: Questionnaire::POSSIBLE_EXPERIENCES.invert, include_blank: "(select one...)", label: "Experience", input_html: { "data-validate" => "presence" }
-      = f.input :interest, as: :select, collection: Questionnaire::POSSIBLE_INTERESTS.invert, include_blank: "(select one...)", label: "Interest", input_html: { "data-validate" => "presence" }
+            = f.input :graduation_year, as: :select, collection: Questionnaire::POSSIBLE_GRAD_YEARS, include_blank: "(select one...)", label: "Graduation year", input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
+            = f.input :race_ethnicity, as: :select, collection: Questionnaire::POSSIBLE_RACE_ETHNICITIES, include_blank: "(select one...)", label: "Race/Ethnicity", input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
 
-      = f.input :graduation_year, as: :select, collection: Questionnaire::POSSIBLE_GRAD_YEARS, include_blank: "(select one...)", label: "Graduation year", input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
-      = f.input :race_ethnicity, as: :select, collection: Questionnaire::POSSIBLE_RACE_ETHNICITIES, include_blank: "(select one...)", label: "Race/Ethnicity", input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
+            = f.input :resume, as: :deletable_attachment, hint: "Must be under 2MB", input_html: { "data-validate" => "file-max-size file-content-type", "data-validate-file-max-size" => "2097152", "data-validate-file-content-type" => "application/pdf" }, label: "Resume (PDF)"
 
-      = f.input :resume, as: :deletable_attachment, hint: "Must be under 2MB", input_html: { "data-validate" => "file-max-size file-content-type", "data-validate-file-max-size" => "2097152", "data-validate-file-content-type" => "application/pdf" }, label: "Resume (PDF)"
+            = f.input :portfolio_url, label: "Portfolio Link"
+            = f.input :vcs_url, label: "GitHub/BitBucket"
 
-      = f.input :portfolio_url, label: "Portfolio Link"
-      = f.input :vcs_url, label: "GitHub/BitBucket"
+            = f.input :can_share_info, label: "Share resume with employers?"
 
-      = f.input :can_share_info, label: "Share resume with employers?"
+      .col-xl-6
+        .card.mb-4
+          .card-header Travel information
+          .card-body
+            - travel_state = !@questionnaire.new_record? && @questionnaire.travel_not_from_school
+            = f.input :travel_not_from_school, label: "I will not be traveling from my school"
+            = f.input :travel_location, input_html: { "data-validate" => "presence", disabled: !travel_state }, wrapper_html: { style: travel_state ? "" : "display: none" }, label: "Travel Location"
 
-      %hr
+            = f.association :bus_list, label: "Bus list", include_blank: 'Not travelling on a sponsored bus'
+            = f.input :boarded_bus, as: :boolean, label: "Boarded bus", input_html: { checked: @questionnaire.boarded_bus_at.present? }
+            = f.input :is_bus_captain, label: "Is Bus Captain"
 
-      - travel_state = !@questionnaire.new_record? && @questionnaire.travel_not_from_school
-      = f.input :travel_not_from_school, label: "I will not be traveling from my school"
-      = f.input :travel_location, input_html: { "data-validate" => "presence", disabled: !travel_state }, wrapper_html: { style: travel_state ? "" : "display: none" }, label: "Travel Location"
+      .col-xl-6
+        .card.mb-4
+          .card-header Agreements
+          .card-body
+            .supporting-text
+              Please read the
+              = link_to asset_url(Rails.configuration.hackathon['agreement_pdf_asset']), target: '_blank' do
+                #{Rails.configuration.hackathon['name']} Agreement
+                %span.fa.fa-external-link.icon-space-l-half
+            = f.input :agreement_accepted, label: "I accept the #{Rails.configuration.hackathon['name']} agreement.", input_html: { "data-validate" => "presence" }
 
-      = f.association :bus_list, label: "Bus list", include_blank: 'Not travelling on a sponsored bus'
-      = f.input :is_bus_captain, label: "Is Bus Captain"
+            .supporting-text
+              Please read the
+              %a{ href:"http://static.mlh.io/docs/mlh-code-of-conduct.pdf", target: "_blank" }
+                MLH Code of Conduct
+                %span.fa.fa-external-link.icon-space-l-half
+            = f.input :code_of_conduct_accepted, label: "I accept the MLH Code of Conduct.", input_html: { "data-validate" => "presence" }
 
-    %hr
+            .supporting-text
+              I agree to the terms of both the
+              <a href="https://github.com/MLH/mlh-policies/tree/master/prize-terms-and-conditions" target="_blank">MLH Contest Terms</a> and Conditions and the
+              <a href="https://mlh.io/privacy" target="_blank">MLH Privacy Policy</a>. Please note that you may receive pre and post-event informational e-mails and occasional messages about hackathons from MLH as per the MLH Privacy Policy.
+            = f.input :data_sharing_accepted, label: "I accept the MLH policies.", input_html: { "data-validate" => "presence" }
 
-    .form-inputs
-      .supporting-text
-        Please read the
-        = link_to asset_url(Rails.configuration.hackathon['agreement_pdf_asset']), target: '_blank' do
-          #{Rails.configuration.hackathon['name']} Agreement
-          %span.fa.fa-external-link.icon-space-l-half
-      = f.input :agreement_accepted, label: "I accept the #{Rails.configuration.hackathon['name']} agreement.", input_html: { "data-validate" => "presence" }
-
-      .supporting-text
-        Please read the
-        %a{ href:"http://static.mlh.io/docs/mlh-code-of-conduct.pdf", target: "_blank" }
-          MLH Code of Conduct
-          %span.fa.fa-external-link.icon-space-l-half
-      = f.input :code_of_conduct_accepted, label: "I accept the MLH Code of Conduct.", input_html: { "data-validate" => "presence" }
-
-      .supporting-text
-        I agree to the terms of both the
-        <a href="https://github.com/MLH/mlh-policies/tree/master/prize-terms-and-conditions" target="_blank">MLH Contest Terms</a> and Conditions and the
-        <a href="https://mlh.io/privacy" target="_blank">MLH Privacy Policy</a>. Please note that you may receive pre and post-event informational e-mails and occasional messages about hackathons from MLH as per the MLH Privacy Policy.
-      = f.input :data_sharing_accepted, label: "I accept the MLH policies.", input_html: { "data-validate" => "presence" }
-
-    .center
+    .center.mb-4
       = f.button :submit, value: ( @questionnaire.new_record? ? 'Create' : 'Save' ), class: 'btn-primary'
+    %hr