Merge pull request #11 from bumi/New-forms-page

Add some styling on create form

Gemfile

@@ -41,6 +41,7 @@ group :development do
   # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
   # gem 'web-console'
   gem 'listen'
+  gem 'sqlite3'
   # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
   gem 'spring'
   gem 'spring-watcher-listen'

Gemfile.lock

@@ -235,6 +235,7 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
+    sqlite3 (1.4.2)
     thor (1.0.1)
     thread_safe (0.3.6)
     tilt (2.0.10)
@@ -277,6 +278,7 @@ DEPENDENCIES
   sorcery
   spring
   spring-watcher-listen
+  sqlite3
   turbolinks
   tzinfo-data
   webpacker

app/assets/stylesheets/application.css.scss

@@ -35,6 +35,16 @@ $light: #fff;
   height: 100%;
 }
 
+.content {
+  padding: 30px 60px 50px;
+
+  &>h1 {
+    margin-bottom: 40px;
+  }
+}
+
+
+
 body {
   min-height: 100vh;
 }

app/views/forms/new.html.erb

@@ -1,5 +1,26 @@
-<%= form_for @form do |f| %>
-  <%= f.text_field :title %>
-  <%= f.text_field :thank_you_url %>
-  <%= f.submit %>
-<% end %>
+<div class="section">
+  <div class=" columns ">
+    <div class="column is-half is-offset-one-quarter">
+      <div class="box">
+        <div class="content has-text-centered">
+          <h1 class="has-text-weight-light">Create a new form</h1>
+          <%= form_for @form do |f| %>
+          <div class="field">
+            <div class="control">
+              <%= f.text_field :title, class: 'input', placeholder: 'Title' %>
+            </div>
+          </div>
+          <div class="field">
+            <div class="control">
+              <%= f.text_field :thank_you_url, class: 'input', placeholder: 'Thank you url' %>
+            </div>
+          </div><br>
+          <div>
+            <%= f.submit class: 'button is-primary' %>
+            <% end %>
+          </divdiv>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>