scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-08 07:21:03 +08:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #5531 from G-Chubinidze/gc_SCI_8584

Browse source 
Not responsive buttons with closed/opened navigator [SCI-8534]
This commit is contained in:
artoscinote 2023-06-01 12:25:07 +02:00 • committed by GitHub
commit 66ccea318b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 99 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/assets/javascripts/application.js.erb
View file

@ -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

3
app/assets/stylesheets/experiment/canvas.scss
View file

@ -45,6 +45,9 @@
}
}
.view-switch-button {
margin-right: .25em;
}
.canvas-preview-img,
.canvas-preview-rect {

21
app/assets/stylesheets/experiment/show.scss
View file

@ -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;

1
app/assets/stylesheets/experiment/table.scss
View file

@ -56,6 +56,7 @@
.view-switch-button {
outline: 1px solid $color-alto;
margin-right: .25em;
}
.view-switch,

2
app/assets/stylesheets/label_templates/index.scss
View file

@ -33,7 +33,7 @@
}
}
@media (max-width: 1299px) {
@media (max-width: 800px) {
.label-toolbar {
.btn:not(.prevent-shrink) {

2
app/assets/stylesheets/repository/repository_toolbar.scss
View file

@ -160,7 +160,7 @@
}
}
@media (max-width: 1624px) {
@media (max-width: 1000px) {
.repository-toolbar {
.btn:not(.prevent-shrink) {

18
app/assets/stylesheets/shared/content_pane.scss
View file

@ -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"] {

52
app/views/experiments/_table_toolbar.html.erb
View file

@ -1,4 +1,4 @@
<div class="toolbar-row">
<div class="toolbar-row" data-width-breakpoint="600">
<span class="left">
<% 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' %>
<div class="content-header sticky-header">
<div class="title-row">
<div class="header-actions experiment-header">
<% if action_name == 'table' %>
<%= render partial: 'table_filters.html.erb' %>
<button id="taskDataDisplay" class="btn btn-light" data-toggle="modal" data-target="#tableDisplayModal">
<i class="fas fa-columns"></i>
</button>
<div class="dropdown sort-menu">
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-sort-amount-up"></i>
</button>
<ul id="sortMenuDropdown" class="dropdown-menu sort-task-menu <%= params[:view_mode] %> dropdown-menu-right" aria-labelledby="sortMenu">
<% %w(atoz ztoa due_first due_last archived_old archived_new).each_with_index do |sort, i| %>
<% if i.even? && i.positive? %>
<li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
<% end %>
<li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
<a class="<%= 'selected' if @current_sort == sort %>"
data-sort="<%= sort %>" >
<%= t("general.sort.#{sort}_html") %>
</a>
</li>
<div class="header-actions experiment-header">
<% if action_name == 'table' %>
<%= render partial: 'table_filters.html.erb' %>
<button id="taskDataDisplay" class="btn btn-light" data-toggle="modal" data-target="#tableDisplayModal">
<i class="fas fa-columns"></i>
</button>
<div class="dropdown sort-menu">
<button class="btn btn-light icon-btn dropdown-toggle" type="button" id="sortMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="fas fa-sort-amount-up"></i>
</button>
<ul id="sortMenuDropdown" class="dropdown-menu sort-task-menu <%= params[:view_mode] %> dropdown-menu-right" aria-labelledby="sortMenu">
<% %w(atoz ztoa due_first due_last archived_old archived_new).each_with_index do |sort, i| %>
<% if i.even? && i.positive? %>
<li class="divider" <%= i > 3 ? 'data-view-mode=archived' : '' %>></li>
<% end %>
</ul>
</div>
<% end %>
</div>
<li <%= %w(archived_new archived_old).include?(sort) ? 'data-view-mode=archived' : '' %>>
<a class="<%= 'selected' if @current_sort == sort %>"
data-sort="<%= sort %>" >
<%= t("general.sort.#{sort}_html") %>
</a>
</li>
<% end %>
</ul>
</div>
<% end %>
</div>
</div>
</div>

8
app/views/experiments/_task_view_dropdowns.html.erb
View file

@ -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 %>
<span class="<%= 'text-light' if action_name == 'table' %>">
@ -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 %>
<span class="<%= 'text-light' if action_name == 'module_archive' %>">
@ -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 %>
<span class="<%= 'text-light' if action_name == 'table' %>">
@ -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 %>
<span class="<%= 'text-light' if action_name == 'canvas' %>">

2
app/views/experiments/canvas.html.erb
View file

@ -9,7 +9,7 @@
<div class="content-pane flexible experiment-new-my_module" id="experiment-canvas">
<%= render partial: 'experiments/show_header' %>
<div class="toolbar-row" id="diagram-buttons">
<div class="toolbar-row" id="diagram-buttons" data-width-breakpoint="600">
<span class="left" id="toolbar-left-block">
<% if can_manage_experiment?(@experiment) %>
<%= link_to modules_new_experiment_path(@experiment, view_mode: 'canvas'),

2
app/views/projects/index/_header.html.erb
View file

@ -19,6 +19,6 @@
<span class="projects-title name-readonly-placeholder"><%= current_folder&.name || t('projects.index.head_title_archived') %></span>
</h1>
</div>
<div id="toolbarWrapper" class="toolbar-row">
<div id="toolbarWrapper" class="toolbar-row" data-width-breakpoint="700">
</div>
</div>

4
app/views/projects/index/_toolbar.html.erb
View file

@ -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 %>
<span class="view-switch-list-span table-switch"><%= t('toolbar.table_view') %></span>
@ -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 %>
<span class="view-switch-list-span cards-switch"><%= t('toolbar.cards_view') %></span>

2
app/views/projects/show/_header.html.erb
View file

@ -18,7 +18,7 @@
<% end %>
</h1>
</div>
<div id="toolbarWrapper" class="toolbar-row">
<div id="toolbarWrapper" class="toolbar-row" data-width-breakpoint="600">
<%= render partial: 'projects/show/toolbar' %>
</div>
</div>

4
app/views/projects/show/_toolbar.html.erb
View file

@ -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 %>
<span class="view-switch-list-span table-switch"><%= t('toolbar.table_view') %></span>
@ -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 %>
<span class="view-switch-list-span cards-switch"><%= t('toolbar.cards_view') %></span>

4
app/views/shared/_state_view_switch.html.erb
View file

@ -6,12 +6,12 @@
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="viewSwitchButton">
<% if switchable %>
<li>
<%= 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 %>
</li>
<li>
<%= 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 %>
</li>