Merge pull request #164 from empowerhack/second-form

Issue #150 - Redesign of upload form
empowerhack · Apr 22, 2017 · e9022bf · e9022bf
2 parents 032e49e + b7a0c56
commit e9022bf
Show file tree

Hide file tree

Showing 10 changed files with 136 additions and 87 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -2,6 +2,8 @@
 @import "font-awesome-sprockets";
 @import "font-awesome";
 
+@import "layout";
+@import "spacing";
 @import "drawings";
 @import "organisations";
 @import "edit";

diff --git a/app/assets/stylesheets/components/form.scss b/app/assets/stylesheets/components/form.scss
@@ -6,3 +6,35 @@ input.btn.btn-default.btn-success.btn-block {
   font-weight: bold;
   font-size: $base-font-size;
 }
+
+.form-section {
+  background-color: $white;
+  padding: $spacing-unit;
+  padding-bottom: 0;
+}
+
+.form-title {
+  border-bottom: 1px $light-gray solid;
+  margin-bottom: $spacing-unit;
+
+  h2 {
+    font-size: 1.3em;
+    margin-top: 0;
+  }
+}
+
+.form-group {
+  margin-bottom: $spacing-unit;
+}
+
+.form-consent label {
+  font-weight: bold;
+}
+
+label {
+  font-weight: normal;
+
+  &.radio_buttons {
+    margin-bottom: 0px;
+  }
+}
diff --git a/app/assets/stylesheets/edit.scss b/app/assets/stylesheets/edit.scss
@@ -23,33 +23,3 @@
     text-align: center;
   }
 }
