diff --git a/app/assets/stylesheets/components/form.scss b/app/assets/stylesheets/components/form.scss index 3876939..5576006 100644 --- 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} ); -} \ No newline at end of file +.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 index 46e73fc..6ca378e 100644 --- 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 index 7047ee9..e7456f2 100644 --- 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 index 3e2f35d..c12f6d0 100644 --- 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,7 +28,8 @@ .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 @@ -35,13 +37,12 @@ .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'