From dd95450370d0d3a2e649ced7825f59c28fa0575b Mon Sep 17 00:00:00 2001 From: Tyson Gach Date: Sat, 6 May 2017 10:46:50 -0400 Subject: [PATCH 1/3] Clean up primary layout - Merge the `header` style component into `main-content`, which simplifies and reduces the Sass and gives us a BEM relationship for `main-content__header` and `main-content__body` to share styles. - Add some viewport-height-based padding to the bottom of the main content area so that the "save" button on forms is not shoved to the bottom of the screen. - Add a `section` element that wraps the body of the main content, to help make markup consistent across screens. --- .../stylesheets/administrate/application.scss | 1 - .../components/_form-actions.scss | 1 - .../administrate/components/_header.scss | 15 -------- .../components/_main-content.scss | 18 +++++++++ .../administrate/components/_pagination.scss | 2 +- .../administrate/components/_table.scss | 4 -- .../application/_collection.html.erb | 2 +- .../administrate/application/edit.html.erb | 13 +++++-- .../administrate/application/index.html.erb | 16 +++++--- .../administrate/application/new.html.erb | 13 +++++-- .../administrate/application/show.html.erb | 37 +++++++++++-------- .../layouts/administrate/application.html.erb | 14 +++---- 12 files changed, 75 insertions(+), 61 deletions(-) delete mode 100644 app/assets/stylesheets/administrate/components/_header.scss diff --git a/app/assets/stylesheets/administrate/application.scss b/app/assets/stylesheets/administrate/application.scss index b80b02f6b8..9dced95ba3 100644 --- a/app/assets/stylesheets/administrate/application.scss +++ b/app/assets/stylesheets/administrate/application.scss @@ -23,7 +23,6 @@ @import "components/field-unit"; @import "components/flashes"; @import "components/form-actions"; -@import "components/header"; @import "components/main-content"; @import "components/navigation"; @import "components/pagination"; diff --git a/app/assets/stylesheets/administrate/components/_form-actions.scss b/app/assets/stylesheets/administrate/components/_form-actions.scss index 1a4662ab06..89163ab73b 100644 --- a/app/assets/stylesheets/administrate/components/_form-actions.scss +++ b/app/assets/stylesheets/administrate/components/_form-actions.scss @@ -1,4 +1,3 @@ .form-actions { @include shift(2); - margin-bottom: $base-spacing * 4; } diff --git a/app/assets/stylesheets/administrate/components/_header.scss b/app/assets/stylesheets/administrate/components/_header.scss deleted file mode 100644 index 9a5c441616..0000000000 --- a/app/assets/stylesheets/administrate/components/_header.scss +++ /dev/null @@ -1,15 +0,0 @@ -.header { - align-items: flex-start; - display: flex; - justify-content: space-between; - padding: $base-spacing; -} - -.header__heading { - font-size: modular-scale(3); - margin-top: 0; -} - -.header__actions { - margin-left: $base-spacing; -} diff --git a/app/assets/stylesheets/administrate/components/_main-content.scss b/app/assets/stylesheets/administrate/components/_main-content.scss index 4898a0e36d..f777c2a8cd 100644 --- a/app/assets/stylesheets/administrate/components/_main-content.scss +++ b/app/assets/stylesheets/administrate/components/_main-content.scss @@ -4,4 +4,22 @@ 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__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; } diff --git a/app/assets/stylesheets/administrate/components/_pagination.scss b/app/assets/stylesheets/administrate/components/_pagination.scss index 8db112a2b3..59f0de9952 100644 --- a/app/assets/stylesheets/administrate/components/_pagination.scss +++ b/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, diff --git a/app/assets/stylesheets/administrate/components/_table.scss b/app/assets/stylesheets/administrate/components/_table.scss index dc18205841..e031605546 100644 --- a/app/assets/stylesheets/administrate/components/_table.scss +++ b/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; diff --git a/app/views/administrate/application/_collection.html.erb b/app/views/administrate/application/_collection.html.erb index 1aeffe3735..9995f690a8 100644 --- a/app/views/administrate/application/_collection.html.erb +++ b/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 %> - +
<% collection_presenter.attribute_types.each do |attr_name, attr_type| %> diff --git a/app/views/administrate/application/edit.html.erb b/app/views/administrate/application/edit.html.erb index 6b65db0bf6..3b363d6553 100644 --- a/app/views/administrate/application/edit.html.erb +++ b/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}" } %> -
-

