Resolve "Add dropdown to Groups link in top bar"

3 files changed, 67 insertions, 47 deletions

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 74475daae14..c7b5e22c33d 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -36,7 +36,7 @@
       width: 100%;
     }
 
-    &.projects-dropdown-menu {
+    &.frequent-items-dropdown-menu {
       padding: 0;
       overflow-y: initial;
       max-height: initial;
@@ -790,6 +790,7 @@
 @include media-breakpoint-down(xs) {
   .navbar-gitlab {
     li.header-projects,
+    li.header-groups,
     li.header-more,
     li.header-new,
     li.header-user {
@@ -813,18 +814,18 @@
   }
 }
 
-header.header-content .dropdown-menu.projects-dropdown-menu {
+header.header-content .dropdown-menu.frequent-items-dropdown-menu {
   padding: 0;
 }
 
-.projects-dropdown-container {
+.frequent-items-dropdown-container {
   display: flex;
   flex-direction: row;
   width: 500px;
   height: 334px;
 
-  .project-dropdown-sidebar,
-  .project-dropdown-content {
+  .frequent-items-dropdown-sidebar,
+  .frequent-items-dropdown-content {
     padding: 8px 0;
   }
 
@@ -832,12 +833,12 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     color: $almost-black;
   }
 
-  .project-dropdown-sidebar {
+  .frequent-items-dropdown-sidebar {
     width: 30%;
     border-right: 1px solid $border-color;
   }
 
-  .project-dropdown-content {
+  .frequent-items-dropdown-content {
     position: relative;
     width: 70%;
   }
@@ -848,33 +849,35 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     height: auto;
     flex: 1;
 
-    .project-dropdown-sidebar,
-    .project-dropdown-content {
+    .frequent-items-dropdown-sidebar,
+    .frequent-items-dropdown-content {
       width: 100%;
     }
 
-    .project-dropdown-sidebar {
+    .frequent-items-dropdown-sidebar {
       border-bottom: 1px solid $border-color;
       border-right: 0;
     }
   }
 
-  .projects-list-frequent-container,
-  .projects-list-search-container {
+  .section-header,
+  .frequent-items-list-container li.section-empty {
+    padding: 0 $gl-padding;
+    color: $gl-text-color-secondary;
+    font-size: $gl-font-size;
+  }
+
+  .frequent-items-list-container {
     padding: 8px 0;
     overflow-y: auto;
 
     li.section-empty.section-failure {
       color: $callout-danger-color;
     }
-  }
 
-  .section-header,
-  .projects-list-frequent-container li.section-empty,
-  .projects-list-search-container li.section-empty {
-    padding: 0 15px;
-    color: $gl-text-color-secondary;
-    font-size: $gl-font-size;
+    .frequent-items-list-item-container a {
+      display: flex;
+    }
   }
 
   .search-input-container {
@@ -894,12 +897,12 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
     margin-top: 8px;
   }
 
-  .projects-list-search-container {
+  .frequent-items-search-container {
     height: 284px;
   }
 
   @include media-breakpoint-down(xs) {
-    .projects-list-frequent-container {
+    .frequent-items-list-container {
       width: auto;
       height: auto;
       padding-bottom: 0;
@@ -907,32 +910,38 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   }
 }
 
-.projects-list-item-container {
-  .project-item-avatar-container .project-item-metadata-container {
+.frequent-items-list-item-container {
+  .frequent-items-item-avatar-container,
+  .frequent-items-item-metadata-container {
     float: left;
   }
 
-  .project-title,
-  .project-namespace {
+  .frequent-items-item-metadata-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .frequent-items-item-title,
+  .frequent-items-item-namespace {
     max-width: 250px;
-    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &:hover {
-    .project-item-avatar-container .avatar {
+    .frequent-items-item-avatar-container .avatar {
       border-color: $md-area-border;
     }
   }
 
-  .project-title {
+  .frequent-items-item-title {
     font-size: $gl-font-size;
     font-weight: 400;
     line-height: 16px;
   }
 
-  .project-namespace {
+  .frequent-items-item-namespace {
     margin-top: 4px;
     font-size: 12px;
     line-height: 12px;
@@ -940,7 +949,7 @@ header.header-content .dropdown-menu.projects-dropdown-menu {
   }
 
   @include media-breakpoint-down(xs) {
-    .project-item-metadata-container {
+    .frequent-items-item-metadata-container {
       float: none;
     }
   }
diff --git a/app/assets/stylesheets/framework/gitlab_theme.scss b/app/assets/stylesheets/framework/gitlab_theme.scss
index aaa8bed3df0..dff6bce370f 100644
--- a/app/assets/stylesheets/framework/gitlab_theme.scss
+++ b/app/assets/stylesheets/framework/gitlab_theme.scss
@@ -29,15 +29,21 @@
     .navbar-sub-nav,
     .navbar-nav {
       > li {
-        > a:hover,
-        > a:focus {
-          background-color: rgba($search-and-nav-links, 0.2);
+        > a,
+        > button {
+          &:hover,
+          &:focus {
+            background-color: rgba($search-and-nav-links, 0.2);
+          }
         }
 
-        &.active > a,
-        &.dropdown.show > a {
-          color: $nav-svg-color;
-          background-color: $color-alternate;
+        &.active,
+        &.dropdown.show {
+          > a,
+          > button {
+            color: $nav-svg-color;
+            background-color: $color-alternate;
+          }
         }
 
         &.line-separator {
@@ -147,7 +153,6 @@
     }
   }
 
-
   // Sidebar
   .nav-sidebar li.active {
     box-shadow: inset 4px 0 0 $border-and-box-shadow;
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 8bcaf5eb6ac..2097bcebf69 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -269,14 +269,8 @@
 .navbar-sub-nav,
 .navbar-nav {
   > li {
-    > a:hover,
-    > a:focus {
-      text-decoration: none;
-      outline: 0;
-      color: $white-light;
-    }
-
-    > a {
+    > a,
+    > button {
       display: -webkit-flex;
       display: flex;
       align-items: center;
@@ -288,6 +282,18 @@
       border-radius: $border-radius-default;
       height: 32px;
       font-weight: $gl-font-weight-bold;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        outline: 0;
+        color: $white-light;
+      }
+    }
+
+    > button {
+      background: transparent;
+      border: 0;
     }
 
     &.line-separator {
@@ -311,7 +317,7 @@
     font-size: 10px;
   }
 
-  .project-item-select-holder {
+  .frequent-items-item-select-holder {
     display: inline;
   }