From bd742d388d10a4ccbc77d50ec2fa42791f532c75 Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Wed, 13 May 2020 10:58:40 +0200 Subject: [PATCH] Small CSS improvments for mobile --- app/assets/stylesheets/my_modules.scss | 79 +++++++++++++++++++ .../my_modules/protocols/index.scss | 6 +- app/assets/stylesheets/steps.scss | 12 ++- app/views/my_module_tags/_index_edit.html.erb | 4 +- .../_module_header_due_date.html.erb | 1 + app/views/my_modules/_tags.html.erb | 2 +- app/views/my_modules/protocols.html.erb | 2 +- app/views/protocols/_steps.html.erb | 4 +- app/views/steps/_step.html.erb | 51 ++++++------ app/views/steps/attachments/_list.html.erb | 6 +- 10 files changed, 126 insertions(+), 41 deletions(-) diff --git a/app/assets/stylesheets/my_modules.scss b/app/assets/stylesheets/my_modules.scss index bbb0172b8..cb5c1af77 100644 --- a/app/assets/stylesheets/my_modules.scss +++ b/app/assets/stylesheets/my_modules.scss @@ -1,6 +1,8 @@ // Place all the styles related to the MyModules controller here. // They will automatically be included in application.css. // You can use Sass (SCSS) here: http://sass-lang.com/ +// scss-lint:disable SelectorDepth SelectorFormat +// scss-lint:disable NestingDepth QualifyingElement @import "constants"; @@ -113,3 +115,80 @@ } } } + +// Mobile view +@media (max-width: 700px) { + .task-section { + border-left: 0; + padding-left: 0; + + .task-section-header { + .actions-block { + flex-wrap: wrap; + justify-content: flex-start; + margin-bottom: 5px; + width: 100%; + + .dropdown { + margin-bottom: 5px; + min-width: 100%; + } + } + } + } + + .task-details { + .module-tags { + .dropdown-selector-container { + .input-field { + padding-right: 36px; + } + } + } + + .datetime-container { + .date-text { + margin-right: 0; + } + + .dropdown-menu { + left: -50px !important; + } + } + } + + #steps { + .panel-heading { + flex-wrap: wrap; + } + + .panel-options { + display: flex; + flex-wrap: wrap; + max-width: 100%; + + .complete-step-btn { + width: 100%; + } + } + } + + .attachments { + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important; + + .attachment-placeholder { + margin: 4px 0 16px; + width: 200px; + } + } + + #filePreviewModal { + .modal-body { + width: 100%; + + .file-preview-container { + width: 90%; + } + } + } +} diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss index 214b6a3a5..cd48c65bb 100644 --- a/app/assets/stylesheets/my_modules/protocols/index.scss +++ b/app/assets/stylesheets/my_modules/protocols/index.scss @@ -104,8 +104,8 @@ } } - [data-action="new-step"] { - margin-left: 5px; + .dropdown { + margin-right: 5px; } } } @@ -268,7 +268,7 @@ flex-basis: 100px; flex-grow: 1; flex-shrink: 1; - max-width: calc(100% - 65px); + max-width: 100%; position: relative; z-index: 110; diff --git a/app/assets/stylesheets/steps.scss b/app/assets/stylesheets/steps.scss index ae169f905..8f66e9bb9 100644 --- a/app/assets/stylesheets/steps.scss +++ b/app/assets/stylesheets/steps.scss @@ -46,13 +46,17 @@ .panel-heading { border: 0; - height: 46px; + display: flex; + min-height: 46px; padding-bottom: 0; padding-top: 0; .panel-options { bottom: 0; + flex-grow: 1; + flex-shrink: 0; line-height: 46px; + text-align: right; } span.step-number { @@ -65,7 +69,9 @@ .left-floats { align-items: center; display: flex; - height: 100%; + max-width: 100%; + min-height: inherit; + overflow: hidden; padding-right: 15px; .step-name-link { @@ -299,9 +305,11 @@ .attachments-actions { align-items: center; display: flex; + flex-wrap: wrap; .title { flex-grow: 1; + flex-shrink: 0; } .attachments-order { diff --git a/app/views/my_module_tags/_index_edit.html.erb b/app/views/my_module_tags/_index_edit.html.erb index acb7c1e48..d871f2f71 100644 --- a/app/views/my_module_tags/_index_edit.html.erb +++ b/app/views/my_module_tags/_index_edit.html.erb @@ -7,7 +7,7 @@
  • -
    +

    <%= tag.name %>

    @@ -62,7 +62,7 @@ {}, { class: 'selectpicker' }) %> <%= f.button class: 'btn btn-primary' do %> - + <%= t("experiments.canvas.modal_manage_tags.create") %> <% end %>
    diff --git a/app/views/my_modules/_module_header_due_date.html.erb b/app/views/my_modules/_module_header_due_date.html.erb index d9003adef..67668171d 100644 --- a/app/views/my_modules/_module_header_due_date.html.erb +++ b/app/views/my_modules/_module_header_due_date.html.erb @@ -16,6 +16,7 @@ data-date-format="<%= datetime_picker_format_full %>" data-date-locale="<%= I18n.locale %>" data-date-use-current="false" + data-date-orientation="left" value="<%= my_module.due_date ? l(my_module.due_date, format: :full) : '' %>"/>
    diff --git a/app/views/my_modules/_tags.html.erb b/app/views/my_modules/_tags.html.erb index b4b1ab14d..9417a2f35 100644 --- a/app/views/my_modules/_tags.html.erb +++ b/app/views/my_modules/_tags.html.erb @@ -2,7 +2,7 @@ <%= select_tag "activity", diff --git a/app/views/my_modules/protocols.html.erb b/app/views/my_modules/protocols.html.erb index f568e0e68..e30b1436e 100644 --- a/app/views/my_modules/protocols.html.erb +++ b/app/views/my_modules/protocols.html.erb @@ -84,7 +84,7 @@ data-action="new-step" data-href="<%= new_protocol_step_path(protocol_id: @protocol.id, format: :json) %>"> - + <%=t "protocols.steps.new_step" %> diff --git a/app/views/protocols/_steps.html.erb b/app/views/protocols/_steps.html.erb index 31dab4605..778a2b199 100644 --- a/app/views/protocols/_steps.html.erb +++ b/app/views/protocols/_steps.html.erb @@ -3,10 +3,10 @@
    - + <%= t("protocols.steps.collapse_label") %> - + <%= t("protocols.steps.expand_label") %>
    <% end %> diff --git a/app/views/steps/_step.html.erb b/app/views/steps/_step.html.erb index e2f562f63..08bd7f7fb 100644 --- a/app/views/steps/_step.html.erb +++ b/app/views/steps/_step.html.erb @@ -3,13 +3,36 @@
    ">
    +
    + + + + + <%= step.position + 1 %> + + + <%= step.name %> + <% unless step.new_record? %> + | + <%= sanitize_input t('protocols.steps.published_on', + timestamp: l(step.created_at, format: :full), + user: h(step.user.full_name)) %> + <% end %> + +
    <% if can_complete_or_checkbox_step?(@protocol) && !(preview) %> <% if step.completed? %>
    - @@ -18,7 +41,7 @@
    - @@ -53,30 +76,6 @@ <% end %> <% end %>
    -
    - - - - - <%= step.position + 1 %> - - - <%= step.name %> - <% unless step.new_record? %> - | - <%= sanitize_input t('protocols.steps.published_on', - timestamp: l(step.created_at, format: :full), - user: h(step.user.full_name)) %> - <% end %> - -
    -
    diff --git a/app/views/steps/attachments/_list.html.erb b/app/views/steps/attachments/_list.html.erb index f82551928..554b7e1bb 100644 --- a/app/views/steps/attachments/_list.html.erb +++ b/app/views/steps/attachments/_list.html.erb @@ -1,8 +1,6 @@ <% assets = ordered_assets(step) %> -
    -
    -
    +

    @@ -40,7 +38,7 @@

    -
    +
    <% assets.each_with_index do |asset, i| %> <% order_atoz = az_ordered_assets_index(step, asset.id) %> <% order_ztoa = assets.length - az_ordered_assets_index(step, asset.id) %>