From 64b0cc741b63b0496b87246ed437a7dc6a965d3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Javi=20Mart=C3=ADn?= Date: Sun, 5 Jul 2020 12:11:38 +0200 Subject: [PATCH] Improve table actions layout In the past we were using some
tags surrounding table action links in order to guarantee these links wouldn't be wider that their cell's space and wouldn't expand over two lines. However, while these links didn't expand over two lines, at certain resolutions the width of their text exceeded the width of the links, causing part of the text to be outside their borders. This behavior was also inconsistent: some tables had these
tags, and some tables didn't. Since we've now introduced the table actions component, the code is more consistent and we're getting rid of these
tags. So now we're again facing the issue where links could expand over two lines. Using a flex layout solves this issue and considerably improves the layout at lower resolutions. --- app/assets/stylesheets/admin.scss | 12 ++---------- app/assets/stylesheets/admin/table_actions.scss | 12 ++++++++++++ app/assets/stylesheets/application.scss | 1 + .../admin/table_actions_component.html.erb | 16 +++++++++------- app/views/admin/administrators/search.html.erb | 2 +- .../dashboard/actions/_default_actions.html.erb | 2 +- app/views/admin/dashboard/actions/index.html.erb | 4 ++-- .../dashboard/administrator_tasks/index.html.erb | 4 ++-- app/views/admin/poll/booths/_booth.html.erb | 2 +- app/views/admin/poll/booths/index.html.erb | 2 +- .../poll/questions/answers/documents.html.erb | 4 ++-- .../poll/questions/answers/videos/index.html.erb | 6 ++---- .../shifts/_search_officers_results.html.erb | 6 ++---- 13 files changed, 38 insertions(+), 35 deletions(-) create mode 100644 app/assets/stylesheets/admin/table_actions.scss diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss index 2803ccf86..fad0f439a 100644 --- a/app/assets/stylesheets/admin.scss +++ b/app/assets/stylesheets/admin.scss @@ -236,16 +236,8 @@ $sidebar-active: #f4fcd0; table-layout: fixed; } - [type="submit"] ~ a, - a ~ a { - margin-left: 0; - margin-right: 0; - margin-top: $line-height / 2; - - @include breakpoint(medium) { - margin-left: $line-height / 2; - margin-top: 0; - } + [type="submit"] ~ a { + margin-left: $line-height / 2; } } diff --git a/app/assets/stylesheets/admin/table_actions.scss b/app/assets/stylesheets/admin/table_actions.scss new file mode 100644 index 000000000..9d782a4be --- /dev/null +++ b/app/assets/stylesheets/admin/table_actions.scss @@ -0,0 +1,12 @@ +.admin .table-actions { + align-items: baseline; + display: flex; + + > :not(:first-child) { + margin-left: $line-height / 2; + } + + > p { + align-self: flex-start; + } +} diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 5158c724d..0e4d08318 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -27,3 +27,4 @@ @import "jquery-ui/sortable"; @import "leaflet"; @import "sticky_overrides"; +@import "admin/*"; diff --git a/app/components/admin/table_actions_component.html.erb b/app/components/admin/table_actions_component.html.erb index 6a885a37a..b5430cf8a 100644 --- a/app/components/admin/table_actions_component.html.erb +++ b/app/components/admin/table_actions_component.html.erb @@ -1,9 +1,11 @@ -<%= content %> +
+ <%= content %> -<% if actions.include?(:edit) %> - <%= link_to edit_text, edit_path, edit_options %> -<% end %> + <% if actions.include?(:edit) %> + <%= link_to edit_text, edit_path, edit_options %> + <% end %> -<% if actions.include?(:destroy) %> - <%= link_to destroy_text, destroy_path, destroy_options %> -<% end %> + <% if actions.include?(:destroy) %> + <%= link_to destroy_text, destroy_path, destroy_options %> + <% end %> +
diff --git a/app/views/admin/administrators/search.html.erb b/app/views/admin/administrators/search.html.erb index 671b6efb2..03591a1ce 100644 --- a/app/views/admin/administrators/search.html.erb +++ b/app/views/admin/administrators/search.html.erb @@ -17,7 +17,7 @@ <%= user.name %> <%= user.email %> - + <% if user.administrator? && user.administrator.persisted? %> <%= render Admin::TableActionsComponent.new(user.administrator, actions: [:destroy]) %> <% else %> diff --git a/app/views/admin/dashboard/actions/_default_actions.html.erb b/app/views/admin/dashboard/actions/_default_actions.html.erb index 05bff653e..896c02a7e 100644 --- a/app/views/admin/dashboard/actions/_default_actions.html.erb +++ b/app/views/admin/dashboard/actions/_default_actions.html.erb @@ -4,7 +4,7 @@ <%= Dashboard::Action.human_attribute_name("action_type_resource") %> <%= t("admin.dashboard.actions.index.active") %>   - + <%= render Admin::TableActionsComponent.new( actions: [:edit], edit_path: admin_settings_path(anchor: "tab-proposals"), diff --git a/app/views/admin/dashboard/actions/index.html.erb b/app/views/admin/dashboard/actions/index.html.erb index c6aee28f1..2e32b97d6 100644 --- a/app/views/admin/dashboard/actions/index.html.erb +++ b/app/views/admin/dashboard/actions/index.html.erb @@ -17,7 +17,7 @@ <%= t("admin.dashboard.actions.index.day_offset") %> <%= t("admin.dashboard.actions.index.required_supports") %> <%= t("admin.dashboard.actions.index.order") %> - <%= t("admin.actions.actions") %> + <%= t("admin.actions.actions") %> @@ -31,7 +31,7 @@ <%= number_with_delimiter(action.day_offset, delimiter: ".") %> <%= number_with_delimiter(action.required_supports, delimiter: ".") %> <%= action.order %> - + <%= render Admin::TableActionsComponent.new(action) %> diff --git a/app/views/admin/dashboard/administrator_tasks/index.html.erb b/app/views/admin/dashboard/administrator_tasks/index.html.erb index 93cebb001..ff30b6d37 100644 --- a/app/views/admin/dashboard/administrator_tasks/index.html.erb +++ b/app/views/admin/dashboard/administrator_tasks/index.html.erb @@ -10,7 +10,7 @@ <%= t("admin.dashboard.administrator_tasks.index.source") %> <%= t("admin.dashboard.administrator_tasks.index.resource") %> - <%= t("admin.actions.actions") %> + <%= t("admin.actions.actions") %> @@ -23,7 +23,7 @@ <%= task.source.action.title %> - + <% unless task.executed_at? %> <%= render Admin::TableActionsComponent.new(task, actions: [:edit], diff --git a/app/views/admin/poll/booths/_booth.html.erb b/app/views/admin/poll/booths/_booth.html.erb index 0e02fa36d..8814016ed 100644 --- a/app/views/admin/poll/booths/_booth.html.erb +++ b/app/views/admin/poll/booths/_booth.html.erb @@ -5,7 +5,7 @@ <%= booth.location %> - + <% if controller_name == "shifts" || controller_name == "booths" && action_name == "available" %> <%= render Admin::TableActionsComponent.new(actions: []) do |actions| %> <%= actions.link_to t("admin.booths.booth.shifts"), diff --git a/app/views/admin/poll/booths/index.html.erb b/app/views/admin/poll/booths/index.html.erb index 23ad5667f..415515653 100644 --- a/app/views/admin/poll/booths/index.html.erb +++ b/app/views/admin/poll/booths/index.html.erb @@ -18,7 +18,7 @@ <%= t("admin.booths.index.name") %> <%= t("admin.booths.index.location") %> - <%= t("admin.actions.actions") %> + <%= t("admin.actions.actions") %> <% @booths.each do |booth| %> diff --git a/app/views/admin/poll/questions/answers/documents.html.erb b/app/views/admin/poll/questions/answers/documents.html.erb index 5ec767388..0a1d66573 100644 --- a/app/views/admin/poll/questions/answers/documents.html.erb +++ b/app/views/admin/poll/questions/answers/documents.html.erb @@ -27,7 +27,7 @@ - + <% @answer.documents.each do |document| %> @@ -35,7 +35,7 @@ - - + @@ -28,7 +26,7 @@ - diff --git a/app/views/admin/poll/shifts/_search_officers_results.html.erb b/app/views/admin/poll/shifts/_search_officers_results.html.erb index ec8cfc3bd..27280e2c9 100644 --- a/app/views/admin/poll/shifts/_search_officers_results.html.erb +++ b/app/views/admin/poll/shifts/_search_officers_results.html.erb @@ -10,9 +10,7 @@ - + @@ -24,7 +22,7 @@ -
<%= t("admin.questions.show.answers.document_title") %><%= t("admin.questions.show.answers.document_actions") %><%= t("admin.questions.show.answers.document_actions") %>
<%= link_to document.title, document.attachment.url %> + <%= render Admin::TableActionsComponent.new(document, actions: [:destroy], destroy_path: document_path(document) diff --git a/app/views/admin/poll/questions/answers/videos/index.html.erb b/app/views/admin/poll/questions/answers/videos/index.html.erb index 1a7d41402..e2995d0e2 100644 --- a/app/views/admin/poll/questions/answers/videos/index.html.erb +++ b/app/views/admin/poll/questions/answers/videos/index.html.erb @@ -17,9 +17,7 @@
<%= t("admin.answers.videos.index.video_title") %> <%= t("admin.answers.videos.index.video_url") %> - <%= t("admin.actions.actions") %> - <%= t("admin.actions.actions") %>
<%= video.title %> <%= link_to "#{video.url}", video.url %> + <%= render Admin::TableActionsComponent.new(video) %>
<%= t("admin.poll_shifts.new.table_name") %> <%= t("admin.poll_shifts.new.table_email") %> - <%= t("admin.poll_shifts.new.table_shift") %> - <%= t("admin.poll_shifts.new.table_shift") %>
<%= user.email %> + <%= render Admin::TableActionsComponent.new( actions: [:edit], edit_text: t("admin.poll_shifts.new.edit_shifts"),