Merge branch 'fix-explore-projects' into 'master'

Improve UI for explore projects page

Move visibility and tags filter inline with navigation links

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

cc @jschatz1 @skyruler 

See merge request !3079

3 files changed, 42 insertions, 39 deletions

diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index d24faa897a1..7de874c8bcd 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -79,6 +79,10 @@
     > .dropdown {
       margin-right: $gl-padding-top;
       display: inline-block;
+
+      &:last-child {
+        margin-right: 0;
+      }
     }
 
     > .btn {
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index c248dbb695f..39e3e8e2738 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,41 +1,40 @@
-.pull-right.hidden-sm.hidden-xs
-  - if current_user
-    .dropdown.inline.append-right-10
-      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-        %i.fa.fa-globe
-        %span.light Visibility:
-        - if params[:visibility_level].present?
-          = visibility_level_label(params[:visibility_level].to_i)
-        - else
+- if current_user
+  .dropdown
+    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+      = icon('globe')
+      %span.light Visibility:
+      - if params[:visibility_level].present?
+        = visibility_level_label(params[:visibility_level].to_i)
+      - else
+        Any
+      %b.caret
+    %ul.dropdown-menu
+      %li
+        = link_to explore_projects_filter_path(visibility_level: nil) do
           Any
-        %b.caret
-      %ul.dropdown-menu
-        %li
-          = link_to explore_projects_filter_path(visibility_level: nil) do
-            Any
-        - Gitlab::VisibilityLevel.values.each do |level|
-          %li{ class: (level.to_s == params[:visibility_level]) ? 'active' : 'light' }
-            = link_to explore_projects_filter_path(visibility_level: level) do
-              = visibility_level_icon(level)
-              = visibility_level_label(level)
+      - Gitlab::VisibilityLevel.values.each do |level|
+        %li{ class: (level.to_s == params[:visibility_level]) ? 'active' : 'light' }
+          = link_to explore_projects_filter_path(visibility_level: level) do
+            = visibility_level_icon(level)
+            = visibility_level_label(level)
 
-  - if @tags.present?
-    .dropdown.inline.append-right-10
-      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-        %i.fa.fa-tags
-        %span.light Tags:
-        - if params[:tag].present?
-          = params[:tag]
-        - else
+- if @tags.present?
+  .dropdown
+    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+      = icon('tags')
+      %span.light Tags:
+      - if params[:tag].present?
+        = params[:tag]
+      - else
+        Any
+      %b.caret
+    %ul.dropdown-menu
+      %li
+        = link_to explore_projects_filter_path(tag: nil) do
           Any
-        %b.caret
-      %ul.dropdown-menu
-        %li
-          = link_to explore_projects_filter_path(tag: nil) do
-            Any
 
-        - @tags.each do |tag|
-          %li{ class: (tag.name == params[:tag]) ? 'active' : 'light' }
-            = link_to explore_projects_filter_path(tag: tag.name) do
-              %i.fa.fa-tag
-              = tag.name
+      - @tags.each do |tag|
+        %li{ class: (tag.name == params[:tag]) ? 'active' : 'light' }
+          = link_to explore_projects_filter_path(tag: tag.name) do
+            %i.fa.fa-tag
+            = tag.name
diff --git a/app/views/explore/projects/index.html.haml b/app/views/explore/projects/index.html.haml
index dca75498573..42b50481b9d 100644
--- a/app/views/explore/projects/index.html.haml
+++ b/app/views/explore/projects/index.html.haml
@@ -9,7 +9,7 @@
 .top-area
   = render 'explore/projects/nav'
 
-.gray-content-block.second-block.clearfix
-  = render 'filter'
+  .nav-controls
+    = render 'filter'
 
 = render 'projects', projects: @projects