move all sidebars to one side for improved UX; add button in head of...

move all sidebars to one side for improved UX; add button in head of projects/issues and milestones instead of tab on side of screen to prevent overlapping of content

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})

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;
  }
 }

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'

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'

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

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'

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'

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' }

app/views/projects/issues/index.html.haml

 = 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

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

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