<%= content_for(:title) %>

-
+
+

+ <%= content_for(:title) %> +

+ +
<%= 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.
-<%= render "form", page: page %> +
+ <%= render "form", page: page %> +
diff --git a/app/views/administrate/application/index.html.erb b/app/views/administrate/application/index.html.erb index 5ad0827b7e..02fb826360 100644 --- a/app/views/administrate/application/index.html.erb +++ b/app/views/administrate/application/index.html.erb @@ -33,9 +33,12 @@ It renders the `_table` partial to display details about the resources. <% end %> <% end %> -
-

<%= content_for(:title) %>

-
+
+

+ <%= content_for(:title) %> +

+ +
<%= 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.
-<%= render "collection", collection_presenter: page, resources: resources %> - -<%= paginate resources %> +
+ <%= render "collection", collection_presenter: page, resources: resources %> + <%= paginate resources %> +
diff --git a/app/views/administrate/application/new.html.erb b/app/views/administrate/application/new.html.erb index d423c0b0d3..2b6ad3a507 100644 --- a/app/views/administrate/application/new.html.erb +++ b/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}" } %> -
-

<%= content_for(:title) %>

-
+
+

+ <%= content_for(:title) %> +

+ +
<%= link_to t("administrate.actions.back"), :back, class: "button" %>
-<%= render 'form', page: page %> +
+ <%= render "form", page: page %> +
diff --git a/app/views/administrate/application/show.html.erb b/app/views/administrate/application/show.html.erb index 6dd0c21ee6..9cfcf94b38 100644 --- a/app/views/administrate/application/show.html.erb +++ b/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}" } %> -
-

<%= content_for(:title) %>

-
+
+

+ <%= content_for(:title) %> +

