Merge branch 'responsive-sidebar' into 'master'

Responsive sidebar fixes

This fixes two major issues with the responsive sidebar

1. Overlapping content by the label:
The label and sidebar is now always on the right side of the screen. This makes it always easy to find (better UX) and prevents it from overlapping most content. Additionally, on xs screens, instead of the side-attached label, for some pages it will show an extra button in the head instead of a buttons that overlaps.

2. Pop up of sidebar on changing pages.

11 files changed, 38 insertions, 39 deletions

diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index e4a8cc6a4b0..c084d730d62 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -2,18 +2,13 @@ responsive_resize = ->
   current_width = $(window).width()
   if current_width < 985
     $('.responsive-side').addClass("ui right wide sidebar")
-    $('.responsive-side-left').addClass("ui left sidebar")
   else
     $('.responsive-side').removeClass("ui right wide sidebar")
-    $('.responsive-side-left').removeClass("ui left sidebar")
 
 $ ->
   # Depending on window size, set the sidebar offscreen.
   responsive_resize()
 
-  $('.ui.sidebar')
-    .sidebar()
-
   $('.sidebar-expand-button').click ->
     $('.ui.sidebar')
       .sidebar({overlay: true})
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
index 7d93db3cf90..f6311ef74e8 100644
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -5,17 +5,19 @@
   width: 285px;
 }
 
-.ui.left.sidebar {
-  border-right: 1px solid #e1e1e1;
-  border-left: 0;
-}
-
 .ui.right.sidebar {
   border-left: 1px solid #e1e1e1;
   border-right: 0;
 }
 
 .sidebar-expand-button {
+  cursor: pointer;
+  transition: all 0.4s;
+  -moz-transition: all 0.4s;
+  -webkit-transition: all 0.4s;
+}
+
+.fixed.sidebar-expand-button {
   background: #f9f9f9;
   color: #555;
   padding: 9px 12px 6px 14px;
@@ -25,11 +27,6 @@
   top: 108px;
   right: 0px;
   margin-right: 0;
-  cursor: pointer;
-  transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -webkit-transition: all 0.4s;
-
   &:hover {
     background: #ddd;
     color: #333;
@@ -37,13 +34,13 @@
   }
 }
 
