Stylin'

views/_item.haml

@@ -1,6 +1,6 @@
 %tr{ 'data-id' => @item.id }
   - settings.fields.each do |field|
-    %td{ :style => "max-width:#{settings.item_width + 20}px" }= @item.send(field.robotize)
+    %td{ :style => "max-width:#{settings.item_width + 100}px" }= @item.send(field.robotize)
   - if session[:editing_enabled]
     %td.edit
       %a.edit{ :href => 'javascript:', :title => 'Edit' } e
@@ -11,7 +11,7 @@
   %form.ajax{ :action => "/update/#{@item.id}", :method => 'post' }
     - settings.fields.each do |field|
       %td
-        %input{ :type => 'text', :name => "item[#{field.robotize}]", :placeholder => field, :value => @item.send(field.robotize), :style => "width:#{settings.item_width}px;" }
+        %input{ :type => 'text', :name => "item[#{field.robotize}]", :placeholder => field, :value => @item.send(field.robotize) }
     %td.edit
       %a.save{ :href => 'javascript:' } save
 

views/index.haml

@@ -3,7 +3,7 @@
     #add-new
       %form.ajax{ :action => '/new', :method => 'post' }
         - settings.fields.each do |field|
-          %input{ :type => 'text', :name => "item[#{field.robotize}]", :placeholder => field, :style => "width:#{settings.item_width}px;" }
+          %input{ :type => 'text', :name => "item[#{field.robotize}]", :placeholder => field, :style => "width:#{(0.8/settings.fields.count)*100}%" }
         %input{ :type => 'submit', :value => 'Add' }
 
   %table{ :cellspacing => 0 }

views/layout.haml

@@ -35,7 +35,8 @@
     .print-footer
       - if @items
         == #{@items.count} items.
-      == Printed at #{request.url}
+      == Printed on #{Time.now.strftime("%a %b %-d %Y at %H:%M")} at #{request.url}
+      %br
       Fork me on Github at https://github.com/GordonDiggs/cataloguais
 
     %a.github-link{ :href => "https://github.com/GordonDiggs/cataloguais" }

views/stylesheet.sass

@@ -39,14 +39,32 @@ form
 
 .content
   :color #ccc
-  :width 1000px
+  :min-width 1000px
+  :width 75%
   :margin 0 auto
   :background #2f2f2f
   :padding 20px
   :-moz-border-radius 15px
   :border-radius 15px
   input
     :font-size 13px
+    &[type=text]
+      :-webkit-border-radius 3px
+      :-moz-border-radius 3px
+      :border-radius 3px
+      :border 1px solid #444
+      :padding 5px
+      :background-color #3f3f3f
+      :color #ccc
+    &:focus
+      :outline none
+      :-webkit-box-shadow 0px 0px 6px #7ac
+      :-moz-box-shadow 0px 0px 6px #7ac
+      :box-shadow 0px 0px 6px #7ac
+  #add-new
+    :width 98%
+    input
+      :margin 0 1px
   table
     :width 100%
     :margin-top 20px
@@ -69,6 +87,8 @@ form
           :background #2f2f2f
       &.edit
         :display none
+        input
+          :width 90%
       &:nth-child(4n)
         :background #3f3f3f
       &:nth-child(4n+1)
@@ -116,8 +136,8 @@ form
   :padding 5px
 
 input::-webkit-input-placeholder
-  :color #555
+  :color #888
 input:-moz-placeholder
-  :color #555
+  :color #888