Convert boards.scss into page specific bundle

Make ce boards.scss page specific
Copy across epics.scss drag & drop CSS
Create page specific issues.scss for drag & drop style

app/assets/javascripts/boards/components/board_list_header.vue

@@ -188,7 +188,7 @@ export default {
     <h3
       :class="{
         'user-can-drag': !disabled && !list.preset,
-        'gl-py-3 gl-h-full': !list.isExpanded && !isSwimlanesHeader,
+        'gl-py-3 gl-h-full!': !list.isExpanded && !isSwimlanesHeader,
         'gl-border-b-0': !list.isExpanded || isSwimlanesHeader,
         'gl-py-2': !list.isExpanded && isSwimlanesHeader,
       }"

app/assets/stylesheets/_page_specific_files.scss

 @import './pages/admin';
 @import './pages/alert_management/details';
 @import './pages/alert_management/severity-icons';
-@import './pages/boards';
 @import './pages/branches';
 @import './pages/builds';
 @import './pages/ci_projects';

app/assets/stylesheets/pages/boards.scss → app/assets/stylesheets/page_bundles/boards.scss

+@import 'mixins_and_variables_and_functions';
+
 .user-can-drag {
   cursor: grab;
 }
@@ -356,8 +358,6 @@
   }
 
   .avatar {
-    margin: 0;
-
     @include media-breakpoint-down(md) {
       width: $gl-padding;
       height: $gl-padding;

app/assets/stylesheets/page_bundles/issues.scss

+.user-can-drag {
+  cursor: grab;
+}
+
+.is-ghost {
+  opacity: 0.3;
+  pointer-events: none;
+}

app/views/projects/issues/index.html.haml

@@ -2,6 +2,7 @@
 
 - page_title _("Issues")
 - new_issue_email = @project.new_issuable_address(current_user, 'issue')
+= stylesheet_link_tag 'page_bundles/issues'
 
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, safe_params.merge(rss_url_options).to_h, title: "#{@project.name} issues")

app/views/projects/issues/show.html.haml

@@ -10,6 +10,7 @@
 - can_report_spam = @issue.submittable_as_spam_by?(current_user)
 - can_create_issue = show_new_issue_link?(@project)
 - related_branches_path = related_branches_project_issue_path(@project, @issue)
+= stylesheet_link_tag 'page_bundles/issues'
 
 = render_if_exists "projects/issues/alert_blocked", issue: @issue, current_user: current_user
 = render "projects/issues/alert_moved_from_service_desk", issue: @issue

app/views/shared/boards/_show.html.haml

@@ -8,6 +8,7 @@
 - @content_class = "issue-boards-content js-focus-mode-board"
 - breadcrumb_title _("Issue Boards")
 - page_title("#{board.name}", _("Boards"))
+= stylesheet_link_tag 'page_bundles/boards'
 
 - content_for :page_specific_javascripts do
 

config/application.rb

@@ -184,7 +184,9 @@ module Gitlab
     config.assets.precompile << "notify.css"
     config.assets.precompile << "mailers/*.css"
     config.assets.precompile << "page_bundles/_mixins_and_variables_and_functions.css"
+    config.assets.precompile << "page_bundles/boards.css"
     config.assets.precompile << "page_bundles/ide.css"
+    config.assets.precompile << "page_bundles/issues.css"
     config.assets.precompile << "page_bundles/jira_connect.css"
     config.assets.precompile << "page_bundles/todos.css"
     config.assets.precompile << "page_bundles/xterm.css"

ee/app/assets/javascripts/boards/components/issues_lane_list.vue

@@ -140,7 +140,7 @@ export default {
 
 <template>
   <div
-    class="board gl-px-3 gl-vertical-align-top gl-white-space-normal gl-display-flex gl-flex-shrink-0"
+    class="board gl-px-3 gl-vertical-align-top gl-white-space-normal gl-display-flex! gl-flex-shrink-0"
     :class="{ 'is-collapsed': !list.isExpanded }"
   >
     <div class="board-inner gl-rounded-base gl-relative gl-w-full">

ee/app/assets/stylesheets/pages/epics.scss

@@ -12,6 +12,11 @@
   }
 }
 
+.is-ghost {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
 .epic-discussion-separator {
   border-color: $border-color;
 }