-.left.sidebar-expand-button {
-  left: 0px;
-  right: auto;
-  border: 1px solid #E1E1E1;
-  border-left: 0;
-  &:hover {
-    padding-right: 14px;
-    padding-left: 25px;
-  }
+.btn.btn-default.sidebar-expand-button {
+  margin-left: 12px;
+  display: inline-block !important;
+}
+
+@media (min-width: 767px) {
+.btn.btn-default.sidebar-expand-button {
+  display: none!important;
+ }
 }
diff --git a/app/views/dashboard/issues.html.haml b/app/views/dashboard/issues.html.haml
index 670755b8996..9888da2f7f2 100644
--- a/app/views/dashboard/issues.html.haml
+++ b/app/views/dashboard/issues.html.haml
@@ -7,9 +7,9 @@
 %hr
 
 .row
-  .left.sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.sidebar-expand-button.hidden-lg.hidden-md
     %i.icon-list.icon-2x
-  .col-md-3.responsive-side-left
+  .col-md-3.responsive-side
     = render 'shared/filter', entity: 'issue'
   .col-md-9
     = render 'shared/issues'
diff --git a/app/views/dashboard/merge_requests.html.haml b/app/views/dashboard/merge_requests.html.haml
index 0a87eedaecc..ee3bec2849d 100644
--- a/app/views/dashboard/merge_requests.html.haml
+++ b/app/views/dashboard/merge_requests.html.haml
@@ -7,9 +7,9 @@
   List all merge requests from all projects you have access to.
 %hr
 .row
-  .left.sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.sidebar-expand-button.hidden-lg.hidden-md
     %i.icon-list.icon-2x
-  .col-md-3.responsive-side-left
+  .col-md-3.responsive-side
     = render 'shared/filter', entity: 'merge_request'
   .col-md-9
     = render 'shared/merge_requests'
diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml
index b81eed76001..306b71717ef 100644
--- a/app/views/dashboard/show.html.haml
+++ b/app/views/dashboard/show.html.haml
@@ -5,7 +5,7 @@
     .side.col-md-4.left.responsive-side
       = render 'sidebar'
 
-  .sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.sidebar-expand-button.hidden-lg.hidden-md
     %i.icon-list.icon-2x
 
 - else
diff --git a/app/views/groups/issues.html.haml b/app/views/groups/issues.html.haml
index 7c6042b8ba3..0eec2d6be0b 100644
--- a/app/views/groups/issues.html.haml
+++ b/app/views/groups/issues.html.haml
@@ -11,9 +11,9 @@
 %hr
 
 .row
-  .left.sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.sidebar-expand-button.hidden-lg.hidden-md
     %i.icon-list.icon-2x
-  .col-md-3.responsive-side-left
+  .col-md-3.responsive-side
     = render 'shared/filter', entity: 'issue'
   .col-md-9
     = render 'shared/issues'
diff --git a/app/views/groups/merge_requests.html.haml b/app/views/groups/merge_requests.html.haml
index 817790f06ce..71adb2c5516 100644
--- a/app/views/groups/merge_requests.html.haml
+++ b/app/views/groups/merge_requests.html.haml
@@ -10,9 +10,9 @@
     To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
 %hr
 .row
-  .left.sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.sidebar-expand-button.hidden-lg.hidden-md
     %i.icon-list.icon-2x
-  .col-md-3.responsive-side-left
+  .col-md-3.responsive-side
     = render 'shared/filter', entity: 'merge_request'
   .col-md-9
     = render 'shared/merge_requests'
diff --git a/app/views/projects/issues/_head.html.haml b/app/views/projects/issues/_head.html.haml
index f1e866c8e9d..716ea7cefed 100644
--- a/app/views/projects/issues/_head.html.haml
+++ b/app/views/projects/issues/_head.html.haml
@@ -9,6 +9,11 @@
   = nav_link(controller: :labels) do
     = link_to 'Labels', project_labels_path(@project), class: "tab"
 
+  - if current_controller?(:milestones)
+    %li.pull-right
+      %button.btn.btn-default.sidebar-expand-button
+        %i.icon.icon-list
+
   - if current_controller?(:issues)
     - if current_user
       %li
@@ -17,6 +22,8 @@
 
     %li.pull-right
       .pull-right
+        %button.btn.btn-default.sidebar-expand-button
+          %i.icon.icon-list
         = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form'  do
           .append-right-10.hidden-xs.hidden-sm
             = search_field_tag :issue_search, nil, { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input input-mn-300' }
diff --git a/app/views/projects/issues/index.html.haml b/app/views/projects/issues/index.html.haml
index e527b7bc2c8..2e66d059565 100644
--- a/app/views/projects/issues/index.html.haml
+++ b/app/views/projects/issues/index.html.haml
@@ -1,8 +1,8 @@
 = render "head"
 .row
-  .left.sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.fixed.sidebar-expand-button.hidden-lg.hidden-md.hidden-xs
     %i.icon-list.icon-2x
-  .col-md-3.responsive-side-left
+  .col-md-3.responsive-side
     = render 'shared/project_filter', project_entities_path: project_issues_path(@project),
              labels: true, redirect: 'issues'
   .col-md-9.issues-holder
diff --git a/app/views/projects/merge_requests/index.html.haml b/app/views/projects/merge_requests/index.html.haml
index 919efc5fa16..4bb803eb6df 100644
--- a/app/views/projects/merge_requests/index.html.haml
+++ b/app/views/projects/merge_requests/index.html.haml
@@ -7,9 +7,9 @@
   %span (#{@merge_requests.total_count})
 %hr
 .row
-  .left.sidebar-expand-button.hidden-lg.hidden-md
+  .fixed.sidebar-expand-button.hidden-lg.hidden-md
     %i.icon-list.icon-2x
-  .col-md-3.responsive-side-left
+  .col-md-3.responsive-side
     = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
              labels: true, redirect: 'merge_requests'
   .col-md-9
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 4b44d68a919..f0e48a51777 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/app/views/projects/milestones/index.html.haml
@@ -8,9 +8,9 @@
         New Milestone
 
   .row
-    .left.sidebar-expand-button.hidden-lg.hidden-md
+    .fixed.sidebar-expand-button.hidden-lg.hidden-md.hidden-xs
       %i.icon-list.icon-2x
-    .col-md-3.responsive-side-left
+    .col-md-3.responsive-side
       %ul.nav.nav-pills.nav-stacked
         %li{class: ("active" if (params[:f] == "active" || !params[:f]))}
           = link_to project_milestones_path(@project, f: "active") do