Issue #150 - Positioned forms to be centered

- Added position sass using margins and not floats or text centre
empowerhack · Mar 15, 2017 · 3a916c9 · 3a916c9
1 parent 3ae7485
commit 3a916c9
Show file tree

Hide file tree

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

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
@@ -0,0 +1,8 @@
+.position {
+  float: none;
+
+  &.central {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
diff --git a/app/views/drawings/_form.html.haml b/app/views/drawings/_form.html.haml
@@ -12,7 +12,7 @@
           =f.input :image, label: false, required: false, input_html: { onChange: 'loadFile(event)' }
 
       .col-xs-12.col-sm-6
-        .col-xs-12.col-sm-10.col-md-8
+        .col-xs-12.col-sm-10.col-md-8.position.central
           %h2.text-center 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'
@@ -24,7 +24,7 @@
             = f.input :description, as: :text, label: 'Description of drawing'
 
       .col-xs-12.col-sm-6
-        .col-xs-12.col-sm-10.col-md-8
+        .col-xs-12.col-sm-10.col-md-8.position.central
           %h2.text-center Artist Details
           .form-group
             = f.input :age, type: 'number', label: 'Age of artist', required: false