Fix results CSS [SCI-9177]

app/assets/stylesheets/application.sass.scss

@@ -72,6 +72,7 @@
 @import "settings/teams";
 @import "settings/users";
 @import "settings/webhooks";
+@import "shared/content/elements";
 @import "shared/content/attachments";
 @import "shared/content/checklist";
 @import "shared/content/table";

app/assets/stylesheets/my_modules/protocol.scss

@@ -84,22 +84,6 @@
       }
     }
   }
-  .tinymce-wrapper {
-    width: 100%;
-
-    .tox-tinymce {
-      flex-grow: 1;
-    }
-  }
-  .tinymce-container {
-    display: flex;
-    width: 100%;
-
-    .tiny-mce-editor {
-      flex-basis: 100%;
-      max-width: 100%;
-    }
-  }
 }
 
 .share-task-modal {

app/assets/stylesheets/navigation/breadcrumbs.scss

@@ -3,7 +3,7 @@
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
-  padding-left: 1.5rem;
+  padding-left: 1rem;
 }
 
 .breadcrumbs-container {

app/assets/stylesheets/navigation/general.scss

@@ -10,7 +10,7 @@ body.navigator-collapsed {
   --breadcrumbs-navigation-height: 44px;
   --left-navigation-width: 192px;
   --navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
-  --navigator-navigation-width: 240px;
+  --navigator-navigation-width: 224px;
   --title-row-height: 4em;
   --top-navigation-height: 72px;
   display: grid;
@@ -90,7 +90,7 @@ body.navigator-collapsed {
   .sci--layout-content {
     background-color: var(--sn-white);
     grid-area: content;
-    padding: 0 1.5rem;
+    padding: 0 1rem;
     width: 100%;
 
     .container-fluid {

app/assets/stylesheets/protocols/tinymce_editor.scss

@@ -1,4 +1,13 @@
-.protocol-content {
+.protocol-content,
+.my-modules-results {
+  .tinymce-wrapper {
+    width: 100%;
+
+    .tox-tinymce {
+      flex-grow: 1;
+    }
+  }
+
   .tinymce-container {
     align-items: center;
     border-radius: 4px;
@@ -6,6 +15,11 @@
     min-height: 36px;
     width: 100%;
 
+    .tiny-mce-editor {
+      flex-basis: 100%;
+      max-width: 100%;
+    }
+
     form > .form-group {
       margin-bottom: 0;
 

app/assets/stylesheets/shared/content/attachments.scss

@@ -8,7 +8,7 @@
 
 
 .content__attachments {
-  padding-left: 28px;
+  padding-left: 2rem;
 }
 
 .content__attachments-actions {

app/assets/stylesheets/shared/content/elements.scss

@@ -0,0 +1,54 @@
+// scss-lint:disable SelectorDepth
+// scss-lint:disable NestingDepth
+
+.elements-actions-container {
+  align-items: center;
+  display: flex;
+  flex-basis: 20%;
+  gap: .25rem;
+  justify-content: flex-end;
+
+  .disabled {
+    color: $color-silver-chalice;
+    pointer-events: none;
+  }
+
+  .dropdown-menu {
+    white-space: nowrap;
+  }
+
+  .insert-button {
+    .caret {
+      margin-left: .5em;
+    }
+  }
+
+  .insert-element-dropdown {
+    @include font-button;
+
+    min-width: 230px;
+    padding: 0;
+
+    li {
+      padding: .5em 1em;
+
+      &.action {
+        cursor: pointer;
+
+        &:hover {
+          background: var(--sn-super-light-grey);
+        }
+
+        .fas {
+          margin-right: .5em;
+        }
+      }
+
+      &.title {
+        @include font-small;
+        color: $color-alto;
+        text-transform: uppercase;
+      }
+    }
+  }
+}

app/assets/stylesheets/shared/content_pane.scss

@@ -28,9 +28,9 @@
       background-color: inherit;
       display: flex;
       height: 4em;
-      margin-left: -1.5rem;
-      padding: 0 1.5rem;
-      width: calc(100% + 3rem);
+      margin-left: -1rem;
+      padding: 0 1rem;
+      width: calc(100% + 2rem);
 
 
       h1 {

app/assets/stylesheets/steps/step.scss

@@ -104,58 +104,6 @@
         border: 1px solid var(--sn-science-blue);
       }
     }
-
-    .step-actions-container {
-      align-items: center;
-      display: flex;
-      justify-content: flex-end;
-      gap: .25rem;
-      flex-basis: 20%;
-
-      .disabled {
-        color: $color-silver-chalice;
-        pointer-events: none;
-      }
-
-      .dropdown-menu {
-        white-space: nowrap;
-      }
-
-      .insert-button {
-        .caret {
-          margin-left: .5em;
-        }
-      }
-
-      .insert-element-dropdown {
-        @include font-button;
-
-        min-width: 230px;
-        padding: 0;
-
-        li {
-          padding: .5em 1em;
-
-          &.action {
-            cursor: pointer;
-
-            &:hover {
-              background: $color-concrete;
-            }
-
-            .fas {
-              margin-right: .5em;
-            }
-          }
-
-          &.title {
-            @include font-small;
-            color: $color-alto;
-            text-transform: uppercase;
-          }
-        }
-      }
-    }
   }
 
   .step-elements {

app/controllers/results_controller.rb

@@ -1,11 +1,14 @@
 # frozen_string_literal: true
 
 class ResultsController < ApplicationController
+  include Breadcrumbs
   skip_before_action :verify_authenticity_token, only: %i(create update destroy duplicate)
   before_action :load_my_module
   before_action :load_vars, only: %i(destroy elements assets upload_attachment
                                      update_view_state update_asset_view_mode update duplicate)
   before_action :check_destroy_permissions, only: :destroy
+  before_action :set_breadcrumbs_items, only: %i(index)
+  before_action :set_navigator, only: %i(index)
 
   def index
     respond_to do |format|
@@ -174,4 +177,12 @@ class ResultsController < ApplicationController
   def check_destroy_permissions
     render_403 unless can_delete_result?(@result)
   end
+
+  def set_navigator
+    @navigator = {
+      url: tree_navigator_my_module_path(@my_module),
+      archived: params[:view_mode] == 'archived',
+      id: @my_module.code
+    }
+  end
 end

app/helpers/secondary_navigation_helper.rb

@@ -41,7 +41,7 @@ module SecondaryNavigationHelper
   end
 
   def is_module_results?
-    %w(results results_show).include?(action_name)
+    %w(index).include?(action_name) && controller_name == 'results'
   end
 
   def is_module_activities?

app/javascript/vue/navigation/navigator.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-[216px] ml-6 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
+  <div class="w-[216px] ml-4 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
     <div class="px-3 py-1.5 flex items-center relative leading-4">
       <i class="sn-icon sn-icon-navigator"></i>
       <div class="font-bold text-base pl-3">

app/javascript/vue/protocol/step.vue

@@ -56,7 +56,7 @@
           <i class="sn-icon sn-icon-edit"></i>
         </button>
       </div>
-      <div class="step-actions-container">
+      <div class="elements-actions-container">
         <input type="file" class="hidden" ref="fileSelector" @change="loadFromComputer" multiple />
         <div ref="elementsDropdownButton" v-if="urls.update_url"  class="dropdown">
           <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'stepInserMenu_' + step.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
@@ -143,15 +143,12 @@
                 {{ i18n.t('protocols.steps.options_dropdown.title') }}
               </li>
               <li v-if="urls.reorder_elements_url" class="action"  @click="openReorderModal" :class="{ 'disabled': elements.length < 2 }">
-                <i class="sn-icon sn-icon-sort"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.rearrange') }}
               </li>
               <li v-if="urls.duplicate_step_url" class="action" @click="duplicateStep">
-                <i class="sn-icon sn-icon-duplicate"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.duplicate') }}
               </li>
               <li v-if="urls.delete_url" class="action" @click="showDeleteModal">
-                <i class="sn-icon sn-icon-delete"></i>
                 {{ i18n.t('protocols.steps.options_dropdown.delete') }}
               </li>
             </ul>

app/javascript/vue/results/result.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="result-wrapper bg-white">
-    <div class="result-header flex justify-between p-3">
+  <div class="result-wrapper bg-white px-4 py-2 mb-4">
+    <div class="result-header flex justify-between py-2">
       <div class="result-head-left">
         <InlineEdit
           :value="result.attributes.name"
@@ -17,76 +17,58 @@
           @update="updateName"
         />
       </div>
-      <div class="result-head-right flex">
+      <div class="result-head-right flex elements-actions-container">
         <input type="file" class="hidden" ref="fileSelector" @change="loadFromComputer" multiple />
         <div ref="elementsDropdownButton" v-if="urls.update_url"  class="dropdown">
           <button class="btn btn-light dropdown-toggle insert-button" type="button" :id="'resultInsertMenu_' + result.id" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-            {{ i18n.t('protocols.steps.insert.button') }}
+            {{ i18n.t('my_modules.results.insert.button') }}
             <span class="sn-icon sn-icon-down"></span>
           </button>
           <ul ref="elementsDropdown" class="dropdown-menu insert-element-dropdown dropdown-menu-right" :aria-labelledby="'resultInsertMenu_' + result.id">
             <li class="title">
-              <a>
-                {{ i18n.t('protocols.steps.insert.title') }}
-              </a>
+              {{ i18n.t('my_modules.results.insert.title') }}
             </li>
             <li class="action" @click="createElement('table')">
-              <a class="cursor-pointer">
-                <i class="sn-icon sn-icon-tables"></i>
-                {{ i18n.t('protocols.steps.insert.table') }}
-              </a>
+              <i class="sn-icon sn-icon-tables"></i>
+              {{ i18n.t('my_modules.results.insert.table') }}
             </li>
             <li class="action dropdown-submenu-item">
-              <a class="cursor-pointer">
-                <i class="sn-icon sn-icon-tables"></i>
-                {{ i18n.t('protocols.steps.insert.well_plate') }}
-              </a>
+              <i class="sn-icon sn-icon-tables"></i>
+              {{ i18n.t('my_modules.results.insert.well_plate') }}
               <span class="caret"></span>
 
               <ul class="dropdown-submenu">
                 <li v-for="option in wellPlateOptions" :key="option.dimensions.toString()" class="action" @click="createElement('table', option.dimensions, true)">
-                  <a class="cursor-pointer">
-                    {{ i18n.t(option.label) }}
-                  </a>
+                  {{ i18n.t(option.label) }}
                 </li>
               </ul>
             </li>
             <li class="action"  @click="createElement('text')">
-              <a class="cursor-pointer">
-                <i class="sn-icon sn-icon-result-text"></i>
-                {{ i18n.t('protocols.steps.insert.text') }}
-              </a>
+              <i class="sn-icon sn-icon-result-text"></i>
+              {{ i18n.t('my_modules.results.insert.text') }}
             </li>
             <li class="action dropdown-submenu-item">
-              <a class="cursor-pointer">
-                <i class="sn-icon sn-icon-files"></i>
-                {{ i18n.t('protocols.steps.insert.attachment') }}
-              </a>
+              <i class="sn-icon sn-icon-files"></i>
+              {{ i18n.t('my_modules.results.insert.attachment') }}
               <span class="caret"></span>
               <ul class="dropdown-submenu">
                 <li class="action" @click="openLoadFromComputer">
-                  <a class="cursor-pointer">
-                    {{ i18n.t('protocols.steps.insert.add_file') }}
-                  </a>
+                  {{ i18n.t('my_modules.results.insert.add_file') }}
                 </li>
                 <li class="action" v-if="result.attributes.wopi_enabled" @click="openWopiFileModal">
-                  <a class="cursor-pointer">
-                    {{ i18n.t('assets.create_wopi_file.button_text') }}
-                  </a>
+                  {{ i18n.t('assets.create_wopi_file.button_text') }}
                 </li>
                 <li class="action" v-if="result.attributes.marvinjs_enabled" @click="openMarvinJsModal($refs.marvinJsButton)">
-                  <a class="cursor-point  er">
-                    <span
-                    class="new-marvinjs-upload-button text-sn-black text-decoration-none"
-                    :data-object-id="result.id"
-                    ref="marvinJsButton"
-                    :data-marvin-url="result.attributes.marvinjs_context.marvin_js_asset_url"
-                    :data-object-type="result.attributes.type"
-                    tabindex="0"
-                    >
-                      {{ i18n.t('marvinjs.new_button') }}
-                    </span>
-                  </a>
+                  <span
+                  class="new-marvinjs-upload-button text-sn-black text-decoration-none"
+                  :data-object-id="result.id"
+                  ref="marvinJsButton"
+                  :data-marvin-url="result.attributes.marvinjs_context.marvin_js_asset_url"
+                  :data-object-type="result.attributes.type"
+                  tabindex="0"
+                  >
+                    {{ i18n.t('marvinjs.new_button') }}
+                  </span>
                 </li>
               </ul>
             </li>
@@ -106,13 +88,13 @@
           </button>
           <ul ref="actionsDropdown" class="dropdown-menu dropdown-menu-right insert-element-dropdown" :aria-labelledby="'resultOptionsMenu_' + result.id">
             <li class="action"  @click="openReorderModal">
-              <a class="cursor-pointer">{{ i18n.t('my_modules.results.actions.rearrange') }}</a>
+              {{ i18n.t('my_modules.results.actions.rearrange') }}
             </li>
             <li class="action" @click="duplicateResult">
-              <a class="cursor-pointer">{{ i18n.t('my_modules.results.actions.duplicate') }}</a>
+              {{ i18n.t('my_modules.results.actions.duplicate') }}
             </li>
             <li class="action" @click="archiveResult">
-              <a class="cursor-pointer">{{ i18n.t('my_modules.results.actions.archive') }}</a>
+              {{ i18n.t('my_modules.results.actions.archive') }}
             </li>
           </ul>
         </div>
@@ -125,10 +107,9 @@
       @close="closeReorderModal"
     />
     <div>
-      <template v-for="(element, index) in orderedElements">
+      <div v-for="(element, index) in orderedElements" :key="index" class="pt-6 border-0 border-t border-dotted border-sn-sleepy-grey mt-6">
         <component
           :is="elements[index].attributes.orderable_type"
-          :key="index"
           :element.sync="elements[index]"
           :inRepository="false"
           :reorderElementUrl="elements.length > 1 ? urls.reorder_elements_url : ''"
@@ -140,8 +121,9 @@
           @component:insert="insertElement"
           @moved="moveElement"
         />
-      </template>
+      </div>
       <Attachments v-if="attachments.length"
+                    class="pt-6 border-0 border-t border-dotted border-sn-sleepy-grey mt-6"
                     :parent="result"
                     :attachments="attachments"
                     :attachmentsReady="attachmentsReady"
@@ -152,7 +134,6 @@
                     @attachments:viewMode="changeAttachmentsViewMode"
                     @attachment:viewMode="updateAttachmentViewMode"/>
     </div>
-    <hr>
   </div>
 </template>
 
@@ -182,12 +163,12 @@
         attachmentsReady: false,
         showFileModal: false,
         wellPlateOptions: [
-          { label: 'protocols.steps.insert.well_plate_options.32_x_48', dimensions: [32, 48] },
-          { label: 'protocols.steps.insert.well_plate_options.16_x_24', dimensions: [16, 24] },
-          { label: 'protocols.steps.insert.well_plate_options.8_x_12', dimensions: [8, 12] },
-          { label: 'protocols.steps.insert.well_plate_options.6_x_8', dimensions: [6, 8] },
-          { label: 'protocols.steps.insert.well_plate_options.6_x_4', dimensions: [6, 4] },
-          { label: 'protocols.steps.insert.well_plate_options.2_x_3', dimensions: [2, 3] }
+          { label: 'my_modules.results.insert.well_plate_options.32_x_48', dimensions: [32, 48] },
+          { label: 'my_modules.results.insert.well_plate_options.16_x_24', dimensions: [16, 24] },
+          { label: 'my_modules.results.insert.well_plate_options.8_x_12', dimensions: [8, 12] },
+          { label: 'my_modules.results.insert.well_plate_options.6_x_8', dimensions: [6, 8] },
+          { label: 'my_modules.results.insert.well_plate_options.6_x_4', dimensions: [6, 4] },
+          { label: 'my_modules.results.insert.well_plate_options.2_x_3', dimensions: [2, 3] }
         ],
         editingName: false
       }

app/javascript/vue/results/results.vue

@@ -6,7 +6,7 @@
       @newResult="createResult"
       @expandAll="expandAll"
       @collapseAll="collapseAll"
-      class="mb-3"
+      class="my-4"
     />
     <div class="results-list">
       <Result v-for="result in results" :key="result.id"

app/javascript/vue/shared/content/checklist.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content__checklist-container" >
-    <div class="checklist-header flex rounded pl-10 mb-1 items-center relative w-full group/checklist-header" :class="{ 'editing-name': editingName, 'locked': !element.attributes.orderable.urls.update_url }">
+    <div class="checklist-header flex rounded pl-8 mb-1 items-center relative w-full group/checklist-header" :class="{ 'editing-name': editingName, 'locked': !element.attributes.orderable.urls.update_url }">
       <div v-if="reorderElementUrl"
           class="absolute items-center h-full justify-center left-0 p-2 tw-hidden text-sn-grey"
           :class="{ 'group-hover/checklist-header:flex': !locked }"

app/javascript/vue/shared/content/table.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content__table-container">
-     <div class="table-header flex rounded pl-10 mb-1 items-center relative w-full group/table-header" :class="{ 'editing-name': editingName, 'locked': locked }">
+     <div class="table-header h-9 flex rounded pl-8 mb-1 items-center relative w-full group/table-header" :class="{ 'editing-name': editingName, 'locked': locked }">
       <div v-if="reorderElementUrl"
           class="absolute items-center h-full justify-center left-0 p-2 tw-hidden text-sn-grey"
           :class="{ 'group-hover/table-header:flex': (!editingName && !locked) }"
@@ -36,7 +36,7 @@
         </button>
       </div>
     </div>
-    <div class="table-body ml-10 group/table-body relative p-1 border-solid border-transparent"
+    <div class="table-body ml-8 group/table-body relative p-1 border-solid border-transparent"
          :class="{'edit border-sn-light-grey': editingTable, 'view': !editingTable, 'locked': !element.attributes.orderable.urls.update_url}"
          tabindex="0"
          @keyup.enter="!editingTable && enableTableEdit()">

app/javascript/vue/shared/content/text.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content__text-container flex rounded pl-10 mb-4 relative w-full group/text_container" :class="{ 'edit': inEditMode, 'component__element--locked': !element.attributes.orderable.urls.update_url }" @keyup.enter="enableEditMode($event)" tabindex="0">
+  <div class="content__text-container flex rounded pl-8 min-h-[2.25rem] mb-4 relative w-full group/text_container" :class="{ 'edit': inEditMode, 'component__element--locked': !element.attributes.orderable.urls.update_url }" @keyup.enter="enableEditMode($event)" tabindex="0">
     <div v-if="reorderElementUrl"
          class="absolute items-center h-full justify-center left-0 p-2 tw-hidden text-sn-grey"
          :class="{ 'group-hover/text_container:flex': !inEditMode }"

app/views/my_modules/protocols.html.erb

@@ -24,18 +24,7 @@
   </span>
 <% end %>
 
-<% provide(:container_class, 'no-second-nav-container') %>
 
-
-<%= content_for :sidebar do %>
-  <%= render partial: "shared/sidebar/#{@my_module.archived_branch? ? 'archived_my_module' : 'my_module'}",
-    locals: {
-      my_modules: @experiment_my_modules,
-      experiment: @my_module.experiment,
-      current_my_module: @my_module
-    }
-  %>
-<% end %>
 <%= render partial: 'shared/drag_n_drop_overlay' %>
 <div class="content-pane flexible my-modules-protocols-index with-grey-background" data-task-id="<%= @my_module.id %>">
   <%= render partial: 'my_modules/header' %>

app/views/results/index.html.erb

@@ -12,12 +12,14 @@
 <% end %>
 <%= render partial: 'shared/drag_n_drop_overlay' %>
 <%= render partial: 'assets/wopi/create_wopi_file_modal' %>
-<% provide(:container_class, 'no-second-nav-container') %>
 
-<%= render partial: 'my_modules/header_actions' %>
+<div class="content-pane flexible my-modules-results with-grey-background">
+  <%= render partial: 'my_modules/header' %>
+  <%= render partial: 'my_modules/header_actions' %>
 
-<div id="results" data-behaviour="vue">
-  <results url="<%= my_module_results_url(@my_module) %>">
+  <div id="results" data-behaviour="vue">
+    <results url="<%= my_module_results_url(@my_module) %>">
+  </div>
 </div>
 
 <%= javascript_include_tag "handsontable.full" %>

app/views/shareable_links/my_modules/_step.html.erb

@@ -23,7 +23,7 @@
         <%= render partial: "shareable_links/my_modules/inline_view", locals: { text: step.name, smart_annotation_enabled: false } %>
       </div>
     </div>
-    <div class="step-actions-container">
+    <div class="elements-actions-container">
       <a href="#"
          class="shareable-link-open-comments-sidebar btn icon-btn btn-light"
          data-turbolinks="false"

config/locales/en.yml

@@ -1263,6 +1263,23 @@ en:
       info_tab: "Info"
       comments_tab: "Comments"
       comment_title: "%{user} at %{time}:"
+      insert:
+        button: 'Insert content'
+        title: 'Insert result content'
+        table: 'Table'
+        well_plate: 'Well plate'
+        text: 'Text'
+        checklist: 'Checklist'
+        attachment: 'File'
+        add_file: 'File from your PC'
+        checklist_item: 'Add a new checklist item...'
+        well_plate_options:
+          32_x_48: '1536 (32 x 48)'
+          16_x_24: '384 (16 x 24)'
+          8_x_12: '96 (8 x 12)'
+          6_x_8: '48 (6 x 8 )'
+          6_x_4: '24 (6 x 4)'
+          2_x_3: '6 (2 x 3)'
       sorts:
         updated_at_asc: "Modified first"
         updated_at_desc: "Modified last"
@@ -3071,7 +3088,7 @@ en:
         duplicate: 'Duplicate'
         delete: 'Delete'
       insert:
-        button: 'Add content'
+        button: 'Insert content'
         title: 'Insert step content'
         table: 'Table'
         well_plate: 'Well plate'