administrate 0.1.2 → 0.1.3

data/app/assets/stylesheets/administrate/components/_field-unit.scss

@@ -0,0 +1,17 @@
+.field-unit {
+  @include clearfix;
+  @include fill-parent;
+  align-items: center;
+  display: flex;
+  margin-bottom: $base-spacing;
+  position: relative;
+}
+
+.field-unit__label {
+  @include span-columns(2 of 12);
+  text-align: right;
+}
+
+.field-unit__field {
+  @include span-columns(5 of 12);
+}

data/app/assets/stylesheets/administrate/components/_flashes.scss

@@ -0,0 +1,16 @@
+@each $flash-type, $flash-color in $flash-colors {
+  .flash--#{$flash-type} {
+    background-color: $flash-color;
+    color: darken($flash-color, 60%);
+    padding: $small-spacing $base-spacing;
+
+    a {
+      color: darken($flash-color, 70%);
+
+      &:focus,
+      &:hover {
+        color: darken($flash-color, 90%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+.form-actions {
+  @include shift(2);
+}

data/app/assets/stylesheets/administrate/components/_header.scss

@@ -1,14 +1,15 @@
 .header {
-  align-items: baseline;
+  align-items: flex-start;
   display: flex;
   justify-content: space-between;
-  margin-bottom: $base-spacing * 2;
+  padding: $base-spacing;
+}
 
-  &-heading {
-    margin-top: 0;
-  }
+.header__heading {
+  font-size: modular-scale(3);
+  margin-top: 0;
+}
 
-  &-actions {
-    margin-left: $base-spacing;
-  }
+.header__actions {
+  margin-left: $base-spacing;
 }

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

@@ -0,0 +1,6 @@
+.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;
+}

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

@@ -1,5 +1,6 @@
 .pagination {
-  margin: $base-spacing 0;
+  @include margin($base-spacing null ($base-spacing * 4));
+  @include padding(null $base-spacing);
   text-align: center;
 
   .first,
@@ -11,6 +12,6 @@
   }
 
   .current {
-    font-weight: bold;
+    font-weight: $bold-font-weight;
   }
 }

data/app/assets/stylesheets/administrate/components/_search.scss

@@ -1,10 +1,10 @@
 .search {
+  @include padding(null $base-spacing);
   align-items: center;
   border-bottom: $base-border;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
-  padding: 0 $base-spacing;
   position: relative;
   width: 100%;
 }
@@ -12,21 +12,20 @@
 .search__icon {
   svg {
     @include size(1em);
-  }
-
-  path {
-    @include transition($base-transition);
     fill: $hint-grey;
+    transition: fill $base-duration $base-timing;
   }
 
-  &--active path {
-    fill: $base-accent-color;
+  &--active {
+    svg {
+      fill: $action-color;
+    }
   }
 }
 
 .search__input {
   appearance: none;
-  border: none;
+  border: 0;
   box-shadow: none;
   flex-grow: 1;
   margin: 0;
@@ -39,9 +38,9 @@
 
 .search__hint {
   @include position(absolute, 1em 0 null null);
-  @include transition($base-transition);
   color: $hint-grey;
   opacity: 0;
+  transition: opacity $base-duration $base-timing;
 
   svg {
     @include size(100%);
@@ -49,7 +48,7 @@
 
   path,
   rect {
-    fill: $base-accent-color;
+    fill: $action-color;
   }
 
   &--active {

data/app/assets/stylesheets/administrate/components/_sidebar.scss

@@ -0,0 +1,22 @@
+.sidebar {
+  flex: 0 0 auto;
+  max-width: 12em;
+  overflow-y: auto;
+  padding: 0 $base-spacing $base-spacing;
+}
+
+.sidebar__link {
+  color: $base-font-color;
+  display: block;
+  padding-top: $base-spacing;
+  transition: color 0.05s linear;
+
+  &:hover {
+    color: $blue;
+  }
+}
+
+.sidebar__link--active {
+  color: $blue;
+  font-weight: $bold-font-weight;
+}

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

@@ -1,7 +1,11 @@
+.collection-data {
+  @include padding(null $base-spacing);
+}
+
 .table__row {
   background-color: $white;
   border-left: 2px solid transparent;
-  transition: $base-transition;
+  transition: background-color $base-duration $base-timing;
 
   &:hover {
     background-color: $base-background-color;
@@ -10,10 +14,10 @@
   }
 
   img {
-    max-height: $table-image-height;
+    max-height: 2em;
   }
 }
 
 .table__action--destroy {
-  color: $error-color;
+  color: $light-red;
 }

data/app/assets/stylesheets/administrate/{mixins → library}/_data_label.scss

@@ -1,7 +1,7 @@
 @mixin data-label {
   color: $hint-grey;
-  font-size: $small-font-size;
-  font-weight: $normal-font-weight;
+  font-size: modular-scale(-1);
+  font-weight: 400;
   letter-spacing: 0.0357em;
   position: relative;
   text-transform: uppercase;

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

@@ -0,0 +1,57 @@
+// Typography
+$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+  "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  sans-serif;
+$heading-font-family: $base-font-family;
+
+$base-font-size: 1em;
+
+$bold-font-weight: 600;
+
+$base-line-height: 1.5;
+$heading-line-height: 1.2;
+
+// Other Sizes
+$modular-scale-ratio: $minor-third;
+$base-border-radius: 3px;
+$base-spacing: $base-line-height * 1em;
+$small-spacing: $base-spacing / 2;
+
+// Colors
+$white: #fff;
+$black: #000;
+
+$blue: #2a94d6;
+$light-red: #c77067;
+$light-yellow: #f0cd66;
+$light-green: #4ab471;
+
+$grey-0: #f6f7f7;
+$grey-1: #dfe0e1;
+$grey-2: #cfd8dc;
+$grey-7: #293f54;
+
+$hint-grey: #7b808c;
+
+// Font Colors
+$base-font-color: $grey-7;
+$action-color: $blue;
+
+// Background Colors
+$base-background-color: $grey-0;
+
+// Flash Colors
+$flash-colors: (
+  alert: $light-yellow,
+  error: $light-red,
+  notice: tint($blue, 50%),
+  success: $light-green
+);
+
+// Border
+$base-border-color: $grey-1;
+$base-border: 1px solid $base-border-color;
+
+// Transitions
+$base-duration: 250ms;
+$base-timing: $ease-out-cubic;

data/app/assets/stylesheets/docs.scss

@@ -0,0 +1,92 @@
+$blue: #53adc6;
+$red: #cf726e;
+$green: #5bc89e;
+$white: #f0f0f0;
+
+$code-black: #202020;
+$code-white: #e0e0dc;
+$code-green: #b0bf82;
+$code-blue: #8fbdcc;
+$code-yellow: #f8d29d;
+$code-red: #b95c56;
+
+html,
+body {
+  font-family: 'Lato', serif;
+  font-size: 18px;
+  line-height: 1.62em;
+  margin: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+h1,
+h2,
+h3 {
+  font-family: 'Fjalla One', sans-serif;
+  margin-top: 2em;
+}
+
+a {
+  color: $blue;
+  text-decoration: none;
+}
+
+.content {
+  margin-bottom: 2em;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 2em;
+  width: 60em;
+
+  .sidebar {
+    float: left;
+    width: 20em;
+
+    &-links {
+      list-style: none;
+      padding-left: 0;
+    }
+  }
+
+  .main {
+    float: right;
+    width: 40em;
+  }
+}
+
+.flash-wrapper {
+  background-color: $red;
+  color: $white;
+  padding: 1em;
+
+  .flash {
+    margin-left: auto;
+    margin-right: auto;
+    width: 40em;
+  }
+}
+
+code {
+  font-family: "Source Code Pro";
+  font-size: 0.8rem;
+  padding: 0.4em 0.2em 0;
+
+  &.hljs {
+    background-color: $code-black;
+    color: $code-white;
+    padding-left: 1rem;
+
+    .hljs-string { color: $code-green; }
+    .hljs-constant { color: $code-blue; }
+    .hljs-symbol { color: $code-red; }
+    .hljs-keyword { color: $code-yellow; }
+
+    .hljs-title,
+    .hljs-parent { color: $code-blue; }
+
+    .hljs-tag { color: $code-yellow; }
+  }
+}

data/app/controllers/administrate/application_controller.rb

@@ -37,7 +37,7 @@ module Administrate
 
       if resource.save
         redirect_to(
-          [Administrate::NAMESPACE, resource],
+          [namespace, resource],
           notice: translate_with_resource("create.success"),
         )
       else
@@ -50,7 +50,7 @@ module Administrate
     def update
       if requested_resource.update(resource_params)
         redirect_to(
-          [Administrate::NAMESPACE, requested_resource],
+          [namespace, requested_resource],
           notice: translate_with_resource("update.success"),
         )
       else
@@ -105,7 +105,8 @@ module Administrate
       dashboard.permitted_attributes
     end
 
-    delegate :resource_class, :resource_name, to: :resource_resolver
+    delegate :resource_class, :resource_name, :namespace, to: :resource_resolver
+    helper_method :namespace
 
     def resource_resolver
       @_resource_resolver ||=

data/app/controllers/docs_controller.rb

@@ -0,0 +1,9 @@
+class DocsController < ApplicationController
+  def index
+    render file: "README"
+  end
+
+  def show
+    render file: "docs/#{params[:page]}"
+  end
+end

data/app/helpers/administrate/application_helper.rb

@@ -16,5 +16,21 @@ module Administrate
           default: resource_name.to_s.pluralize.titleize,
         )
     end
+
+    def svg_tag(asset, svg_id, options = {})
+      svg_attributes = {
+        "xlink:href".freeze => "#{asset_url(asset)}##{svg_id}",
+        height: options[:height],
+        width: options[:width],
+      }.delete_if { |_key, value| value.nil? }
+      xml_attributes = {
+        "xmlns".freeze => "http://www.w3.org/2000/svg".freeze,
+        "xmlns:xlink".freeze => "http://www.w3.org/1999/xlink".freeze,
+      }
+
+      content_tag :svg, xml_attributes do
+        content_tag :use, nil, svg_attributes
+      end
+    end
   end
 end

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

@@ -1,30 +1,30 @@
 <%#
-# Table
+# Collection
 
 This partial is used on the `index` and `show` pages
 to display a collection of resources in an HTML table.
 
 ## Local variables:
 
-- `table_presenter`:
-  An instance of [Administrate::Page::Table][1].
-  The table presenter uses `ResourceDashboard::TABLE_ATTRIBUTES` to determine
+- `collection_presenter`:
+  An instance of [Administrate::Page::Collection][1].
+  The table presenter uses `ResourceDashboard::COLLECTION_ATTRIBUTES` to determine
   the columns displayed in the table
 - `resources`:
   An ActiveModel::Relation collection of resources to be displayed in the table.
   By default, the number of resources is limited by pagination
   or by a hard limit to prevent excessive page load times
 
-[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Table
+[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
 %>
 
-<table>
+<table class="collection-data" aria-labelledby="page-title">
   <thead>
     <tr>
       <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
         <th class="cell-label cell-label--<%= attr_type.html_class %>
           cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>
-        ">
+        " scope="col">
         <%= link_to(params.merge(
           collection_presenter.order_params_for(attr_name)
         )) do %>
@@ -32,13 +32,18 @@ to display a collection of resources in an HTML table.
 
             <% if collection_presenter.ordered_by?(attr_name) %>
               <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= collection_presenter.ordered_html_class(attr_name) %>">
-                <%= inline_svg("administrate/sort_arrow.svg") %>
+                <%= svg_tag(
+                  "administrate/sort_arrow.svg",
+                  "sort_arrow",
+                  width: "13",
+                  height: "13"
+                ) %>
               </span>
             <% end %>
           <% end %>
         </th>
       <% end %>
-      <th colspan="2"></th>
+      <th colspan="2" scope="col"></th>
     </tr>
   </thead>
 
@@ -47,7 +52,7 @@ to display a collection of resources in an HTML table.
       <tr class="table__row"
           role="link"
           tabindex="0"
-          data-url="<%= polymorphic_path([Administrate::NAMESPACE, resource]) -%>"
+          data-url="<%= polymorphic_path([namespace, resource]) -%>"
           >
         <% collection_presenter.attributes_for(resource).each do |attribute| %>
           <td class="cell-data cell-data--<%= attribute.html_class %>">
@@ -57,13 +62,13 @@ to display a collection of resources in an HTML table.
 
         <td><%= link_to(
           t("administrate.actions.edit"),
-          [:edit, Administrate::NAMESPACE, resource],
+          [:edit, namespace, resource],
           class: "action-edit",
         ) %></td>
 
         <td><%= link_to(
           t("administrate.actions.destroy"),
-          [Administrate::NAMESPACE, resource],
+          [namespace, resource],
           class: "table__action--destroy",
           method: :delete,
           data: { confirm: t("administrate.actions.confirm") }