Abstract list html by using more generic dom class names. Modify css …

…rules to use new selectors where required.
wfarr · Dec 16, 2010 · 36af0fc · 36af0fc
1 parent c1217f4
commit 36af0fc
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 78 deletions.
diff --git a/app/helpers/rails_admin/main_helper.rb b/app/helpers/rails_admin/main_helper.rb
@@ -189,12 +189,12 @@ def justify_properties(sets, current_set)
       other = []
 
       if total == 784
-        other = ["otherHeaderLeft", "otherHeaderRight", "otherLeft", "otherRight"]
+        other = ["left", "right"]
       elsif total == 744
         if current_set == 0
-          other = ["otherHeaderLeft", "otherLeft"]
+          other = ["left"]
         else
-          other = ["otherHeaderRight", "otherRight"]
+          other = ["right"]
         end
       end
 

diff --git a/app/views/rails_admin/main/list.html.erb b/app/views/rails_admin/main/list.html.erb
@@ -13,16 +13,16 @@
 
 <style type="text/css">
 <% @style.each do |key, value| %>
-  <%= ".#{key}Header" %>{
+  .grid thead <%= ".#{key}" %>{
     width: <%= value[:width] %>px;
   }
 
-  <%= ".#{key}Row" %>{
+  .grid tbody <%= ".#{key}" %>{
     width: <%= value[:width] %>px;
   }
 <% end %>
 <% @other.each do |t| %>
-  <%= ".#{t}"%>{
+  .grid .other.<%= t %>{
     display:none;
   }
 <% end %>
@@ -50,44 +50,47 @@
             </fieldset>
           </form>
         </div>
-        <table>
-        <tr id="moduleHeader">
-          <th class="otherHeader otherHeaderLeft">...</th>
-          <% properties.each do |property| %>
-          <% property_name = property.name %>
-          <% property_pretty_name = property.label %>
-          <th class="<%= "#{property.column_css_class}Header" %> <%= sort == property_name.to_s ? "columnSelected" : nil %>">
-            <% if property.sortable? %>
-            <% sort_location = params.merge(:sort => property_name).reject{|key, value| key.to_sym == :sort_reverse}.merge(sort == property_name.to_s && sort_reverse != "true" ? {:sort_reverse => "true"} : {}) %>
-            <%= link_to(property_pretty_name.upcase, sort_location, :ref => sort_location.to_json, :class => "headerSort") %>
-            <% if sort == property_name.to_s %>
-            <%= link_to sort_arrow_image(sort_reverse), sort_location, :ref => sort_location.to_json, :class => "headerSort" %>
+        <table class="grid">
+          <thead>
+            <tr>
+              <th class="other left">...</th>
+              <% properties.each do |property| %>
+              <% property_name = property.name %>
+              <% property_pretty_name = property.label %>
+              <th class="<%= "#{property.column_css_class}" %> <%= sort == property_name.to_s ? "selected" : nil %>">
+                <% if property.sortable? %>
+                <% sort_location = params.merge(:sort => property_name).reject{|key, value| key.to_sym == :sort_reverse}.merge(sort == property_name.to_s && sort_reverse != "true" ? {:sort_reverse => "true"} : {}) %>
+                <%= link_to(property_pretty_name.upcase, sort_location, :ref => sort_location.to_json, :class => "headerSort") %>
+                <% if sort == property_name.to_s %>
+                <%= link_to sort_arrow_image(sort_reverse), sort_location, :ref => sort_location.to_json, :class => "sort" %>
+                <% end %>
+                <% else %>
+                <%= property_pretty_name.upcase %>
+                <% end %>
+              </th>
+              <% end %>
+              <th class="other right">...</th>
+              <th class="action"><%= t("admin.list.edit_action").upcase%></th>
+              <th class="action"><%= t("admin.list.delete_action").upcase%></th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @objects.each_with_index do |object, index| %>
+            <% @model_config.bind(:object, object) %>
+            <tr class="<%= index % 2 == 0 ? " odd" : " even" %>">
+              <% other_left = params.reject{|key, value| key == "set"}.merge(:set => params[:set].to_i - 1) %>
+              <td class="other left"><%= link_to("...", other_left, :ref => other_left.to_json) %></td>
+              <% properties.each do |property| %>
+              <td class="<%= "#{property.column_css_class}" %>"><%= [:text, :string].include?(property.type) ? property.formatted_value[0..40] : property.formatted_value %></td>
+              <% end %>
+              <% other_right = params.reject{|key, value| key == "set"}.merge(:set => params[:set].to_i + 1) %>
+              <td class="other right"><%= link_to("...", other_right, :ref => other_right.to_json)%></td>
+              <td class="action edit"><%= link_to(t("admin.list.edit_action"), rails_admin_edit_path(:model_name => @abstract_model.to_param, :id => object.id)) %></td>
+              <td class="action delete"><%= link_to(t("admin.list.delete_action"), rails_admin_delete_path(:model_name => @abstract_model.to_param, :id => object.id)) %></td>
+            </tr>
             <% end %>
-            <% else %>
-            <%= property_pretty_name.upcase %>
-            <% end %>
-          </th>
-          <% end %>
-          <th class="otherHeader otherHeaderRight">...</th>
-          <th class="actionHeader"><%= t("admin.list.edit_action").upcase%></th>
-          <th class="actionHeader"><%= t("admin.list.delete_action").upcase%></th>
-        </tr>
-
-        <% @objects.each_with_index do |object, index| %>
-        <% @model_config.bind(:object, object) %>
-        <tr class="infoRow<%= index % 2 == 0 ? nil : " greyRow" %>">
-          <% other_left = params.reject{|key, value| key == "set"}.merge(:set => params[:set].to_i - 1) %>
-          <td class="otherRow otherLeft"><%= link_to("...", other_left, :ref => other_left.to_json) %></td>
-          <% properties.each do |property| %>
-          <td class="<%= "#{property.column_css_class}Row" %>"><%= [:text, :string].include?(property.type) ? property.formatted_value[0..40] : property.formatted_value %></td>
-          <% end %>
-          <% other_right = params.reject{|key, value| key == "set"}.merge(:set => params[:set].to_i + 1) %>
-          <td class="otherRow otherRight"><%= link_to("...", other_right, :ref => other_right.to_json)%></td>
-          <td class="actionRow editAction"><%= link_to(t("admin.list.edit_action"), rails_admin_edit_path(:model_name => @abstract_model.to_param, :id => object.id)) %></td>
-          <td class="actionRow deleteAction"><%= link_to(t("admin.list.delete_action"), rails_admin_delete_path(:model_name => @abstract_model.to_param, :id => object.id)) %></td>
-        </tr>
-        <% end %>
-      </table>
+          </tbody>
+        </table>
       </div>
     </div>
     <% unless @xhr %>

diff --git a/public/stylesheets/rails_admin/list.css b/public/stylesheets/rails_admin/list.css
@@ -1,44 +1,44 @@
-
-#contentMainModules table {
+.grid {
+  width: 100%;
   border-collapse:collapse;
 }
 
-#moduleHeader th {
+.grid thead th {
   border-bottom:2px solid #b9b9b9;
   padding: 9px;
   font-size:10px;
   text-align:center;
 }
 
-#moduleHeader th a {
+.grid thead th a {
   text-decoration:none;
   color:#000;
 }
 
-.boolRow{
+.grid tbody .bool {
   margin-bottom:-5px;
 }
 
-.dateRow{
+.grid tbody .date {
   white-space: nowrap;
 }
-.timeHeader{
+.grid thead .time {
   background:#F99;
 }
-.timeRow{
+.grid tbody .time {
   white-space: nowrap;
 }
-.dateTimeRow{
+.grid tbody .dateTime {
   white-space: nowrap;
 }
-.bigDecimalHeader{
+.grid thead .bigDecimal {
   background:#CC6;
 }
-.otherHeader{
+.grid thead .other {
   width:40px;
 }
 
-.otherRow a{
+.grid tbody .other a {
   padding-left:2px;
   padding-right:2px;
   text-decoration:none;
@@ -47,70 +47,69 @@
   color:#494949;
 }
 
-.otherRow a:hover{
+.grid tbody .other a:hover {
   border:1px solid #494949;
 }
 
-.actionRow a{
+.grid tbody .action a {
   text-decoration:none;
   font-weight:bold;
-  /* 6C9 */
 }
 
-.actionRow a:hover{
+.grid tbody .action a:hover {
   text-decoration:underline;
 }
 
-.editAction a{
+.grid .action.edit a {
   color:#5182ab;
 }
 
-.deleteAction a{
+.grid .action.delete a {
   color:#ad0208;
 }
 
-.actionHeader{
+.grid thead .action {
   width:80px;
   font-size:10px;
   margin-top:1px;
 }
 
-.columnSelected{
+.grid thead .selected {
   font-weight:bold;
 }
 
-tr.infoRow td{
+.grid tbody td {
   border-bottom:1px solid #b9b9b9;
   padding: 9px;
   text-align:center;
   font-size:11px;
 }
 
-.greyRow{
+.grid tbody .even {
   background:#f2f2f2;
 }
 
-.searchBox{
+.searchBox {
   padding:5px;
   height:23px;
   background:#e0ecfc;
   border-top:1px solid #B9B9B9;
   border-bottom:1px solid #B9B9B9;
 }
 
-.searchBox fieldset{
+.searchBox fieldset {
   border:none;
 }
 
-#searchBar{
+#searchBar {
   border:1px solid #cbcbcb;
   font-size:12px;
   padding:4px;
   float:left;
   width:300px;
 }
 
-.searchBox span{
+.searchBox span {
   float:left;
   display:block;
   font-size:10px;
@@ -120,22 +119,21 @@ tr.infoRow td{
   padding-left:6px;
   padding-right:6px;
   margin-left:5px;
-
 }
 
-#moduleHeader th a img{
+.grid thead th a img, #moduleHeader th a img {
   margin-bottom:-4px;
   border:none;
 }
 
-#pagination{
+#pagination {
   clear:both;
   text-align:center;
   margin-bottom:15px;
   padding-top:10px;
 }
 
-#pagination a{
+#pagination a {
   background:#FFF;
   color:#000;
   border:1px solid #DDD;
@@ -145,12 +143,12 @@ tr.infoRow td{
   text-decoration:none;
 }
 
-#pagination a:hover{
+#pagination a:hover {
   background:#EEE;
   border:1px solid #494949;
 }
 
-#searchbar_btn{
+#searchbar_btn {
   background:#DDD;
   border:1px solid #CBCBCB;
   font-size:10px;
@@ -161,15 +159,15 @@ tr.infoRow td{
   margin-left:3px;
 }
 
-.this-page{
+.this-page {
   padding:3px;
 }
 
-.historyLink{
+.historyLink {
   color:#000;
   text-decoration:none;
 }
 
-.historyLink:hover{
+.historyLink:hover {
   text-decoration:underline;
 }