Merge branch '54386-integrate-mobile-css-framework-into-specific-frameworks' into 'master'

Integrate mobile CSS framework into specific frameworks

Closes #54386

See merge request gitlab-org/gitlab-ce!23301

13 files changed, 29 insertions, 98 deletions

diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue
index 08408eb0b52..defd857b92c 100644
--- a/app/assets/javascripts/boards/components/modal/empty_state.vue
+++ b/app/assets/javascripts/boards/components/modal/empty_state.vue
@@ -45,7 +45,7 @@ export default {
   <section class="empty-state">
     <div class="row">
       <div class="col-12 col-md-6 order-md-last">
-        <aside class="svg-content"><img :src="emptyStateSvg" /></aside>
+        <aside class="svg-content d-none d-md-block"><img :src="emptyStateSvg" /></aside>
       </div>
       <div class="col-12 col-md-6 order-md-first">
         <div class="text-content">
diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 834e7ffce81..62d471bc30c 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -31,7 +31,6 @@
 @import 'framework/logo';
 @import 'framework/markdown_area';
 @import 'framework/media_object';
-@import 'framework/mobile';
 @import 'framework/modal';
 @import 'framework/pagination';
 @import 'framework/panels';
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 7d283dcfb71..5574873fa22 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -597,3 +597,11 @@
     @include emoji-menu-toggle-button;
   }
 }
+
+.nav-links > li > a {
+  .badge.badge-pill {
+    @include media-breakpoint-down(xs) { display: none; }
+  }
+
+  @include media-breakpoint-down(xs) { margin-right: 3px; }
+}
diff --git a/app/assets/stylesheets/framework/layout.scss b/app/assets/stylesheets/framework/layout.scss
index 9218df9b40f..97cb9d90ff0 100644
--- a/app/assets/stylesheets/framework/layout.scss
+++ b/app/assets/stylesheets/framework/layout.scss
@@ -40,6 +40,14 @@ body {
 
   .content {
     margin: 0;
+
+    @include media-breakpoint-down(xs) { margin-top: 20px; }
+  }
+
+  @include media-breakpoint-down(xs) {
+    .container .title {
+      padding-left: 15px !important;
+    }
   }
 }
 
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index 5609a2086e6..c674d4c23ea 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -307,4 +307,8 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
+  .referenced-users {
+    margin-right: 0;
+  }
 }
diff --git a/app/assets/stylesheets/framework/mobile.scss b/app/assets/stylesheets/framework/mobile.scss
deleted file mode 100644
index 3bb046d0e51..00000000000
--- a/app/assets/stylesheets/framework/mobile.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/** Common mobile (screen XS, SM) styles **/
-@include media-breakpoint-down(xs) {
-  .container .content {
-    margin-top: 20px;
-  }
-
-  .nav-links > li > a {
-    padding: 10px;
-    font-size: 12px;
-    margin-right: 3px;
-
-    .badge.badge-pill {
-      display: none;
-    }
-  }
-
-  .referenced-users {
-    margin-right: 0;
-  }
-
-  .issues-details-filters:not(.filtered-search-block),
-  .dash-projects-filters,
-  .check-all-holder {
-    display: none;
-  }
-
-  .rss-btn {
-    display: none;
-  }
-
-  .project-home-links {
-    display: none;
-  }
-
-  .project-home-panel {
-    padding-left: 0 !important;
-
-    .project-repo-buttons,
-    .git-clone-holder {
-      display: none;
-    }
-  }
-
-  .group-buttons {
-    display: none;
-  }
-
-  .container .title {
-    padding-left: 15px !important;
-  }
-
-  .nav-links,
-  .nav-links {
-    li a {
-      font-size: 14px;
-      padding: 19px 10px;
-    }
-  }
-
-  .activity-filter-block {
-    display: none;
-  }
-
-  .projects-search-form {
-    .btn {
-      display: none;
-    }
-  }
-}
-
-@include media-breakpoint-down(sm) {
-  .issues-filters {
-    .milestone-filter {
-      display: none;
-    }
-  }
-
-  .page-title {
-    .note-created-ago,
-    .new-issue-link {
-      display: none;
-    }
-  }
-
-  aside:not(.right-sidebar) {
-    display: none;
-  }
-}
diff --git a/app/views/dashboard/_activities.html.haml b/app/views/dashboard/_activities.html.haml
index 9c246e19faa..4359a2c3c2b 100644
--- a/app/views/dashboard/_activities.html.haml
+++ b/app/views/dashboard/_activities.html.haml
@@ -1,7 +1,7 @@
 .nav-block.activities
   = render 'shared/event_filter'
   .controls
