Fix CSS UI issues for shareable links task sharing [SCI-9080] (#6031)

* Fix css UI issues for shareable links task sharing [SCI-9080]

app/assets/javascripts/shareable_links/repositories.js

@@ -80,6 +80,8 @@
                           <ul class="dropdown-menu" role="menu" aria-labelledby="rowReminders${row.DT_RowId}">
                           </ul>
                         </div>` + recordName;
+        } else {
+          recordName = `<span class='inline-block my-2'>${recordName}</span>`;
         }
         return recordName;
       }
@@ -119,6 +121,12 @@
       },
       columns: simpleTableColumns(tableContainer),
       columnDefs: simpleViewColumnDefs(tableContainer),
+      language: {
+        paginate: {
+          previous: "<span class='hidden'></span>",
+          next: "<span class='hidden'></span>"
+        }
+      },
       drawCallback: function() {
         var repositoryContainer = $(this).closest('.assigned-repository-container');
         repositoryContainer.find('.table.dataTable').removeClass('hidden');

app/assets/stylesheets/application.sass.scss

@@ -33,6 +33,7 @@
 @import "my_modules/repositories";
 @import "my_modules/status_flow";
 @import "my_modules/stock_consumption_modal";
+@import "my_modules/shareable_links";
 @import "protocols/index";
 @import "protocols/preview_modal";
 @import "protocols/protocol";

app/assets/stylesheets/my_modules/shareable_links.scss

@@ -0,0 +1,49 @@
+// scss-lint:disable IdSelector SelectorDepth NestingDepth
+
+#shareable-link-welcome-modal,
+#team-sharing-tasks,
+#modalDestroyShareableLink {
+  .modal-body {
+    padding: .625rem 1rem;
+
+    .text-sm:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+
+.shareable-links {
+  .module-name {
+    width: calc(100vw - 27rem);
+  }
+
+  #assigned-items-container .assigned-repository {
+    border: unset;
+
+    .assigned-repository-caret {
+      padding: 0;
+    }
+  }
+
+  .dataTables_paginate .paginate_button {
+    &.next,
+    &.previous {
+      cursor: pointer;
+
+      a {
+        display: none;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+      }
+    }
+
+    &.paginate_button.next {
+      &::after {
+        padding-left: 12px;
+      }
+    }
+  }
+}

app/assets/stylesheets/my_modules/shared/layout_overrides.css

@@ -4,8 +4,8 @@
 
 .sci--layout-content {
   background-color: var(--sn-white);
+}
 
-  .content-pane {
 .title-row {
   background-color: var(--sn-white);
 }
@@ -14,12 +14,10 @@
   background-color: var(--sn-white);
   display: flex;
   height: 3rem;
-      padding: 0rem 1rem;
+  padding: 0 1.125rem;
   align-items: center;
   gap: 0.5rem;
   align-self: stretch;
   z-index: 205;
   border-bottom: 1px solid var(--sn-light-grey);
 }
-  }
-}

app/javascript/vue/shareable_links/components/delete_shareable_link.vue

@@ -9,7 +9,7 @@
           </h4>
         </div>
         <div class="modal-body">
-          <p>{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
+          <p class="text-sm">{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
         </div>
         <div class="modal-footer">
           <button class="btn btn-secondary" tabindex="0" @click="cancel">{{ i18n.t('general.cancel') }}</button>

app/javascript/vue/shareable_links/components/shareable_link_modal.vue

@@ -38,7 +38,7 @@
                 <span class="sci-toggle-checkbox-label"></span>
               </span>
             </div>
-            <div>
+            <div class="text-sm">
               <div class="sci-input-container-v2 textarea-lg mb-2">
                 <textarea ref="textarea"
                           tabindex="0"

app/views/layouts/shareable_links.html.erb

@@ -11,6 +11,8 @@
     <%= javascript_include_tag 'jquery_bundle' %>
     <%= javascript_include_tag 'application' %>
     <%= javascript_include_tag 'application_pack' %>
+    <%= stylesheet_link_tag 'datatables' %>
+    <%= stylesheet_link_tag 'my_modules/shared/layout_overrides' %>
 
     <%= favicon_link_tag "favicon.ico" %>
     <%= favicon_link_tag "favicon-16.png", type: "image/png", size: "16x16" %>
@@ -23,7 +25,7 @@
     <%= csrf_meta_tags %>
   </head>
   <body id="sci-shareable-links" data-datetime-picker-format="YYYY-MM-DD">
-    <div class="flex">
+    <div class="flex shareable-links">
       <div class="sticky top-0 w-80 h-screen px-6 py-6 flex flex-col
                   border-0 border-r border-solid border-sn-sleepy-grey">
         <%= render "shareable_links/my_modules/left_navigation" %>

app/views/my_modules/_header_actions.html.erb

@@ -1,13 +1,13 @@
 <div class="header-actions">
   <div class="flex items-center text-bold">
     <% if can_read_experiment?(@my_module.experiment) %>
-      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"
+      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-black" %>"
           href="<%= protocols_my_module_url(@my_module) %>"
           title="<%= t("nav2.modules.steps") %>"
       >
         <%=t "nav2.modules.steps" %>
       </a>
-      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-grey" %>"
+      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-black" %>"
           href="<%= results_my_module_url(@my_module) %>"
           title="<%= t("nav2.modules.results") %>"
       >
@@ -17,7 +17,7 @@
           <sup class="navigation-results-counter"><%= @my_module.archived_branch? ? @my_module.results.size : @active_results_size %></sup>
         <% end %>
       </a>
-      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_activities? ? "text-sn-blue" : "text-sn-grey" %>"
+      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_activities? ? "text-sn-blue" : "text-sn-black" %>"
           href="<%= activities_my_module_url(@my_module, view_mode: params[:view_mode]) %>"
           title="<%= t("nav2.modules.activities") %>"
       >
@@ -27,7 +27,7 @@
 
     <div data-hook="secondary-navigation-tabs"></div>
     <% if can_read_experiment?(@my_module.experiment) && !@my_module.archived_branch? %>
-      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_archive? ? "text-sn-blue" : "text-sn-grey" %>"
+      <a class="p-4 border-b-4 border-transparent hover:no-underline first-letter:capitalize <%= is_module_archive? ? "text-sn-blue" : "text-sn-black" %>"
           href="<%= archive_my_module_url(@my_module) %>"
           title="<%= t'nav2.modules.archive' %>"
       >

app/views/shareable_links/my_module_protocol_show.html.erb

@@ -2,7 +2,7 @@
   <span class="inline-block whitespace-nowrap mr-1">
     <%= t "labels.archived" if @my_module.archived? %>
   </span>
-  <span class="inline-block truncate w-[calc(100vw-27rem)]" title="<%= @my_module.name %>">
+  <span class="inline-block truncate module-name" title="<%= @my_module.name %>">
     <%= @my_module.name %>
   </span>
 </div>

app/views/shareable_links/my_module_results_show.html.erb

@@ -1,8 +1,15 @@
-<div class="text-3xl font-semibold"><%= @my_module.name %></div>
+<div class="text-3xl font-semibold flex flex-row flex-nowrap">
+  <span class="inline-block whitespace-nowrap mr-1">
+  </span>
+  <span class="inline-block truncate module-name" title="<%= @my_module.name %>">
+    <%= @my_module.name %>
+  </span>
+</div>
 
-<div class="px-4 my-5 flex-1 bg-sn-white">
+<div class="my-5 flex-1 bg-sn-white">
   <div class="content-pane flexible">
     <%= render partial: 'shareable_links/my_modules/header_actions' %>
+    <div class="px-4">
       <div class="mt-5" id="results-toolbar">
         <div class="sci-btn-group collapse-expand-result">
           <button class="btn btn-light" id="results-collapse-btn">
@@ -28,7 +35,6 @@
           </ul>
         </div>
       </div>
-
       <div id="results">
         <% @results.each do |result| %>
           <%= render partial: "shareable_links/my_modules/results/result", locals: { result: result, gallery: @gallery } %>
@@ -37,6 +43,7 @@
       <div class="kaminari-pagination">
         <%= paginate @results, outer_window: 1, window: 1 %>
       </div>
+    </div>
 
   </div>
 </div>

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

@@ -1,11 +1,12 @@
+<div class="header-actions">
   <div class="flex items-center uppercase">
-  <a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-grey" %>"
+    <a class="px-4 py-3  border-b-4 border-transparent hover:no-underline capitalize <%= is_module_protocols? ? "text-sn-blue" : "text-sn-black" %>"
         href="<%= shared_protocol_url(@shareable_link.uuid) %>"
         title="<%= t("nav2.modules.steps") %>"
     >
       <%= t("nav2.modules.steps") %>
     </a>
-  <a class="p-4 border-b-4 border-transparent hover:no-underline capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-grey" %>"
+    <a class="px-4 py-3  border-b-4 border-transparent hover:no-underline capitalize <%= is_module_results? ? "text-sn-blue" : "text-sn-black" %>"
         href="<%= shared_protocol_results_path(@shareable_link.uuid) %>"
         title="<%= t("nav2.modules.results") %>"
     >
@@ -16,3 +17,4 @@
       <% end %>
     </a>
   </div>
+</div>

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

@@ -9,7 +9,9 @@
       </div>
       <div class="modal-body">
         <p class="text-sm"><%= t("shareable_links.welcome_modal.description", my_module: @my_module.name)%></p>
+        <% if @shareable_link.description.present? %>
           <p class="text-sm"><%= @shareable_link.description %></p>
+        <% end %>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-primary" data-dismiss="modal"><%= t("shareable_links.welcome_modal.view_task_btn")%></button>

app/views/users/settings/teams/_destroy_tasks_sharing_modal.html.erb

@@ -6,8 +6,8 @@
         <h4 class="modal-title" id="team-sharing-tasks-label"><%= t("users.settings.teams.show.tasks_share.disable_modal.title") %></h4>
       </div>
       <div class="modal-body">
-        <p><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p1", team_name: @team.name) %></p>
+        <p class='text-sm'><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p1", team_name: @team.name) %></p>
-        <p><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p2", counter: @team.number_of_task_shared) %></p>
+        <p class='text-sm'><%= t("users.settings.teams.show.tasks_share.disable_modal.description_p2", counter: @team.number_of_task_shared) %></p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal"><%= t('general.cancel') %></button>