added some styling for the table

sterrym · Apr 27, 2015 · 733b357 · 733b357
1 parent e63e532
commit 733b357
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 14 deletions.
diff --git a/app/assets/javascripts/smithy/assets.js.coffee b/app/assets/javascripts/smithy/assets.js.coffee
@@ -4,7 +4,13 @@ $('#assets').DataTable {
   "processing": true,
   "ajax": $('#assets').attr('data-source'),
   "order": [[1, 'asc']],
-  "columnDefs": [{ "targets": [0,3], "searchable": false, "orderable": false }]
+  "columnDefs": [
+    { "targets": [0,3], "searchable": false, "orderable": false },
+    { "targets": [0], "className": "preview" },
+    { "targets": [1], "className": "name" },
+    { "targets": [2], "className": "size" },
+    { "targets": [3], "className": "actions" }
+  ]
 }
 
 # Place all the behaviors and hooks related to the matching controller here.

diff --git a/app/assets/stylesheets/smithy/assets.css.scss b/app/assets/stylesheets/smithy/assets.css.scss
@@ -1,3 +1,37 @@
 #asset-thumbnails>li { width:180px;
   .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 }
+
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th { background:darken($table-bg-accent, 5%); }
+
+
+#assets {
+  .preview a {
+    padding:5px; height:60px; width:60px; border:1px solid darken($table-bg-accent, 20%); display:block; position:relative; border-radius:3px;
+    img { position:absolute; bottom:0; top:0; margin:auto; }
+  }
+}
+
+// // Use glyphicons for sorting icons
+// table.dataTable thead {
+//   .sorting,
+//   .sorting_asc,
+//   .sorting_desc {
+//     &:after { position:absolute; top:8px; right:8px; display:block; font-family:'Glyphicons Halflings'; opacity:0.5; }
+//   }
+//   .sorting:after { opacity:0.2; content:"\e150"; /* sort */ }
+//   .sorting_asc:after { content:"\e155"; /* sort-by-attributes */ }
+//   .sorting_desc:after { content:"\e156"; /* sort-by-attributes-alt */ }
+
+//   .sorting_asc_disabled:after,
+//   .sorting_desc_disabled:after { color: #eee; }
+// }
+
+// div.dataTables_scrollBody table.dataTable thead {
+//   .sorting,
+//   .sorting_asc,
+//   .sorting_desc {
+//     &:after { display:none; }
+//   }
+// }
diff --git a/app/models/smithy/assets_datatable.rb b/app/models/smithy/assets_datatable.rb
@@ -1,6 +1,6 @@
 module Smithy
   class AssetsDatatable
-    delegate :params, :link_to, :image_tag, :number_to_human_size, to: :@view
+    delegate :params, :link_to, :image_tag, :number_to_human_size, :file_type_icon, to: :@view
 
     def initialize(view)
       @view = view
@@ -45,11 +45,11 @@ def fetch_assets
     def preview_link(asset)
       link_to asset.file.remote_url do
         if asset.file_type == :image
-          image_tag asset.file.thumb("340x226#").url, width: 170, height: 114, alt: ''
+          image_tag asset.file.thumb("48x48").url, width: 48, alt: ''
         elsif asset.file_type == :direct_image
-          image_tag asset.file.remote_url, width: 170, alt: ''
+          image_tag asset.file.remote_url, width: 48, alt: ''
         else
-          "<div style=\"width:170px;height:78px;padding-top:36px;text-align:center;\">#{ image_tag file_type_icon(asset), alt: '' }</div>"
+          image_tag file_type_icon(asset), alt: ''
         end
       end
     end

diff --git a/app/views/smithy/assets/_asset.html.erb b/app/views/smithy/assets/_asset.html.erb
@@ -1,5 +1,5 @@
 <tr>
-  <td class="preview">
+  <td>
     <%= link_to asset.file.remote_url do %>
       <% if asset.file_type == :image %>
         <%= image_tag asset.file.thumb("340x226#").url, width: 170, height: 114, alt: '' %>
@@ -10,9 +10,9 @@
       <% end %>
     <% end %>
   </td>
-  <td class="name"><strong><%= asset.name %></strong></td>
-  <td class="size"><%= number_to_human_size asset.file_size %></td>
-  <td class="actions">
+  <td><strong><%= asset.name %></strong></td>
+  <td><%= number_to_human_size asset.file_size %></td>
+  <td>
     <%= link_to "Edit", [:edit, asset], class: "btn btn-primary btn-xs" %>
     <%= link_to "Delete", asset, class: "btn btn-danger btn-xs", method: :delete, data: { confirm: "Are you sure?" } %>
   </td>

diff --git a/app/views/smithy/assets/index.html.erb b/app/views/smithy/assets/index.html.erb
@@ -11,11 +11,12 @@
 <div class="thumbnails" id="asset-thumbnails">
   <%= content_tag :table, id: "assets", class: "table table-striped responsive no-wrap display", data: { source: "#{ assets_url(format: "json") }" } do %>
     <thead>
-      <th style="width:10%;">Preview</th>
-      <th>Name</th>
-      <th>Size</th>
-      <th>Actions</th>
+      <tr>
+        <th style="width:10%;">Preview</th>
+        <th>Name</th>
+        <th>Size</th>
+        <th>Actions</th>
+      </tr>
     </thead>
-    <%= render @assets %>
   <% end %>
 </div>