-    = link_to dashboard_projects_path(rss_url_options), class: 'btn rss-btn has-tooltip', title: 'Subscribe' do
+    = link_to dashboard_projects_path(rss_url_options), class: 'btn d-none d-sm-inline-block has-tooltip', title: 'Subscribe' do
       %i.fa.fa-rss
 
 .content_list
diff --git a/app/views/groups/_activities.html.haml b/app/views/groups/_activities.html.haml
index 82a497289f3..13df1e57125 100644
--- a/app/views/groups/_activities.html.haml
+++ b/app/views/groups/_activities.html.haml
@@ -1,7 +1,7 @@
 .nav-block.activities
   = render 'shared/event_filter'
   .controls
-    = link_to group_path(@group, rss_url_options), class: 'btn rss-btn has-tooltip' , title: 'Subscribe' do
+    = link_to group_path(@group, rss_url_options), class: 'btn d-none d-sm-inline-block has-tooltip' , title: 'Subscribe' do
       %i.fa.fa-rss
 
 .content_list
diff --git a/app/views/groups/_home_panel.html.haml b/app/views/groups/_home_panel.html.haml
index 6219da2c715..88e401081f4 100644
--- a/app/views/groups/_home_panel.html.haml
+++ b/app/views/groups/_home_panel.html.haml
@@ -12,6 +12,6 @@
         = markdown_field(@group, :description)
 
     - if current_user
-      .group-buttons
+      .group-buttons.d-none.d-sm-block
         = render 'shared/members/access_request_buttons', source: @group
         = render 'shared/notifications/button', notification_setting: @notification_setting
diff --git a/app/views/projects/_activity.html.haml b/app/views/projects/_activity.html.haml
index 6bf21570d41..31f1cf560e2 100644
--- a/app/views/projects/_activity.html.haml
+++ b/app/views/projects/_activity.html.haml
@@ -1,8 +1,8 @@
 %div{ class: container_class }
-  .nav-block.activity-filter-block.activities
+  .nav-block.d-none.d-sm-block.activities
     = render 'shared/event_filter'
     .controls
-      = link_to project_path(@project, rss_url_options), title: s_("ProjectActivityRSS|Subscribe"), class: 'btn rss-btn has-tooltip' do
+      = link_to project_path(@project, rss_url_options), title: s_("ProjectActivityRSS|Subscribe"), class: 'btn d-none d-sm-inline-block has-tooltip' do
         = icon('rss')
 
   .content_list.project-activity{ :"data-href" => activity_project_path(@project) }
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 8c2fe2625c7..f048fb91304 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -55,7 +55,7 @@
     - if can_report_spam
       = link_to 'Submit as spam', mark_as_spam_project_issue_path(@project, @issue), method: :post, class: 'd-none d-sm-none d-md-block btn btn-grouped btn-spam', title: 'Submit as spam'
     - if can_create_issue
-      = link_to new_project_issue_path(@project), class: 'd-none d-sm-none d-md-block btn btn-grouped new-issue-link btn-success btn-inverted', title: 'New issue', id: 'new_issue_link' do
+      = link_to new_project_issue_path(@project), class: 'd-none d-sm-none d-md-block btn btn-grouped btn-success btn-inverted', title: 'New issue', id: 'new_issue_link' do
         New issue
 
 .issue-details.issuable-details
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index 026bc44a05f..458096f9dd6 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -27,7 +27,7 @@
       - if can?(current_user, :push_code, @project)
         = link_to new_project_tag_path(@project), class: 'btn btn-success new-tag-btn' do
           = s_('TagsPage|New tag')
-      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn rss-btn has-tooltip' do
+      = link_to project_tags_path(@project, rss_url_options), title: _("Tags feed"), class: 'btn d-none d-sm-inline-block has-tooltip' do
         = icon("rss")
 
   = render_if_exists 'projects/commits/mirror_status'
diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml
index 46634693067..20847378495 100644
--- a/app/views/shared/issuable/_search_bar.html.haml
+++ b/app/views/shared/issuable/_search_bar.html.haml
@@ -11,7 +11,7 @@
       - if params[:search].present?
         = hidden_field_tag :search, params[:search]
       - if @can_bulk_update
-        .check-all-holder.hidden
+        .check-all-holder.d-none.d-sm-block.hidden
           = check_box_tag "check-all-issues", nil, false, class: "check-all-issues left"
       .issues-other-filters.filtered-search-wrapper
         .filtered-search-box