#2 Use Hierapolis forms

app/views/kebapage/static_pages/_form.html.haml

@@ -1,13 +1,18 @@
-= form_for @static_page do |f|
-  .field
-    = f.label :title
-    %br
-    = f.text_field :title
+.panel.panel-default
+  .panel-heading
+    %i.icon-edit.icon-large
+    Form
+  .panel-body
 
-  .field
-    = f.label :content
-    %br
-    = f.text_field :content
+    =form_for @static_page do |f|
+      .form-group
+        = f.label :title, class: 'label control-label'
+        = f.text_field :title, class: 'input form-control', placeholder: 'Page title'
 
-  .actions
-    = f.submit
+      .form-group
+        = f.label :content, class: 'label control-label'
+        = f.text_area :content, class: 'textarea form-control', placeholder: 'Content', rows: 4
+
+      .form-actions
+        %button.btn.btn-default{type: 'submit'} Submit
+        %a.btn{href: static_pages_path} Cancel

app/views/kebapage/static_pages/index.html.haml

@@ -1,5 +1,3 @@
-=stylesheet_link_tag 'stylesheets/application'
-
 .panel.panel-default.grid
   .panel-heading
     %i.icon-table.icon-large
@@ -17,11 +15,11 @@
       - @static_pages.each do |static_page|
         %tr
           %td
-            = static_page.id
+            = (@static_pages.index static_page) + 1
           %td
             = static_page.title
           %td
-            = static_page.content
+            = truncate static_page.content, length: 25
           %td.action
             %a.btn.btn-success{href: static_page_path(static_page), data: { toggle: 'tooltip'}, title: 'Zoom'}
               %i.icon-zoom-in
@@ -30,4 +28,4 @@
             = link_to static_page_path(static_page), method: :delete, data: { confirm: 'Are you sure?'}, class: 'btn btn-danger' do
               %i.icon-trash
 
-= link_to 'New Static Page', new_static_page_path
+= link_to 'New Static Page', new_static_page_path, method: :get, class: 'btn btn-default'