Issue #150 - Styled the upload form

- Changed Stage of journey to drop down to decrease length of form and remove need for scrolling - Removed extra margin bottom for labels for radio button form inputs
empowerhack · Mar 16, 2017 · bfa8520 · bfa8520
1 parent f8b30e1
commit bfa8520
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 45 deletions.
diff --git a/app/assets/stylesheets/components/form.scss b/app/assets/stylesheets/components/form.scss
@@ -5,16 +5,34 @@ input.btn.btn-default.btn-success.btn-block {
   display: inline;
 }
 
-.forms-wrapper {
-    overflow: hidden; 
+.form-section {
+	background-color: $white;
+	padding: $spacing-unit;
+	padding-bottom: 0;
 }
 
-.forms-wrapper [class*="col-"]{
-    margin-bottom: -99999px;
-    padding-bottom: 99999px;
+.form-title {
+	border-bottom: 1px $light-gray solid;
+	margin-bottom: $spacing-unit;
+
+	h2 {
+		font-size: 1.3em;
+		margin-top: 0;
+	}
 }
 
-.form-section {
-	background-color: $white;
-	padding: $spacing-unit calc( #{$spacing-unit * 2} );
-}
+.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/variables.scss b/app/assets/stylesheets/variables.scss
@@ -28,5 +28,5 @@ $drawingsPadding: 24px;
 
 /***************************/
 /**** Sizes ****/
-$spacing-unit: 15px;
+$spacing-unit: 30px;
 /***************************/
diff --git a/app/views/drawings/_form.html.haml b/app/views/drawings/_form.html.haml
@@ -13,7 +13,8 @@
       .forms-wrapper.col-xs.12.col-sm-8
         .col-xs-12.col-sm-6
           .col-xs-12.col-sm-11.col-md-10.position.central.form-section
-            %h2.text-center 1. Drawing Details
+            .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
@@ -27,21 +28,21 @@
 
         .col-xs-12.col-sm-6
           .col-xs-12.col-sm-11.col-md-10.position.central.form-section
-            %h2.text-center 2. Artist Details
+            .form-title
+              %h2 Artist Details
             .form-group
               = f.input :age, type: 'number', label: 'Age of artist', required: false
             .form-group
               = f.input :gender, as: :radio_buttons, collection: gender_options, 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, as: :radio_buttons, collection: journey_options, required: false
+              = 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
             .form-group
               = f.input :story, label: 'Story of the artist', required: false
 
-          .col-xs-12.col-sm-11.col-md-10.position.central
             .form-group
-              %label{for: "status"} Status
+              %label.radio_buttons{for: "status"} Status
               = 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'