-
-// TODO - Tidy up during the week
-.form-group.genders {
-  label {
-    border-radius: 5px;
-    margin-right: 5px;
-  }
-  label[for=drawing_gender_not_specified] {
-    background-color: #D3D3D3;
-    padding-left: 15px;
-  }
-  label[for=drawing_gender_female] {
-    background-color: #FFB6C1;
-    padding-left: 15px;
-  }
-  label[for=drawing_gender_male] {
-    background-color: #ADD8E6;
-    padding-left: 15px;
-  }
-  label[for=drawing_gender_other] {
-    background-color: #FFE8CD;
-    padding-left: 15px;
-  }
-}
-
-.form-consent {
-  label {
-    font-weight: bold;
-  }
-}
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -0,0 +1,9 @@
+.position {
+  float: none;
+  overflow: auto;
+
+  &.central {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
diff --git a/app/assets/stylesheets/spacing.scss b/app/assets/stylesheets/spacing.scss
@@ -0,0 +1,23 @@
+@import "variables";
+
+.add-margin {
+  &.top {
+    margin-top: $spacing-unit;
+
+    &.half {
+      margin-top: calc( #{ $spacing-unit} / 2);
+    }
+  }
+
+  &.bottom {
+    margin-bottom: $spacing-unit;
+
+    &.half {
+      margin-bottom: calc( #{ $spacing-unit} / 2);
+    }
+  }
+}
+
+.no-padding {
+	padding: 0 !important;
+}
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
@@ -25,3 +25,8 @@ $white: #fff;
 /**** Dimensions ****/
 $drawingsPadding: 24px;
 /***************************/
+
+/***************************/
+/**** Sizes ****/
+$spacing-unit: 30px;
+/***************************/
diff --git a/app/helpers/drawings_helper.rb b/app/helpers/drawings_helper.rb
@@ -12,24 +12,19 @@ def form_title
   end
 
   def radio_statuses
-    # Example output: [ ["status1", "status1"], ["status2", "status2"] ]
-    [].tap do |arr|
-      Drawing.statuses.keys.each { |s| arr << [s, s] }
-    end
+    get_humanized_options(Drawing.statuses.keys)
   end
 
   def radio_genders
-    # Example output: [ ["gender0", "Gender 0"], ["gender1", "Gender 1"] ... ]
-    [].tap do |arr|
-      Drawing.genders.keys.each { |s| arr << [s, s.humanize] }
-    end
+    get_humanized_options(Drawing.genders.keys)
   end
 
   def mood_select_box
     # Example output: [ ["1 (sad face)", 1], ["2", 2] ... ["4", 4] ["5 (happy face)", 5] ]
-    selections = [].tap do |arr|
-      (1..5).each { |n| arr << [n.to_s, n] }
+    selections = (1..5).map do |number|
+      [number.to_s, number]
     end
+
     selections[0][0] += " 😢"
     selections[-1][0] += " 😃"
     selections
@@ -38,4 +33,11 @@ def mood_select_box
   def image_consent_default
     @drawing.new_record? ? true : @drawing.image_consent
   end
+
+  def get_humanized_options(options)
+    # Example output: [ ["Gender 0", "gender0"], ["Gender 1", "gender1"] ... ]
+    options.map do |option|
+      [option.humanize, option]
+    end
+  end
 end
diff --git a/app/models/.keep b/app/models/.keep
diff --git a/app/models/drawing.rb b/app/models/drawing.rb
@@ -1,4 +1,7 @@
 class Drawing < ActiveRecord::Base
+  STAGES_OF_JOURNEY = ["At home", "In temporary shelter", "Awaiting transit", "On the move", "Arrived at destination"].freeze
+  SUBJECT_MATTERS = ["Home / Country of origin", "In transit", "Camp life", "Future hopes / destination"].freeze
+
   enum status: %i(pending complete)
   enum gender: %i(not_specified female male other)
 
@@ -49,6 +52,14 @@ def self.to_csv(hxl: false)
     end
   end
 
+  def self.stages_of_journey
+    STAGES_OF_JOURNEY
+  end
+
+  def self.subject_matters
+    SUBJECT_MATTERS
+  end
+
   def can_view?(current_user)
     super_admin_or_same_org?(current_user)
   end

diff --git a/app/views/drawings/_form.html.haml b/app/views/drawings/_form.html.haml
@@ -1,53 +1,48 @@
-.container
-  %h3
+.col-xs-12.text-center
+  %h1.add-margin.top.bottom
     = form_title
-  .row.drawings-wrapper
-    = simple_form_for @drawing, html: { multipart: true } do |f|
-      .col-md-5.col-sm-12.col-xs-12
+.row.drawings-wrapper.no-padding
+  .col-xs-12.col-sm-11.position.central.no-padding
+    = simple_form_for @drawing, html: {multipart: true } do |f|
+      .col-xs-12.col-md-4
         .image-wrap.text-center
-          %h4 Upload an image
-          %i (this is required)
           = image_tag preview_image(@drawing), id: 'image-preview', class: 'img-responsive'
-          %br
-          %b Allowed image types: jpg/jpeg, png, tiff, gif, bmp
-          = f.input :image, label: false, required: false, input_html: { onChange: 'loadFile(event)' }
-        .form-group.form-consent
-          = f.input :image_consent, label: @drawing.image_consent_text, input_html: { checked: image_consent_default }
+          %b Allowed image types: jpg, jpeg, png, tiff, gif, bmp
+          =f.input :image, label: false, required: false, input_html: { onChange: 'loadFile(event)' }
 
-      .col-md-7.col-sm-12.col-xs-12
-        %h4 Details of Drawing (required when marked complete)
-        .form-group
-          = f.input :country, priority: TOP_COUNTRIES, selected: (@drawing.new_record? ? current_user.country : @drawing.country), label: "Country drawn in", include_blank: "-- select country that picture was drawn in --", class: 'form-control'
-        .form-group
-          = f.input :subject_matter, collection: ["Home / Country of origin", "Transit", "Camp life", "Future hopes / destination"], label: 'Subject matter of drawing', required: false, prompt: "-- select an option --"
-        .form-group
-          = f.input :description, label: 'Description of drawing', placeholder: 'e.g. Children playing in the garden, mountains in background'
-        .form-group
-          = f.input :mood_rating, as: :select, collection: mood_select_box, label: 'How would you rate the mood of the drawing?', prompt: "-- scale is from 1 (sad/tragic) to 5 (happy/joyful) --"
+      .forms-wrapper.col-xs.12.col-sm-8.no-padding
+        .col-xs-12.col-md-6
+          .position.central.form-section
+            .form-title
+              %h2 Drawing Details
+            .form-group
+              = f.input :country, priority: TOP_COUNTRIES, selected: (@drawing.new_record? ? current_user.country : @drawing.country), label: "Country drawn in", class: 'form-control'
+              .form-group
+              = f.input :subject_matter, collection: Drawing.subject_matters, label: "Subject matter of drawing", required: false
+            .form-group
+              = f.input :mood_rating, as: :radio_buttons, collection: mood_select_box, label: 'How would you rate the mood of the drawing?'
+            .form-group
+              = f.input :description, as: :text, input_html: { rows: 8 }, label: 'Description of drawing'
+            .form-group.form-consent
+              = f.input :image_consent, label: @drawing.image_consent_text, input_html: { checked: image_consent_default }
 
-        %hr
+        .col-xs-12.col-md-6
+          .position.central.form-section
+            .form-title
+              %h2 Artist Details
+            .form-group
+              = f.input :age, type: 'number', label: 'Age of artist', class: 'optional', required: false
+            .form-group
+              = f.input :gender, as: :radio_buttons, collection: radio_genders, label: 'Gender'
+            .form-group
+              = f.input :origin_country, priority: TOP_ORIGIN_COUNTRIES, selected: @drawing.origin_country, label: "Country of origin", class: 'form-control'
+            .form-group
+              = f.input :stage_of_journey, collection: Drawing.stages_of_journey, label: 'Stage of journey', required: false
+            .form-group
+              = f.input :story, label: 'Story of the artist', class: 'optional-label', required: false
 
-        %h4 Details of Artist
-        .form-group
-          = f.input :age, type: 'number', label: 'Age of artist', required: false, placeholder: 'e.g. 8'
-        .form-group.genders
-          = f.label 'Gender of Artist'
-          %br
-          = f.collection_radio_buttons :gender, radio_genders, :first, :last do |b|
-            = b.radio_button
-            = b.label(class: "btn")
-        .form-group
-          = f.input :origin_country, priority: TOP_ORIGIN_COUNTRIES, selected: @drawing.origin_country, label: "Country of origin", include_blank: "-- select country that artist comes from --", class: 'form-control'
-        .form-group
-          = f.input :stage_of_journey, collection: ["At home", "In temporary shelter", "Awaiting transit", "On the move", "Arrived at destination"], label: 'Stage of journey', required: false, prompt: "-- select an option --"
-        .form-group
-          = f.input :story, label: 'Context / story of the artist', required: false, placeholder: 'e.g. interesting cultural or psychological notes (optional)'
-
-      .row.drawings-wrapper
-      %hr
-      .col-md-12
-        .form-group.text-center
-          %label{for: "status"} Status (leave this as Pending if you need to enter required details later)
-          = f.input :status, collection: radio_statuses, label_method: lambda {|k| k.last.capitalize }, as: :radio_buttons, required: true, label: false
-        .form-group.text-center
-          = f.button :submit, class: 'btn-success btn-block'
+          .col-xs-12.col-sm-10.col-md-8.add-margin.top.half.position.central
+            .form-group
+              = f.input :status, collection: radio_statuses, label_method: lambda {|k| k.last.capitalize }, as: :radio_buttons, required: true, label: 'Status', class: 'add-margin bottom half'
+            .form-group.text-center
+              = f.button :submit, class: 'btn-success btn-block no-margin'