diff --git a/app/assets/javascripts/application.js.erb b/app/assets/javascripts/application.js.erb index d9200e046..ed7288660 100644 --- a/app/assets/javascripts/application.js.erb +++ b/app/assets/javascripts/application.js.erb @@ -250,6 +250,22 @@ var HelperModule = (function(){ return exit; }); + + const RESIZE_OBSERVER = new ResizeObserver(function(entries) { + entries.forEach((entry) => { + if (entry.target.offsetWidth <= parseInt(entry.target.getAttribute('data-width-breakpoint'))) { + entry.target.classList.add('narrow'); + } else { + entry.target.classList.remove('narrow'); + } + }); + }); + + $(document).on('turbolinks:load', function() { + $('[data-width-breakpoint]').each(function() { + RESIZE_OBSERVER.observe(this); + }); + }); }()); // Check that loaded page, not turbolinks preview diff --git a/app/assets/stylesheets/experiment/canvas.scss b/app/assets/stylesheets/experiment/canvas.scss index 931123e5f..1fa703a3d 100644 --- a/app/assets/stylesheets/experiment/canvas.scss +++ b/app/assets/stylesheets/experiment/canvas.scss @@ -45,6 +45,9 @@ } } +.view-switch-button { + margin-right: .25em; +} .canvas-preview-img, .canvas-preview-rect { diff --git a/app/assets/stylesheets/experiment/show.scss b/app/assets/stylesheets/experiment/show.scss index c481465f2..15888262c 100644 --- a/app/assets/stylesheets/experiment/show.scss +++ b/app/assets/stylesheets/experiment/show.scss @@ -26,6 +26,27 @@ } } +#experimentTable, +#experiment-canvas { + .narrow { + .btn:not(.prevent-shrink) { + padding: 7px; + width: 36px; + } + + .hidden-xs { + display: none; + } + + .left, + .middle, + .right { + display: flex; + flex-direction: inherit; + } + } +} + #experiment-canvas { [data-view-mode="archived"] { display: none; diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss index 553113116..93a7ff3be 100644 --- a/app/assets/stylesheets/experiment/table.scss +++ b/app/assets/stylesheets/experiment/table.scss @@ -56,6 +56,7 @@ .view-switch-button { outline: 1px solid $color-alto; + margin-right: .25em; } .view-switch, diff --git a/app/assets/stylesheets/label_templates/index.scss b/app/assets/stylesheets/label_templates/index.scss index 47e27a693..2e48b87ee 100644 --- a/app/assets/stylesheets/label_templates/index.scss +++ b/app/assets/stylesheets/label_templates/index.scss @@ -33,7 +33,7 @@ } } - @media (max-width: 1299px) { + @media (max-width: 800px) { .label-toolbar { .btn:not(.prevent-shrink) { diff --git a/app/assets/stylesheets/repository/repository_toolbar.scss b/app/assets/stylesheets/repository/repository_toolbar.scss index f93a6b1b4..77ba98ab6 100644 --- a/app/assets/stylesheets/repository/repository_toolbar.scss +++ b/app/assets/stylesheets/repository/repository_toolbar.scss @@ -160,7 +160,7 @@ } } - @media (max-width: 1624px) { + @media (max-width: 1000px) { .repository-toolbar { .btn:not(.prevent-shrink) { diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss index 451a460ff..134a7ba4c 100644 --- a/app/assets/stylesheets/shared/content_pane.scss +++ b/app/assets/stylesheets/shared/content_pane.scss @@ -184,6 +184,24 @@ padding: 1em 1.5rem; width: calc(100% + 3rem); } + + .narrow { + .btn:not(.prevent-shrink) { + padding: 7px; + width: 36px; + } + + .hidden-xs { + display: none; + } + + .left, + .middle, + .right { + display: flex; + flex-direction: inherit; + } + } } &[data-toolbar-visible="false"] { diff --git a/app/views/experiments/_table_toolbar.html.erb b/app/views/experiments/_table_toolbar.html.erb index 384bf0b35..2ecd49546 100644 --- a/app/views/experiments/_table_toolbar.html.erb +++ b/app/views/experiments/_table_toolbar.html.erb @@ -1,4 +1,4 @@ -
+
<% if can_manage_experiment?(@experiment) %> <%= link_to modules_new_experiment_path(@experiment, view_mode:'table'), @@ -15,33 +15,31 @@ <%= render partial: 'task_view_dropdowns.html.erb' %>
-
-
- <% if action_name == 'table' %> - <%= render partial: 'table_filters.html.erb' %> - -
- - +
+ <% end %>
diff --git a/app/views/experiments/_task_view_dropdowns.html.erb b/app/views/experiments/_task_view_dropdowns.html.erb index b5e3437dc..3fee1b833 100644 --- a/app/views/experiments/_task_view_dropdowns.html.erb +++ b/app/views/experiments/_task_view_dropdowns.html.erb @@ -6,7 +6,7 @@ <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'), method: :put, remote: true, - class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' }", + class: "btn button-to #{ action_name == 'table' ? 'btn-primary' : 'btn-light' } prevent-shrink", form_class: 'change-my-modules-view-type-form', params: { experiment: { view_type: 'table', id: @experiment.id } }) do %> @@ -18,7 +18,7 @@ <%= button_to(view_type_experiment_path(@experiment, view_mode: 'archived'), method: :put, remote: true, - class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'}", + class: "btn button-to #{ action_name == 'module_archive' ? 'btn-primary' : 'btn-light'} prevent-shrink", form_class: 'change-my-modules-view-type-form', params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %> @@ -31,7 +31,7 @@ <%= button_to(view_type_experiment_path(@experiment), method: :put, remote: true, - class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' }", + class: "btn button-to #{ action_name == 'table' ? 'btn-primary text-light' : 'btn-light' } prevent-shrink", form_class: 'change-my-modules-view-type-form', params: { experiment: { view_type: 'table', id: @experiment.id } }) do %> @@ -43,7 +43,7 @@ <%= button_to(view_type_experiment_path(@experiment), method: :put, remote: true, - class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'}", + class: "btn button-to #{ action_name == 'canvas' ? 'btn-primary text-light' : 'btn-light'} prevent-shrink", form_class: 'change-my-modules-view-type-form', params: { experiment: { view_type: 'canvas', id: @experiment.id } }) do %> diff --git a/app/views/experiments/canvas.html.erb b/app/views/experiments/canvas.html.erb index 95722c610..7415d4fb2 100644 --- a/app/views/experiments/canvas.html.erb +++ b/app/views/experiments/canvas.html.erb @@ -9,7 +9,7 @@
<%= render partial: 'experiments/show_header' %> -
+
<% if can_manage_experiment?(@experiment) %> <%= link_to modules_new_experiment_path(@experiment, view_mode: 'canvas'), diff --git a/app/views/projects/index/_header.html.erb b/app/views/projects/index/_header.html.erb index bf21544c7..43949f47a 100644 --- a/app/views/projects/index/_header.html.erb +++ b/app/views/projects/index/_header.html.erb @@ -19,6 +19,6 @@ <%= current_folder&.name || t('projects.index.head_title_archived') %>
-
+
diff --git a/app/views/projects/index/_toolbar.html.erb b/app/views/projects/index/_toolbar.html.erb index 5ebd8ad8d..42e6e7b4a 100644 --- a/app/views/projects/index/_toolbar.html.erb +++ b/app/views/projects/index/_toolbar.html.erb @@ -29,7 +29,7 @@ <%= button_to(view_type_projects_path(format: :json), method: :put, remote: true, - class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''}", + class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''} prevent-shrink", form_class: 'change-projects-view-type-form', params: { projects: { view_type: 'table' } }) do %> <%= t('toolbar.table_view') %> @@ -39,7 +39,7 @@ <%= button_to(view_type_projects_path(format: :json), method: :put, remote: true, - class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}", + class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''} prevent-shrink", form_class: 'change-projects-view-type-form', params: { projects: { view_type: 'cards' } }) do %> <%= t('toolbar.cards_view') %> diff --git a/app/views/projects/show/_header.html.erb b/app/views/projects/show/_header.html.erb index 2ba229d81..a6f00e4dd 100644 --- a/app/views/projects/show/_header.html.erb +++ b/app/views/projects/show/_header.html.erb @@ -18,7 +18,7 @@ <% end %>
-
+
<%= render partial: 'projects/show/toolbar' %>
diff --git a/app/views/projects/show/_toolbar.html.erb b/app/views/projects/show/_toolbar.html.erb index 82faa8f36..9b00a1af5 100644 --- a/app/views/projects/show/_toolbar.html.erb +++ b/app/views/projects/show/_toolbar.html.erb @@ -21,7 +21,7 @@ <%= button_to(view_type_project_path(@project, format: :json), method: :put, remote: true, - class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''}", + class: "btn btn-light button-to #{ @current_view_type == 'table' ? 'selected' : ''} prevent-shrink", form_class: 'change-experiments-view-type-form', params: { project: { view_type: 'table', project_id: @project.id } }) do %> <%= t('toolbar.table_view') %> @@ -31,7 +31,7 @@ <%= button_to(view_type_project_path(@project, format: :json), method: :put, remote: true, - class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''}", + class: "btn btn-light button-to #{ @current_view_type == 'cards' ? 'selected' : ''} prevent-shrink", form_class: 'change-experiments-view-type-form', params: { project: { view_type: 'cards', project_id: @project.id } }) do %> <%= t('toolbar.cards_view') %> diff --git a/app/views/shared/_state_view_switch.html.erb b/app/views/shared/_state_view_switch.html.erb index c66d5bd5f..c617b3e42 100644 --- a/app/views/shared/_state_view_switch.html.erb +++ b/app/views/shared/_state_view_switch.html.erb @@ -6,12 +6,12 @@
    <% if switchable %>
  • - <%= link_to active_url, class: "#{ 'form-dropdown-state-item' unless archived }" do %> + <%= link_to active_url, class: "#{ 'form-dropdown-state-item prevent-shrink' unless archived }" do %> <%= t('toolbar.active_state') %> <% end %>
  • - <%= link_to archived_url, class: "#{ 'form-dropdown-state-item' if archived }" do %> + <%= link_to archived_url, class: "#{ 'form-dropdown-state-item prevent-shrink' if archived }" do %> <%= t('toolbar.archived_state') %> <% end %>