+ +
<%= 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.
-
- <% page.attributes.each do |attribute| %> -
- <%= t( - "helpers.label.#{resource_name}.#{attribute.name}", - default: attribute.name.titleize, - ) %> -
- -
<%= render_field attribute %>
- <% end %> -
+
+
+ <% page.attributes.each do |attribute| %> +
+ <%= t( + "helpers.label.#{resource_name}.#{attribute.name}", + default: attribute.name.titleize, + ) %> +
+ +
<%= render_field attribute %>
+ <% end %> +
+
diff --git a/app/views/layouts/administrate/application.html.erb b/app/views/layouts/administrate/application.html.erb index 74ff0fa4f4..9a2a93a082 100644 --- a/app/views/layouts/administrate/application.html.erb +++ b/app/views/layouts/administrate/application.html.erb @@ -15,18 +15,17 @@ By default, it renders: - - - - <%= content_for(:title) %> | <%= Rails.application.class.parent_name.titlecase %> + + + + + <%= content_for(:title) %> | <%= Rails.application.class.parent_name.titlecase %> + <%= render "stylesheet" %> <%= csrf_meta_tags %> - -
- <%= render "navigation" -%>
@@ -34,7 +33,6 @@ By default, it renders: <%= render "flashes" -%> <%= yield %>
-
<%= render "javascript" %> From 82279c44fc21b692dd7512e0d1a9811edf8867ba Mon Sep 17 00:00:00 2001 From: Tyson Gach Date: Sat, 6 May 2017 11:03:30 -0400 Subject: [PATCH 2/3] 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-` --- .../administrate/components/table.js | 4 +- .../stylesheets/administrate/application.scss | 3 +- .../administrate/base/_tables.scss | 51 +++++++++++++++---- .../administrate/components/_cells.scss | 2 +- .../components/_main-content.scss | 5 ++ .../administrate/library/_variables.scss | 3 +- .../administrate/utilities/_text-color.scss | 3 ++ .../application/_collection.html.erb | 6 +-- .../administrate/application/index.html.erb | 2 +- 9 files changed, 60 insertions(+), 19 deletions(-) create mode 100644 app/assets/stylesheets/administrate/utilities/_text-color.scss diff --git a/app/assets/javascripts/administrate/components/table.js b/app/assets/javascripts/administrate/components/table.js index b0f801392d..9325a3925f 100644 --- 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 index 9dced95ba3..62e712ffeb 100644 --- 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 index 236649b8b2..2cf1a28ba0 100644 --- 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 index 9690598921..e054db6a3e 100644 --- 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 index f777c2a8cd..c453b6c24a 100644 --- 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 index ac0ee50a7b..7d4573a522 100644 --- 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 new file mode 100644 index 0000000000..bb822e18ec --- /dev/null +++ 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 index 9995f690a8..9d6413766a 100644 --- 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.
<% resources.each do |resource| %> - > <% collection_presenter.attributes_for(resource).each do |attribute| %> diff --git a/app/views/administrate/application/index.html.erb b/app/views/administrate/application/index.html.erb index 02fb826360..329f6707d4 100644 --- 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. -
+
<%= render "collection", collection_presenter: page, resources: resources %> <%= paginate resources %>
From e04fc517a5ed4a4aa85e1955d536cf1a68799332 Mon Sep 17 00:00:00 2001 From: Tyson Gach Date: Sat, 6 May 2017 09:58:38 -0400 Subject: [PATCH 3/3] Tweak colors Use more saturated red and blue colors so that they pass WCAG contrast guidelines. Related: https://github.com/thoughtbot/administrate/issues/794 --- app/assets/stylesheets/administrate/components/_table.scss | 2 +- app/assets/stylesheets/administrate/library/_variables.scss | 6 +++--- .../stylesheets/administrate/utilities/_text-color.scss | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/app/assets/stylesheets/administrate/components/_table.scss b/app/assets/stylesheets/administrate/components/_table.scss index e031605546..6f57f7a50a 100644 --- a/app/assets/stylesheets/administrate/components/_table.scss +++ b/app/assets/stylesheets/administrate/components/_table.scss @@ -15,7 +15,7 @@ } .table__action--destroy { - color: $light-red; + color: $red; } .table__link-plain { diff --git a/app/assets/stylesheets/administrate/library/_variables.scss b/app/assets/stylesheets/administrate/library/_variables.scss index 7d4573a522..a3019e1cc0 100644 --- a/app/assets/stylesheets/administrate/library/_variables.scss +++ b/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; @@ -49,7 +49,7 @@ $focus-outline-offset: 1px; // Flash Colors $flash-colors: ( alert: $light-yellow, - error: $light-red, + error: $red, notice: tint($blue, 50%), success: $light-green ); diff --git a/app/assets/stylesheets/administrate/utilities/_text-color.scss b/app/assets/stylesheets/administrate/utilities/_text-color.scss index bb822e18ec..6086047f22 100644 --- a/app/assets/stylesheets/administrate/utilities/_text-color.scss +++ b/app/assets/stylesheets/administrate/utilities/_text-color.scss @@ -1,3 +1,3 @@ .text-color-red { - color: $light-red; + color: $red; }
<%= render_field attribute %> @@ -81,7 +81,7 @@ to display a collection of resources in an HTML table. <%= link_to( t("administrate.actions.destroy"), [namespace, resource], - class: "table__action--destroy", + class: "text-color-red", method: :delete, data: { confirm: t("administrate.actions.confirm") } ) %>