Created helper class to hide content in issue sidebar when collapsed

Closes #13764

app/assets/stylesheets/pages/issuable.scss

@@ -203,14 +203,7 @@
       overflow: hidden;
     }
 
-    .issuable-count,
-    .issuable-nav,
-    .assignee > *,
-    .milestone > *,
-    .labels > *,
-    .participants > *,
-    .light > *,
-    .project-reference > * {
+    .hide-collapsed {
       display: none;
     }
 

app/views/shared/issuable/_participants.html.haml

@@ -3,7 +3,8 @@
     = icon('users')
     %span
       = participants.count
-  .title
+  .title.hide-collapsed
     = pluralize participants.count, "participant"
   - participants.each do |participant|
+    %span.hide-collapsed
       = link_to_member(@project, participant, name: false, size: 24)

app/views/shared/issuable/_sidebar.html.haml

@@ -1,14 +1,14 @@
 %aside.right-sidebar{ class: sidebar_gutter_collapsed_class }
   .issuable-sidebar
     .block
-      %span.issuable-count.pull-left
+      %span.issuable-count.hide-collapsed.pull-left
         = issuable.iid
         of
         = issuables_count(issuable)
       %span.pull-right
         %a.gutter-toggle{href: '#'}
           = sidebar_gutter_toggle_icon
-      .issuable-nav.pull-right.btn-group{role: 'group', "aria-label" => '...'}
+      .issuable-nav.hide-collapsed.pull-right.btn-group{role: 'group', "aria-label" => '...'}
         - if prev_issuable = prev_issuable_for(issuable)
           = link_to 'Prev', [@project.namespace.becomes(Namespace), @project, prev_issuable], class: 'btn btn-default prev-btn'
         - else
@@ -27,13 +27,13 @@
             = link_to_member_avatar(issuable.assignee, size: 24)
           - else
             = icon('user')
-        .title
+        .title.hide-collapsed
           %label
             Assignee
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
             .pull-right
               = link_to 'Edit', '#', class: 'edit-link'
-        .value
+        .value.hide-collapsed
           - if issuable.assignee
             %strong= link_to_member(@project, issuable.assignee, size: 24)
             - if issuable.instance_of?(MergeRequest) && !issuable.can_be_merged_by?(issuable.assignee)
@@ -42,7 +42,7 @@
           - else
             .light None
 
-        .selectbox
+        .selectbox.hide-collapsed
           = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true, first_user: true)
 
       .block.milestone
@@ -53,13 +53,13 @@
               = issuable.milestone.title
             - else
               No
-        .title
+        .title.hide-collapsed
           %label
             Milestone
           - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
             .pull-right
               = link_to 'Edit', '#', class: 'edit-link'
-        .value
+        .value.hide-collapsed
           - if issuable.milestone
             %span.back-to-milestone
               = link_to namespace_project_milestone_path(@project.namespace, @project, issuable.milestone) do
@@ -68,7 +68,7 @@
                   = issuable.milestone.title
           - else
             .light None
-        .selectbox
+        .selectbox.hide-collapsed
           = f.select(:milestone_id, milestone_options(issuable), { include_blank: true }, { class: 'select2 select2-compact js-select2 js-milestone', data: { placeholder: 'Select milestone' }})
           = hidden_field_tag :issuable_context
           = f.submit class: 'btn hide'
@@ -79,18 +79,18 @@
             = icon('tags')
             %span
               = issuable.labels.count
-          .title
+          .title.hide-collapsed
             %label Labels
             - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
               .pull-right
                 = link_to 'Edit', '#', class: 'edit-link'
-          .value.issuable-show-labels
+          .value.issuable-show-labels.hide-collapsed
             - if issuable.labels.any?
               - issuable.labels.each do |label|
                 = link_to_label(label, type: issuable.to_ability_name)
             - else
               .light None
-          .selectbox
+          .selectbox.hide-collapsed
             = f.collection_select :label_ids, issuable.project.labels.all, :id, :name,
               { selected: issuable.label_ids }, multiple: true, class: 'select2 js-select2', data: { placeholder: "Select labels" }
 
@@ -101,12 +101,12 @@
         .block.light
           .sidebar-collapsed-icon
             = icon('rss')
-          .title
+          .title.hide-collapsed
             %label.light Notifications
           - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-          %button.btn.btn-block.btn-gray.subscribe-button{:type => 'button'}
+          %button.btn.btn-block.btn-gray.subscribe-button.hide-collapsed{:type => 'button'}
             %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-          .subscription-status{data: {status: subscribtion_status}}
+          .subscription-status.hide-collapsed{data: {status: subscribtion_status}}
             .unsubscribed{class: ( 'hidden' if subscribed )}
               You're not receiving notifications from this thread.
             .subscribed{class: ( 'hidden' unless subscribed )}
@@ -116,8 +116,7 @@
       .block.project-reference
         .sidebar-collapsed-icon
           = clipboard_button(clipboard_text: project_ref)
-        .title
-        .cross-project-reference
+        .cross-project-reference.hide-collapsed
           %span
             Reference:
             %cite{title: project_ref}