Redesign tables

- Slightly decrease font size of table content - Collapse table borders, to prevent gaps between cells - Define table styles as base HTML element styling - Refine table row focus outline - Prefix classes used for JavaScript interactions with `js-`
thoughtbot · May 7, 2017 · e2c7fc6 · e2c7fc6
1 parent 2d7024b
commit e2c7fc6
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 19 deletions.
diff --git a/app/assets/javascripts/administrate/components/table.js b/app/assets/javascripts/administrate/components/table.js
@@ -18,6 +18,6 @@ $(function() {
     }
   };
 
-  $("table").on("click", ".table__row", visitDataUrl);
-  $("table").on("keydown", ".table__row", visitDataUrl);
+  $("table").on("click", ".js-table-row", visitDataUrl);
+  $("table").on("keydown", ".js-table-row", visitDataUrl);
 });
diff --git a/app/assets/stylesheets/administrate/application.scss b/app/assets/stylesheets/administrate/application.scss
@@ -27,4 +27,5 @@
 @import "components/navigation";
 @import "components/pagination";
 @import "components/search";
-@import "components/table";
+
+@import "utilities/text-color";
diff --git a/app/assets/stylesheets/administrate/base/_tables.scss b/app/assets/stylesheets/administrate/base/_tables.scss
@@ -1,23 +1,54 @@
 table {
-  border-collapse: separate;
+  border-collapse: collapse;
+  font-size: 0.9em;
+  text-align: left;
   width: 100%;
-}
 
-th {
-  border-bottom: 1px solid shade($base-border-color, 25%);
-  text-align: left;
+  a {
+    color: inherit;
+  }
 }
 
-th,
-td {
-  padding: $small-spacing;
-  vertical-align: middle;
+thead {
+  font-weight: $bold-font-weight;
 }
 
-td {
+tr {
   border-bottom: $base-border;
+}
+
+tbody tr {
+  &:hover {
+    background-color: $base-background-color;
+    cursor: pointer;
+  }
+
+  &:focus {
+    outline: $focus-outline;
+    outline-offset: -($focus-outline-width);
+  }
+}
+
+td,
+th {
   font-feature-settings: "kern", "liga", "clig", "calt", "lnum", "tnum";
   font-kerning: normal;
   font-variant-ligatures: common-ligatures, contextual;
   font-variant-numeric: lining-nums, tabular-nums;
+  padding: 0.75rem;
+  vertical-align: middle;
+}
+
+td:first-child,
+th:first-child {
+  padding-left: 2rem;
+}
+
+td:last-child,
+th:last-child {
+  padding-right: 2rem;
+}
+
+td img {
+  max-height: 2rem;
 }
diff --git a/app/assets/stylesheets/administrate/components/_cells.scss b/app/assets/stylesheets/administrate/components/_cells.scss
@@ -1,5 +1,5 @@
 .cell-label {
-  @include data-label;
+  position: relative;
 
   &:hover {
     a {

diff --git a/app/assets/stylesheets/administrate/components/_main-content.scss b/app/assets/stylesheets/administrate/components/_main-content.scss
@@ -12,6 +12,11 @@
   padding: 1rem 2rem;
 }
 
+.main-content__body--flush {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .main-content__header {
   align-items: center;
   border-bottom: $base-border;

diff --git a/app/assets/stylesheets/administrate/library/_variables.scss b/app/assets/stylesheets/administrate/library/_variables.scss
@@ -42,7 +42,8 @@ $base-background-color: $grey-0;
 
 // Focus
 $focus-outline-color: transparentize($action-color, 0.4);
-$focus-outline: 3px solid $focus-outline-color;
+$focus-outline-width: 3px;
+$focus-outline: $focus-outline-width solid $focus-outline-color;
 $focus-outline-offset: 1px;
 
 // Flash Colors

diff --git a/app/assets/stylesheets/administrate/utilities/_text-color.scss b/app/assets/stylesheets/administrate/utilities/_text-color.scss
@@ -0,0 +1,3 @@
+.text-color-red {
+  color: $light-red;
+}
diff --git a/app/views/administrate/application/_collection.html.erb b/app/views/administrate/application/_collection.html.erb
@@ -55,14 +55,14 @@ to display a collection of resources in an HTML table.
 
   <tbody>
     <% resources.each do |resource| %>
-      <tr class="table__row"
+      <tr class="js-table-row"
           tabindex="0"
           <%= %(role=link data-url=#{polymorphic_path([namespace, resource])}) if valid_action? :show -%>
           >
         <% collection_presenter.attributes_for(resource).each do |attribute| %>
           <td class="cell-data cell-data--<%= attribute.html_class %>">
             <a href="<%= polymorphic_path([namespace, resource]) -%>"
-               class="action-show table__link-plain"
+               class="action-show"
                >
               <%= render_field attribute %>
             </a>
@@ -81,7 +81,7 @@ to display a collection of resources in an HTML table.
           <td><%= link_to(
             t("administrate.actions.destroy"),
             [namespace, resource],
-            class: "table__action--destroy",
+            class: "text-color-red",
             method: :delete,
             data: { confirm: t("administrate.actions.confirm") }
           ) %></td>

diff --git a/app/views/administrate/application/index.html.erb b/app/views/administrate/application/index.html.erb
@@ -47,7 +47,7 @@ It renders the `_table` partial to display details about the resources.
   </div>
 </header>
 
-<section class="main-content__body">
+<section class="main-content__body main-content__body--flush">
   <%= render "collection", collection_presenter: page, resources: resources %>
   <%= paginate resources %>
 </section>