From 8e48560cb8163e19741d50444588d64e9aaaaec8 Mon Sep 17 00:00:00 2001 From: Giga Chubinidze Date: Wed, 31 May 2023 19:25:24 +0400 Subject: [PATCH 1/4] Not responsive buttons with closed/opened navigator [SCI-8534] --- app/assets/stylesheets/experiment/canvas.scss | 3 ++ app/assets/stylesheets/experiment/show.scss | 18 +++++++ app/assets/stylesheets/experiment/table.scss | 1 + .../stylesheets/label_templates/index.scss | 2 +- .../repository/repository_toolbar.scss | 2 +- app/views/experiments/_table_toolbar.html.erb | 52 +++++++++---------- app/views/experiments/canvas.html.erb | 2 +- 7 files changed, 50 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/experiment/canvas.scss b/app/assets/stylesheets/experiment/canvas.scss index 931123e5f..835055e34 100644 --- a/app/assets/stylesheets/experiment/canvas.scss +++ b/app/assets/stylesheets/experiment/canvas.scss @@ -45,6 +45,9 @@ } } +.view-switch-button { + margin-right: 0.25em; +} .canvas-preview-img, .canvas-preview-rect { diff --git a/app/assets/stylesheets/experiment/show.scss b/app/assets/stylesheets/experiment/show.scss index d88bc04a4..8a1e4270f 100644 --- a/app/assets/stylesheets/experiment/show.scss +++ b/app/assets/stylesheets/experiment/show.scss @@ -224,3 +224,21 @@ } } } + +.narrow { + .btn:not(.prevent-shrink) { + padding: 7px; + width: 36px; + } + + .hidden-xs { + display: none; + } + + .left, + .middle, + .right { + flex-direction: inherit; + display: flex; + } +} diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss index 74d75763f..53e832d1a 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: 0.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 dcc601450..3d336dbd8 100644 --- a/app/assets/stylesheets/repository/repository_toolbar.scss +++ b/app/assets/stylesheets/repository/repository_toolbar.scss @@ -159,7 +159,7 @@ } } - @media (max-width: 1624px) { + @media (max-width: 1000px) { .repository-toolbar { .btn:not(.prevent-shrink) { 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/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'), From 801db4b7a4ec4a48de80dec8f7250365cb449eb1 Mon Sep 17 00:00:00 2001 From: Giga Chubinidze Date: Wed, 31 May 2023 19:27:07 +0400 Subject: [PATCH 2/4] added resize observer --- app/assets/javascripts/application.js.erb | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) 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 From 7985319b10f39efba7b00809a66e2428cdcecb91 Mon Sep 17 00:00:00 2001 From: Giga Chubinidze Date: Wed, 31 May 2023 19:31:18 +0400 Subject: [PATCH 3/4] hound fix --- app/assets/stylesheets/experiment/canvas.scss | 2 +- app/assets/stylesheets/experiment/show.scss | 2 +- app/assets/stylesheets/experiment/table.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/experiment/canvas.scss b/app/assets/stylesheets/experiment/canvas.scss index 835055e34..1fa703a3d 100644 --- a/app/assets/stylesheets/experiment/canvas.scss +++ b/app/assets/stylesheets/experiment/canvas.scss @@ -46,7 +46,7 @@ } .view-switch-button { - margin-right: 0.25em; + margin-right: .25em; } .canvas-preview-img, diff --git a/app/assets/stylesheets/experiment/show.scss b/app/assets/stylesheets/experiment/show.scss index 8a1e4270f..8e1c401b2 100644 --- a/app/assets/stylesheets/experiment/show.scss +++ b/app/assets/stylesheets/experiment/show.scss @@ -238,7 +238,7 @@ .left, .middle, .right { - flex-direction: inherit; display: flex; + flex-direction: inherit; } } diff --git a/app/assets/stylesheets/experiment/table.scss b/app/assets/stylesheets/experiment/table.scss index 53e832d1a..24dfb02a7 100644 --- a/app/assets/stylesheets/experiment/table.scss +++ b/app/assets/stylesheets/experiment/table.scss @@ -56,7 +56,7 @@ .view-switch-button { outline: 1px solid $color-alto; - margin-right: 0.25em; + margin-right: .25em; } .view-switch, From 7eb24df8cbbe68ef05f9ec133b3afd1ae8bf387d Mon Sep 17 00:00:00 2001 From: Giga Chubinidze Date: Thu, 1 Jun 2023 14:20:56 +0400 Subject: [PATCH 4/4] included p/e levels, scoped css class --- app/assets/stylesheets/experiment/show.scss | 39 ++++++++++--------- .../stylesheets/shared/content_pane.scss | 18 +++++++++ .../experiments/_task_view_dropdowns.html.erb | 8 ++-- app/views/projects/index/_header.html.erb | 2 +- app/views/projects/index/_toolbar.html.erb | 4 +- app/views/projects/show/_header.html.erb | 2 +- app/views/projects/show/_toolbar.html.erb | 4 +- app/views/shared/_state_view_switch.html.erb | 4 +- 8 files changed, 51 insertions(+), 30 deletions(-) diff --git a/app/assets/stylesheets/experiment/show.scss b/app/assets/stylesheets/experiment/show.scss index 8e1c401b2..57f521910 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; @@ -224,21 +245,3 @@ } } } - -.narrow { - .btn:not(.prevent-shrink) { - padding: 7px; - width: 36px; - } - - .hidden-xs { - display: none; - } - - .left, - .middle, - .right { - display: flex; - flex-direction: inherit; - } -} diff --git a/app/assets/stylesheets/shared/content_pane.scss b/app/assets/stylesheets/shared/content_pane.scss index 6afdcd2fb..1507d5f98 100644 --- a/app/assets/stylesheets/shared/content_pane.scss +++ b/app/assets/stylesheets/shared/content_pane.scss @@ -182,6 +182,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/_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/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 %>