Expose project IDs in tables & cards view [SCI-7172] [SCI-7173]

app/assets/javascripts/projects/index.js

@@ -517,7 +517,13 @@ var ProjectsIndex = (function() {
 
     $(projectsPageSelector)
       .on('ajax:success', '.change-projects-view-type-form', function(ev, data) {
-        $(cardsWrapper).removeClass('list').addClass(data.cards_view_type_class);
+        // $(cardsWrapper).removeClass('list').addClass(data.cards_view_type_class);
+        if (data.cards_view_type_class =='list') {
+          $(cardsWrapper).removeClass('cards').addClass(data.cards_view_type_class);
+        }
+        else if (data.cards_view_type_class =='cards') {
+          $(cardsWrapper).removeClass('list').addClass(data.cards_view_type_class);
+        }
         $(projectsPageSelector).find('.cards-switch .button-to').removeClass('selected');
         $(ev.target).find('.button-to').addClass('selected');
         $(ev.target).parents('.dropdown.view-switch').removeClass('open');

app/assets/stylesheets/projects.scss

@@ -682,25 +682,24 @@ li.module-hover {
           }
         }
 
+        
         &.project-card {
           border-radius: 4px;
           box-shadow: $flyout-shadow;
-
+          
           .project-name-cell {
             align-items: center;
             display: flex;
-            height: 2em;
-            margin: 0 1.75em;
             overflow: hidden;
+            margin-left: -55px;
+            margin-top: 10px;
+            
 
             a {
               color: inherit;
-              overflow: hidden;
-              white-space: nowrap;
             }
 
             .name {
-              line-height: 2em;
               margin: 0;
               overflow: hidden;
               text-overflow: ellipsis;
@@ -902,7 +901,7 @@ li.module-hover {
             }
 
             .name {
-              grid-column: 5 span;
+              grid-column: 6 span;
               line-height: 3em;
 
               &:before {
@@ -1057,7 +1056,7 @@ li.module-hover {
           .card {
             &.folder-card {
               .name {
-                grid-column: 6 span;
+                grid-column: 7 span;
               }
             }
 
@@ -1086,3 +1085,48 @@ li.module-hover {
     margin: 1em 0;
   }
 }
+
+
+
+
+
+.cards-wrapper.last-page.cards {
+  grid-gap: 25px;
+
+  .project-card {
+    .project-name-cell {
+      position: relative;
+      top: 12%;
+      
+      a {
+        color: inherit;
+      }
+      
+      .name {
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        max-width: 200px;
+      }
+    }
+
+    .project-code-cell {
+      position: relative;
+      padding-left: 10%;
+      margin-top:4px;
+      height: min-content;
+    }
+
+    .data-row {
+      position: relative;
+      top: 5%;
+      .card-label {
+        color: gray !important;
+      }
+    }
+    
+
+  
+  }
+}

app/helpers/cards_view_helper.rb

@@ -2,6 +2,6 @@
 
 module CardsViewHelper
   def cards_view_type_class(view_type)
-    view_type == 'table' ? 'list' : ''
+    view_type == 'table' ? 'list' : 'cards'
   end
 end

app/views/projects/index.html.erb

@@ -17,7 +17,7 @@
   <%= render partial: 'projects/index/modals/export_projects' %>
 
   <div class="projects-container">
-    <div class="cards-wrapper <%= cards_view_type_class(@current_view_type) %>"
+    <div class="cards-wrapper last-page list"
          id="cardsWrapper"
          data-projects-cards-url="<%= @current_folder ? project_folder_cards_url(@current_folder) : cards_projects_url %>">
       <div class="table-header">

app/views/projects/index/_project_card.html.erb

@@ -11,6 +11,10 @@
       <span class="sci-checkbox-label"></span>
     </div>
   </div>
+    <div class="project-code-cell table-cell">
+    <span><%= project.code %></span>
+  </div>
+  
   <div class="project-name-cell table-cell">
     <% if project.archived? %>
       <%= link_to project_url(project, view_mode: :archived) do %>
@@ -30,9 +34,7 @@
     <%= render partial: 'projects/index/project_actions_dropdown.html.erb', locals: { project: project, view: 'cards' } %>
   </div>
 
-  <div class="project-code-cell table-cell">
-    <span><%= project.code %></span>
-  </div>
+
 
   <div class="data-row start-date-cell table-cell">
     <span class="card-label"><%= t('projects.index.card.start_date') %></span>