Tweak primary navigation (thoughtbot#861)

* Tweak primary navigation - Rename `sidebar` to `navigation`, which is based on its purpose rather than its visual placement. - Use `nav` element. - Remove unnecessary `ul`; the `nav` provides enough semantics to wrap the links in. - Tweak visual design: show a light background on hover, add more whitespace between navigation links and main content. * Add whitespace around main content box (thoughtbot#862)
jonatack · May 6, 2017 · be5aedd · be5aedd
1 parent fe4ad68
commit be5aedd
Show file tree

Hide file tree

Showing 17 changed files with 93 additions and 86 deletions.
diff --git a/app/assets/stylesheets/administrate/application.scss b/app/assets/stylesheets/administrate/application.scss
@@ -25,7 +25,7 @@
 @import "components/form-actions";
 @import "components/header";
 @import "components/main-content";
+@import "components/navigation";
 @import "components/pagination";
 @import "components/search";
-@import "components/sidebar";
 @import "components/table";
diff --git a/app/assets/stylesheets/administrate/components/_app-container.scss b/app/assets/stylesheets/administrate/components/_app-container.scss
@@ -2,6 +2,7 @@
   @include margin(null auto);
   align-items: stretch;
   display: flex;
-  max-width: 100em;
+  max-width: 100rem;
   min-height: 100vh;
+  padding: $base-spacing;
 }
diff --git a/app/assets/stylesheets/administrate/components/_main-content.scss b/app/assets/stylesheets/administrate/components/_main-content.scss
@@ -1,6 +1,7 @@
 .main-content {
   background-color: $white;
-  box-shadow: 0 2px 4px rgba($grey-7, 0.24), 0 2px 6px rgba($grey-7, 0.12);
-  flex: 1;
-  overflow-y: auto;
+  border-radius: $base-border-radius;
+  box-shadow: 0 0 6px 0 rgba($black, 0.12),
+              0 2px 2px rgba($black, 0.2);
+  flex: 1 1 100%;
 }
diff --git a/app/assets/stylesheets/administrate/components/_navigation.scss b/app/assets/stylesheets/administrate/components/_navigation.scss
@@ -0,0 +1,33 @@
+$_navigation-link-padding: 0.6em;
+
+.navigation {
+  flex: 1 0 10rem;
+  padding-bottom: $base-spacing;
+  padding-right: calc(#{$base-spacing} - #{$_navigation-link-padding});
+  padding-top: $base-spacing;
+}
+
+.navigation__link {
+  background-color: transparent;
+  color: $base-font-color;
+  display: block;
+  line-height: 1;
+  margin-left: -($_navigation-link-padding);
+  padding: $_navigation-link-padding;
+  transition: background-color $base-duration $base-timing,
+              color $base-duration $base-timing;
+
+  &:not(:last-of-type) {
+    margin-bottom: $small-spacing;
+  }
+
+  &:hover {
+    background-color: shade($base-background-color, 5%);
+    border-radius: $base-border-radius;
+    color: $base-font-color;
+  }
+}
+
+.navigation__link--active {
+  font-weight: $bold-font-weight;
+}
diff --git a/app/assets/stylesheets/administrate/components/_sidebar.scss b/app/assets/stylesheets/administrate/components/_sidebar.scss
diff --git a/app/assets/stylesheets/administrate/library/_variables.scss b/app/assets/stylesheets/administrate/library/_variables.scss
@@ -6,14 +6,14 @@ $heading-font-family: $base-font-family;
 
 $base-font-size: 1em;
 
-$bold-font-weight: 600;
+$bold-font-weight: 700;
 
 $base-line-height: 1.5;
 $heading-line-height: 1.2;
 
 // Other Sizes
 $modular-scale-ratio: $minor-third;
-$base-border-radius: 3px;
+$base-border-radius: 4px;
 $base-spacing: $base-line-height * 1em;
 $small-spacing: $base-spacing / 2;
 
@@ -59,4 +59,4 @@ $base-border: 1px solid $base-border-color;
 
 // Transitions
 $base-duration: 250ms;
-$base-timing: $ease-out-cubic;
+$base-timing: ease-in-out;
diff --git a/app/views/administrate/application/_navigation.html.erb b/app/views/administrate/application/_navigation.html.erb
@@ -0,0 +1,18 @@
+<%#
+# Navigation
+
+This partial is used to display the navigation in Administrate.
+By default, the navigation contains navigation links
+for all resources in the admin dashboard,
+as defined by the routes in the `admin/` namespace
+%>
+
+<nav class="navigation">
+  <% Administrate::Namespace.new(namespace).resources.each do |resource| %>
+    <%= link_to(
+      display_resource_name(resource),
+      [namespace, resource.path],
+      class: "navigation__link navigation__link--#{nav_link_state(resource)}"
+    ) %>
+  <% end %>
+</nav>
diff --git a/app/views/administrate/application/_sidebar.html.erb b/app/views/administrate/application/_sidebar.html.erb
diff --git a/app/views/layouts/administrate/application.html.erb b/app/views/layouts/administrate/application.html.erb
@@ -5,11 +5,11 @@ This view template is used as the layout
 for every page that Administrate generates.
 
 By default, it renders:
-- Sidebar for navigation
+- Navigation
 - Content for a search bar
   (if provided by a `content_for` block in a nested page)
 - Flashes
-- Links to stylesheets and Javascripts
+- Links to stylesheets and JavaScripts
 %>
 
 <!DOCTYPE html>
@@ -27,9 +27,7 @@ By default, it renders:
 
   <div class="app-container">
 
-    <div class="sidebar">
-      <%= render "sidebar" -%>
-    </div>
+    <%= render "navigation" -%>
 
     <main class="main-content" role="main">
       <%= content_for(:search) %>

diff --git a/docs/customizing_page_views.md b/docs/customizing_page_views.md
@@ -72,7 +72,7 @@ It's so easy that pass in the "layout" key word to the view generators.
 ```bash
 rails generate administrate:views:layout
  # -> app/views/layouts/admin/application.html.erb
- # -> app/views/admin/application/_sidebar.html.erb
+ # -> app/views/admin/application/_navigation.html.erb
  # -> app/views/admin/application/_javascript.html.erb
  # -> app/views/admin/application/_flashes.html.erb
 ```
diff --git a/lib/generators/administrate/views/layout_generator.rb b/lib/generators/administrate/views/layout_generator.rb
@@ -12,7 +12,7 @@ def copy_template
             "app/views/layouts/admin/application.html.erb",
           )
 
-          call_generator("administrate:views:sidebar")
+          call_generator("administrate:views:navigation")
           copy_resource_template("_javascript")
           copy_resource_template("_flashes")
         end

diff --git a/...s/administrate/views/sidebar_generator.rb → ...dministrate/views/navigation_generator.rb b/...s/administrate/views/sidebar_generator.rb → ...dministrate/views/navigation_generator.rb
@@ -3,11 +3,11 @@
 module Administrate
   module Generators
     module Views
-      class SidebarGenerator < Administrate::ViewGenerator
+      class NavigationGenerator < Administrate::ViewGenerator
         source_root template_source_path
 
-        def copy_sidebar
-          copy_resource_template("_sidebar")
+        def copy_navigation
+          copy_resource_template("_navigation")
         end
       end
     end

diff --git a/spec/example_app/app/views/layouts/application.html.erb b/spec/example_app/app/views/layouts/application.html.erb
@@ -17,9 +17,7 @@
 
 <body class="<%= body_class %>">
   <main class="main">
-    <div class="sidebar">
-      <%= render "sidebar" -%>
-    </div>
+    <%= render "navigation" -%>
 
     <div class="content">
       <%= render "flashes" -%>

diff --git a/spec/features/sidebar_spec.rb → spec/features/navigation_spec.rb b/spec/features/sidebar_spec.rb → spec/features/navigation_spec.rb
@@ -1,10 +1,10 @@
 require "rails_helper"
 
-describe "sidebar" do
+describe "navigation" do
   it "highlights the link to the current page's resource type" do
     visit admin_customers_path
 
-    active_link = find(".sidebar__link--active")
+    active_link = find(".navigation__link--active")
 
     expect(active_link.text).to eq "Customers"
   end
@@ -24,8 +24,8 @@
     with_translations(:en, translations) do
       visit admin_customers_path
 
-      sidebar = find(".sidebar__list")
-      expect(sidebar).to have_link("Users")
+      navigation = find(".navigation")
+      expect(navigation).to have_link("Users")
       expect(page).to have_header("Users")
     end
   end

diff --git a/spec/generators/views/layout_generator_spec.rb b/spec/generators/views/layout_generator_spec.rb
@@ -27,13 +27,13 @@
       expect(contents).to eq(expected_contents)
     end
 
-    it "copies the sidebar partial into the `admin/application` namespace" do
+    it "copies the navigation partial into the `admin/application` namespace" do
       allow(Rails::Generators).to receive(:invoke)
 
       run_generator []
 
       expect(Rails::Generators).
-        to invoke_generator("administrate:views:sidebar")
+        to invoke_generator("administrate:views:navigation")
     end
 
     it "copies the javascript partial into the `admin/application` namespace" do

diff --git a/spec/generators/views/navigation_generator_spec.rb b/spec/generators/views/navigation_generator_spec.rb
@@ -0,0 +1,17 @@
+require "spec_helper"
+require "generators/administrate/views/navigation_generator"
+require "support/generator_spec_helpers"
+
+describe Administrate::Generators::Views::NavigationGenerator, :generator do
+  describe "administrate:views:navigation" do
+    it "copies the navigation partial into the `admin/application` namespace" do
+      expected_contents = contents_for_application_template("_navigation")
+      generated_file = file("app/views/admin/application/_navigation.html.erb")
+
+      run_generator []
+
+      contents = File.read(generated_file)
+      expect(contents).to eq(expected_contents)
+    end
+  end
+end
diff --git a/spec/generators/views/sidebar_generator_spec.rb b/spec/generators/views/sidebar_generator_spec.rb