Small CSS improvments for mobile

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%;
+      }
+    }
+  }
+}

app/assets/stylesheets/my_modules/protocols/index.scss

@@ -104,8 +104,8 @@
         }
       }
 
-      [data-action="new-step"] {
+      .dropdown {
-        margin-left: 5px;
+        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;
 

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 {

app/views/my_module_tags/_index_edit.html.erb

@@ -7,7 +7,7 @@
       <li class="list-group-item" style="background-color: <%= tag.color %>" data-color="<%= tag.color %>" data-tag-id="<%= tag.id %>" data-name="<%= tag.name %>">
 
         <div class="row tag-show">
-          <div class="col-xs-8">
+          <div class="col-xs-6 col-lg-8">
             <h4><%= tag.name %></h4>
           </div>
             <div class="pull-right">
@@ -62,7 +62,7 @@
                                 {},
                                 { class: 'selectpicker' }) %>
           <%= f.button class: 'btn btn-primary' do %>
-            <span class="hidden-xs"><%= t("experiments.canvas.modal_manage_tags.create") %></span>
+            <span><%= t("experiments.canvas.modal_manage_tags.create") %></span>
           <% end %>
         </div>
       </div>

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) : '' %>"/>
     </div>
     <span class="fas fa-times clear-date" data-toggle='clear-date-time-picker' data-target='calendarDueDate'></span>

app/views/my_modules/_tags.html.erb

@@ -2,7 +2,7 @@
   <div class="edit-button-container hidden">
     <a class="edit-tags-link" data-remote="true" href="<%= my_module_tags_edit_path(@my_module, format: :json) %>">
         <i class="fas fa-cog"></i>
-        <span><%= t("my_modules.module_header.manage_tags") %></span>
+        <span class="hidden-xs"><%= t("my_modules.module_header.manage_tags") %></span>
     </a>
   </div>
   <%= select_tag "activity",

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) %>">
             <span class="fas fa-plus" aria-hidden="true"></span>
-            <span class="hidden-xs"><%=t "protocols.steps.new_step" %></span>
+            <span><%=t "protocols.steps.new_step" %></span>
         </a>
       </div>
     </div>

app/views/protocols/_steps.html.erb

@@ -3,10 +3,10 @@
     <div class="expand-all-steps" style="display: <%= 'none' if @protocol.steps.empty? %>">
       <a class="btn btn-light" data-action="collapse-steps">
         <span class="fas fa-caret-up"></span>
-        <span class="hidden-xs"><%= t("protocols.steps.collapse_label") %></a></span>
+        <span><%= t("protocols.steps.collapse_label") %></a></span>
       <a class="btn btn-light" data-action="expand-steps">
         <span class="fas fa-caret-down"></span>
-        <span class="hidden-xs"><%= t("protocols.steps.expand_label") %></a></span>
+        <span><%= t("protocols.steps.expand_label") %></a></span>
     </div>
   </div>
 <% end %>

app/views/steps/_step.html.erb

@@ -3,13 +3,36 @@
 <div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
   <div class="panel panel-default">
     <div class="panel-heading">
+      <div class="left-floats">
+        <a class="step-panel-collapse-link"
+           href="#step-panel-<%= step.id || step.position %>"
+           data-toggle="collapse"
+           data-remote="true">
+          <span class="fas fa-caret-square-down collapse-step-icon"></span>
+        </a>
+
+        <span class="step-number"><%= step.position + 1 %></span>
+
+        <a class="step-panel-collapse-link step-name-link"
+           href="#step-panel-<%= step.id || step.position %>"
+           data-toggle="collapse"
+           data-remote="true">
+          <span class="name-block"><strong><%= step.name %></strong></span>
+          <% unless step.new_record? %>
+            <span class="delimiter">|</span>
+            <span class="author-block"><%= sanitize_input t('protocols.steps.published_on',
+                                       timestamp: l(step.created_at, format: :full),
+                                       user: h(step.user.full_name)) %></span>
+          <% end %>
+        </a>
+      </div>
       <div class="panel-options pull-right">
         <% if can_complete_or_checkbox_step?(@protocol) && !(preview) %>
           <% if step.completed? %>
             <div data-action="uncomplete-step"
                  class="complete-step-btn"
                  data-link-url="<%= toggle_step_state_step_path(step)%>">
-              <button class="btn btn-secondary">
+              <button class="btn btn-secondary btn-block">
                 <span class="fas fa-times"></span>
                 <%= t("protocols.steps.options.uncomplete_title") %>
               </button>
@@ -18,7 +41,7 @@
             <div data-action="complete-step"
                  class="complete-step-btn"
                  data-link-url="<%= toggle_step_state_step_path(step)%>">
-              <button class="btn btn-secondary">
+              <button class="btn btn-secondary btn-block">
                 <span class="fas fa-check"></span>
                 <%= t("protocols.steps.options.complete_title") %>
               </button>
@@ -53,30 +76,6 @@
           <% end %>
         <% end %>
       </div>
-      <div class="left-floats">
-        <a class="step-panel-collapse-link"
-           href="#step-panel-<%= step.id || step.position %>"
-           data-toggle="collapse"
-           data-remote="true">
-          <span class="fas fa-caret-square-down collapse-step-icon"></span>
-        </a>
-
-        <span class="step-number"><%= step.position + 1 %></span>
-
-        <a class="step-panel-collapse-link step-name-link"
-           href="#step-panel-<%= step.id || step.position %>"
-           data-toggle="collapse"
-           data-remote="true">
-          <span class="name-block"><strong><%= step.name %></strong></span>
-          <% unless step.new_record? %>
-            <span class="delimiter">|</span>
-            <span class="author-block"><%= sanitize_input t('protocols.steps.published_on',
-                                       timestamp: l(step.created_at, format: :full),
-                                       user: h(step.user.full_name)) %></span>
-          <% end %>
-        </a>
-      </div>
-
     </div>
     <div class="panel-collapse collapse" id="step-panel-<%= step.id || step.position %>" role="tabpanel">
       <div class="panel-body">

app/views/steps/attachments/_list.html.erb

@@ -1,8 +1,6 @@
 <% assets = ordered_assets(step) %>
-<div class="col-xs-12">
 <hr>
-</div>
+<div class="attachments-actions">
-<div class="col-xs-12 attachments-actions">
 
   <div class="title">
     <h4>
@@ -40,7 +38,7 @@
   </div>
 </div>
 
-<div class="col-xs-12 attachments" id="att-<%= step.id %>">
+<div class="attachments" id="att-<%= step.id %>">
   <% 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) %>