_form.html.haml in hackathon_manager-0.5.0

- old
+ new
@@ -12,65 +12,62 @@
       - if Rails.configuration.hackathon['disclaimer']
         #disclaimer
           = markdown(Rails.configuration.hackathon['disclaimer'])
 
       .form-inputs
-        = f.input :first_name, placeholder: "Joe", input_html: { "data-validate" => "presence" }, autofocus: true
-        = f.input :last_name, placeholder: "Smith", input_html: { "data-validate" => "presence" }
-        = f.input :phone, placeholder: "(123) 456-7890", input_html: { "data-validate" => "presence" }
+        = f.input :first_name, input_html: { "data-validate" => "presence" }, autofocus: true, wrapper_html: { class: 'input--half' }
+        = f.input :last_name, input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
+        = f.input :phone, label: "Phone number", 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, placeholder: "My University", input_html: { "data-validate" => "presence" }
-        = f.input :level_of_study, placeholder: "University (Undergraduate)", input_html: { "data-validate" => "presence" }
-        = f.input :major, placeholder: "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, placeholder: "Female, Male, Non-Binary, Prefer not to say, other", input_html: { "data-validate" => "presence" }
-        = f.input :dietary_restrictions, placeholder: "Allergies, medical assistance, etc. (optional)", label: "Health restrictions"
-        = f.input :special_needs, placeholder: "Any special needs or requests (optional)", 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" }, wrapper_html: { class: 'input--half' }
+        = f.input :major, input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
+        = f.input :gender, input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
+        = f.input :shirt_size, as: :select, collection: Questionnaire::POSSIBLE_SHIRT_SIZES, include_blank: "(select one...)", input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
+        = f.input :dietary_restrictions, as: :text, placeholder: "Allergies, medical assistance, etc.", label: "Health restrictions", wrapper_html: { class: 'input--half' }
+        = f.input :special_needs, as: :text, placeholder: "Any special needs or requests", label: "Special needs", wrapper_html: { class: 'input--half' }
 
-      .center
+      .right
         %button.button{ type: "button", "data-wizard" => "next" } Next
 
     .wizard-stage
       .form-inputs
-        = 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" }, wrapper_html: { class: 'input--half' }
+        = f.input :interest, as: :select, collection: Questionnaire::POSSIBLE_INTERESTS.invert, include_blank: "(select one...)", label: "Interest", input_html: { "data-validate" => "presence" }, wrapper_html: { class: 'input--half' }
 
-        = f.input :portfolio_url, label: "Portfolio link", placeholder:"http://mywebsite.com"
-        = f.input :vcs_url, label: "GitHub/Bitbucket", placeholder:"https://github.com/coderit"
-        = f.input :resume, as: :deletable_attachment, hint: "Must be < 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 :can_share_info, as: :radio_buttons, collection: { " Yes!" => true, " No thank you" => false }, label: "Share info with sponsors?"
-        %p{ style: "margin-top: -10px" }
-          %i
-            %small Our sponsors would receive info such as your name, email, resume, GitHub link, etc
+        = f.input :portfolio_url, label: "Portfolio link", placeholder: "http://mywebsite.com"
+        = f.input :vcs_url, label: "GitHub/Bitbucket link", placeholder: "https://github.com/coderit"
+        = f.input :resume, as: :deletable_attachment, hint: "Must be a PDF, 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"
+        = f.input :can_share_info, as: :radio_buttons, collection: { " Yes please!" => true, " No, thank you." => false }, label: "Share info with sponsors?", hint: "Our sponsors would receive info such as your name, email, resume, GitHub link, etc"
 
-        %hr
-
         - travel_state = !@questionnaire.new_record? && @questionnaire.travel_not_from_school
-        = f.input :travel_not_from_school, as: :radio_buttons, collection: { " My School" => false, " Somewhere else" => true }, label: "I am traveling from..."
+        = f.input :travel_not_from_school, as: :radio_buttons, collection: { " My school" => false, " Somewhere else" => true }, label: "I am traveling from..."
         = f.input :travel_location, input_html: { "data-validate" => "presence", disabled: !travel_state }, wrapper_html: { style: travel_state ? "" : "display: none" }, label: "Where are you traveling from?", placeholder: "New York City"
+
       %hr
-      %div
-        %p
-          %small
-            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, as: :formatted_boolean, label: "I accept the #{Rails.configuration.hackathon['name']} Agreement", input_html: { "data-validate" => "presence" }
-        %p
-          %small
-            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, as: :formatted_boolean, label: "I accept the MLH Code of Conduct", input_html: { "data-validate" => "presence" }
-        %p
-          %small
-            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, as: :formatted_boolean, label: "I accept the MLH policies", input_html: { "data-validate" => "presence" }
 
-      .center
+      .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, as: :formatted_boolean, 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, as: :formatted_boolean, 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, as: :formatted_boolean, label: "I accept the MLH policies.", input_html: { "data-validate" => "presence" }
+
+      .right
         %button.button{ type: "button", "data-wizard" => "previous" } Previous
+        &nbsp;
         = f.button :submit, value: ( @questionnaire.new_record? ? 'Apply' : 'Save' )