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

6 files changed, 21 insertions, 90 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;
-  }
-}