polish docs#index design

app/views/documents/edit.html.erb

@@ -64,7 +64,7 @@
           url: '<%= document_url(@document) %>',
           data: {
             document: {
-              title: $('#document_title').text(),
+              title: $('#document_title').val(),
               body:  $('#editor').find('.ql-editor').html()
             }
           },

app/views/documents/index.html.erb

@@ -15,14 +15,18 @@
     <div class="col s12 m6 l4">
       <div class="card sticky-action">
         <div class="card-image waves-effect waves-block waves-light">
-          <img class="activator" src="images/office.jpg">
+          <%= image_tag "card-headers/document-mini.jpg", class: 'activator' %>
         </div>
         <div class="card-content">
           <span class="card-title activator grey-text text-darken-4">
             <%= document.title.presence || 'Untitled document' %>
             <i class="material-icons right">more_vert</i>
           </span>
-          <p><a href="#">This is a link</a></p>
+          <p class="grey-text">
+            <%= (document.body || "").split(/\s+/).count %> words
+            &middot;
+            created <%= time_ago_in_words document.created_at %> ago
+          </p>
         </div>
         <div class="card-action">
           <%= link_to edit_document_path(document), class: 'green-text' do %>
@@ -39,8 +43,13 @@
           <% end %>
         </div>
         <div class="card-reveal">
-          <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
-          <p>Here is some more information about this product that is only revealed once clicked on.</p>
+          <span class="card-title grey-text text-darken-4">
+            <%= document.title.presence || 'Document preview' %>
+            <i class="material-icons right">close</i>
+          </span>
+          <p>
+            <%= sanitize truncate(document.body, escape: false, length: 420) %>
+          </p>
         </div>
       </div>
     </div>