Refine look-and-feel

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);
 });

app/assets/stylesheets/administrate/application.scss

@@ -23,9 +23,9 @@
 @import "components/field-unit";
 @import "components/flashes";
 @import "components/form-actions";
-@import "components/header";
 @import "components/main-content";
 @import "components/navigation";
 @import "components/pagination";
 @import "components/search";
-@import "components/table";
+
+@import "utilities/text-color";

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;
 }

app/assets/stylesheets/administrate/components/_cells.scss

@@ -1,5 +1,5 @@
 .cell-label {
-  @include data-label;
+  position: relative;
 
   &:hover {
     a {

app/assets/stylesheets/administrate/components/_form-actions.scss

@@ -1,4 +1,3 @@
 .form-actions {
   @include shift(2);
-  margin-bottom: $base-spacing * 4;
 }

app/assets/stylesheets/administrate/components/_main-content.scss

@@ -4,4 +4,27 @@
   box-shadow: 0 0 6px 0 rgba($black, 0.12),
               0 2px 2px rgba($black, 0.2);
   flex: 1 1 100%;
+  padding-bottom: 10vh;
+}
+
+.main-content__header,
+.main-content__body {
+  padding: 1rem 2rem;
+}
+
+.main-content__body--flush {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.main-content__header {
+  align-items: center;
+  border-bottom: $base-border;
+  display: flex;
+  justify-content: space-between;
+}
+
+.main-content__page-title {
+  font-size: 1.6em;
+  margin-right: 1rem;
 }

app/assets/stylesheets/administrate/components/_pagination.scss

@@ -1,6 +1,6 @@
 .pagination {
-  @include margin($base-spacing null ($base-spacing * 4));
   @include padding(null $base-spacing);
+  margin-top: $base-spacing;
   text-align: center;
 
   .first,

app/assets/stylesheets/administrate/components/_table.scss

@@ -1,7 +1,3 @@
-.collection-data {
-  @include padding(null $base-spacing);
-}
-
 .table__row {
   background-color: $white;
   border-left: 2px solid transparent;
@@ -19,7 +15,7 @@
 }
 
 .table__action--destroy {
-  color: $light-red;
+  color: $red;
 }
 
 .table__link-plain {

app/assets/stylesheets/administrate/library/_variables.scss

@@ -21,8 +21,8 @@ $small-spacing: $base-spacing / 2;
 $white: #fff;
 $black: #000;
 
-$blue: #2a94d6;
-$light-red: #c77067;
+$blue: #1976d2;
+$red: #d32f2f;
 $light-yellow: #f0cd66;
 $light-green: #4ab471;
 
@@ -42,13 +42,14 @@ $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
 $flash-colors: (
   alert: $light-yellow,
-  error: $light-red,
+  error: $red,
   notice: tint($blue, 50%),
   success: $light-green
 );

app/assets/stylesheets/administrate/utilities/_text-color.scss

@@ -0,0 +1,3 @@
+.text-color-red {
+  color: $red;
+}

app/views/administrate/application/_collection.html.erb

@@ -18,7 +18,7 @@ to display a collection of resources in an HTML table.
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
 %>
 
-<table class="collection-data" aria-labelledby="page-title">
+<table aria-labelledby="page-title">
   <thead>
     <tr>
       <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
@@ -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>

app/views/administrate/application/edit.html.erb

@@ -17,9 +17,12 @@ It displays a header, and renders the `_form` partial to do the heavy lifting.
 
 <% content_for(:title) { "#{t("administrate.actions.edit")} #{page.page_title}" } %>
 
-<header class="header">
-  <h1 class="header__heading"><%= content_for(:title) %></h1>
-  <div class="header__actions">
+<header class="main-content__header">
+  <h1 class="main-content__page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
     <%= link_to(
       "#{t("administrate.actions.show")} #{page.page_title}",
       [namespace, page.resource],
@@ -28,4 +31,6 @@ It displays a header, and renders the `_form` partial to do the heavy lifting.
   </div>
 </header>
 
-<%= render "form", page: page %>
+<section class="main-content__body">
+  <%= render "form", page: page %>
+</section>

app/views/administrate/application/index.html.erb

@@ -33,9 +33,12 @@ It renders the `_table` partial to display details about the resources.
   <% end %>
 <% end %>
 
-<header class="header">
-  <h1 class="header__heading" id="page-title"><%= content_for(:title) %></h1>
-  <div class="header__actions">
+<header class="main-content__header">
+  <h1 class="main-content__page-title" id="page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
     <%= link_to(
       "#{t("administrate.actions.new")} #{page.resource_name.titleize.downcase}",
       [:new, namespace, page.resource_path],
@@ -44,6 +47,7 @@ It renders the `_table` partial to display details about the resources.
   </div>
 </header>
 
-<%= render "collection", collection_presenter: page, resources: resources %>
-
-<%= paginate resources %>
+<section class="main-content__body main-content__body--flush">
+  <%= render "collection", collection_presenter: page, resources: resources %>
+  <%= paginate resources %>
+</section>

app/views/administrate/application/new.html.erb

@@ -17,11 +17,16 @@ to do the heavy lifting.
 
 <% content_for(:title) { "#{t("administrate.actions.new")} #{page.resource_name.titleize}" } %>
 
-<header class="header">
-  <h1 class="header__heading"><%= content_for(:title) %></h1>
-  <div class="header__actions">
+<header class="main-content__header">
+  <h1 class="main-content__page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
     <%= link_to t("administrate.actions.back"), :back, class: "button" %>
   </div>
 </header>
 
-<%= render 'form', page: page %>
+<section class="main-content__body">
+  <%= render "form", page: page %>
+</section>

app/views/administrate/application/show.html.erb

@@ -18,9 +18,12 @@ as well as a link to its edit page.
 
 <% content_for(:title) { "#{t("administrate.actions.show")} #{page.page_title}" } %>
 
-<header class="header">
-  <h1 class="header__heading"><%= content_for(:title) %></h1>
-  <div class="header__actions">
+<header class="main-content__header">
+  <h1 class="main-content__page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <div>
     <%= link_to(
       "#{t("administrate.actions.edit")} #{page.page_title}",
       [:edit, namespace, page.resource],
@@ -29,16 +32,18 @@ as well as a link to its edit page.
   </div>
 </header>
 
-<dl>
-  <% page.attributes.each do |attribute| %>
-    <dt class="attribute-label">
-    <%= t(
-      "helpers.label.#{resource_name}.#{attribute.name}",
-      default: attribute.name.titleize,
-    ) %>
-    </dt>
-
-    <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
-        ><%= render_field attribute %></dd>
-  <% end %>
-</dl>
+<section class="main-content__body">
+  <dl>
+    <% page.attributes.each do |attribute| %>
+      <dt class="attribute-label">
+      <%= t(
+        "helpers.label.#{resource_name}.#{attribute.name}",
+        default: attribute.name.titleize,
+      ) %>
+      </dt>
+
+      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+          ><%= render_field attribute %></dd>
+    <% end %>
+  </dl>
+</section>

app/views/layouts/administrate/application.html.erb

@@ -15,26 +15,24 @@ By default, it renders:
 <!DOCTYPE html>
 <html lang="<%= I18n.locale %>">
 <head>
-  <meta charset="utf-8" />
-  <meta name="ROBOTS" content="NOODP" />
-  <meta name="viewport" content="initial-scale=1" />
-  <title><%= content_for(:title) %> | <%= Rails.application.class.parent_name.titlecase %></title>
+  <meta charset="utf-8">
+  <meta name="ROBOTS" content="NOODP">
+  <meta name="viewport" content="initial-scale=1">
+  <title>
+    <%= content_for(:title) %> | <%= Rails.application.class.parent_name.titlecase %>
+  </title>
   <%= render "stylesheet" %>
   <%= csrf_meta_tags %>
 </head>
-
 <body>
-
   <div class="app-container">
-
     <%= render "navigation" -%>
 
     <main class="main-content" role="main">
       <%= content_for(:search) %>
       <%= render "flashes" -%>
       <%= yield %>
     </main>
-
   </div>
 
   <%= render "javascript" %>