Commit 204fee4f41cafedbb30d4c68793985a9e3ea84e4

Authored by Job van der Voort
1 parent 9c843041

move all sidebars to one side for improved UX; add button in head of projects/is…

…sues 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 = -> @@ -2,18 +2,13 @@ responsive_resize = ->
2 current_width = $(window).width() 2 current_width = $(window).width()
3 if current_width < 985 3 if current_width < 985
4 $('.responsive-side').addClass("ui right wide sidebar") 4 $('.responsive-side').addClass("ui right wide sidebar")
5 - $('.responsive-side-left').addClass("ui left sidebar")  
6 else 5 else
7 $('.responsive-side').removeClass("ui right wide sidebar") 6 $('.responsive-side').removeClass("ui right wide sidebar")
8 - $('.responsive-side-left').removeClass("ui left sidebar")  
9 7
10 $ -> 8 $ ->
11 # Depending on window size, set the sidebar offscreen. 9 # Depending on window size, set the sidebar offscreen.
12 responsive_resize() 10 responsive_resize()
13 11
14 - $('.ui.sidebar')  
15 - .sidebar()  
16 -  
17 $('.sidebar-expand-button').click -> 12 $('.sidebar-expand-button').click ->
18 $('.ui.sidebar') 13 $('.ui.sidebar')
19 .sidebar({overlay: true}) 14 .sidebar({overlay: true})
app/assets/stylesheets/generic/sidebar.scss
@@ -5,17 +5,19 @@ @@ -5,17 +5,19 @@
5 width: 285px; 5 width: 285px;
6 } 6 }
7 7
8 -.ui.left.sidebar {  
9 - border-right: 1px solid #e1e1e1;  
10 - border-left: 0;  
11 -}  
12 -  
13 .ui.right.sidebar { 8 .ui.right.sidebar {
14 border-left: 1px solid #e1e1e1; 9 border-left: 1px solid #e1e1e1;
15 border-right: 0; 10 border-right: 0;
16 } 11 }
17 12
18 .sidebar-expand-button { 13 .sidebar-expand-button {
  14 + cursor: pointer;
  15 + transition: all 0.4s;
  16 + -moz-transition: all 0.4s;
  17 + -webkit-transition: all 0.4s;
  18 +}
  19 +
  20 +.fixed.sidebar-expand-button {
19 background: #f9f9f9; 21 background: #f9f9f9;
20 color: #555; 22 color: #555;
21 padding: 9px 12px 6px 14px; 23 padding: 9px 12px 6px 14px;
@@ -25,11 +27,6 @@ @@ -25,11 +27,6 @@
25 top: 108px; 27 top: 108px;
26 right: 0px; 28 right: 0px;
27 margin-right: 0; 29 margin-right: 0;
28 - cursor: pointer;  
29 - transition: all 0.4s;  
30 - -moz-transition: all 0.4s;  
31 - -webkit-transition: all 0.4s;  
32 -  
33 &:hover { 30 &:hover {
34 background: #ddd; 31 background: #ddd;
35 color: #333; 32 color: #333;
@@ -37,13 +34,13 @@ @@ -37,13 +34,13 @@
37 } 34 }
38 } 35 }
39 36
40 -.left.sidebar-expand-button {  
41 - left: 0px;  
42 - right: auto;  
43 - border: 1px solid #E1E1E1;  
44 - border-left: 0;  
45 - &:hover {  
46 - padding-right: 14px;  
47 - padding-left: 25px;  
48 - } 37 +.btn.btn-default.sidebar-expand-button {
  38 + margin-left: 12px;
  39 + display: inline-block !important;
  40 +}
  41 +
  42 +@media (min-width: 767px) {
  43 +.btn.btn-default.sidebar-expand-button {
  44 + display: none!important;
  45 + }
49 } 46 }
app/views/dashboard/issues.html.haml
@@ -7,9 +7,9 @@ @@ -7,9 +7,9 @@
7 %hr 7 %hr
8 8
9 .row 9 .row
10 - .left.sidebar-expand-button.hidden-lg.hidden-md 10 + .fixed.sidebar-expand-button.hidden-lg.hidden-md
11 %i.icon-list.icon-2x 11 %i.icon-list.icon-2x
12 - .col-md-3.responsive-side-left 12 + .col-md-3.responsive-side
13 = render 'shared/filter', entity: 'issue' 13 = render 'shared/filter', entity: 'issue'
14 .col-md-9 14 .col-md-9
15 = render 'shared/issues' 15 = render 'shared/issues'
app/views/dashboard/merge_requests.html.haml
@@ -7,9 +7,9 @@ @@ -7,9 +7,9 @@
7 List all merge requests from all projects you have access to. 7 List all merge requests from all projects you have access to.
8 %hr 8 %hr
9 .row 9 .row
10 - .left.sidebar-expand-button.hidden-lg.hidden-md 10 + .fixed.sidebar-expand-button.hidden-lg.hidden-md
11 %i.icon-list.icon-2x 11 %i.icon-list.icon-2x
12 - .col-md-3.responsive-side-left 12 + .col-md-3.responsive-side
13 = render 'shared/filter', entity: 'merge_request' 13 = render 'shared/filter', entity: 'merge_request'
14 .col-md-9 14 .col-md-9
15 = render 'shared/merge_requests' 15 = render 'shared/merge_requests'
app/views/dashboard/show.html.haml
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 .side.col-md-4.left.responsive-side 5 .side.col-md-4.left.responsive-side
6 = render 'sidebar' 6 = render 'sidebar'
7 7
8 - .sidebar-expand-button.hidden-lg.hidden-md 8 + .fixed.sidebar-expand-button.hidden-lg.hidden-md
9 %i.icon-list.icon-2x 9 %i.icon-list.icon-2x
10 10
11 - else 11 - else
app/views/groups/issues.html.haml
@@ -11,9 +11,9 @@ @@ -11,9 +11,9 @@
11 %hr 11 %hr
12 12
13 .row 13 .row
14 - .left.sidebar-expand-button.hidden-lg.hidden-md 14 + .fixed.sidebar-expand-button.hidden-lg.hidden-md
15 %i.icon-list.icon-2x 15 %i.icon-list.icon-2x
16 - .col-md-3.responsive-side-left 16 + .col-md-3.responsive-side
17 = render 'shared/filter', entity: 'issue' 17 = render 'shared/filter', entity: 'issue'
18 .col-md-9 18 .col-md-9
19 = render 'shared/issues' 19 = render 'shared/issues'
app/views/groups/merge_requests.html.haml
@@ -10,9 +10,9 @@ @@ -10,9 +10,9 @@
10 To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page. 10 To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
11 %hr 11 %hr
12 .row 12 .row
13 - .left.sidebar-expand-button.hidden-lg.hidden-md 13 + .fixed.sidebar-expand-button.hidden-lg.hidden-md
14 %i.icon-list.icon-2x 14 %i.icon-list.icon-2x
15 - .col-md-3.responsive-side-left 15 + .col-md-3.responsive-side
16 = render 'shared/filter', entity: 'merge_request' 16 = render 'shared/filter', entity: 'merge_request'
17 .col-md-9 17 .col-md-9
18 = render 'shared/merge_requests' 18 = render 'shared/merge_requests'
app/views/projects/issues/_head.html.haml
@@ -9,6 +9,11 @@ @@ -9,6 +9,11 @@
9 = nav_link(controller: :labels) do 9 = nav_link(controller: :labels) do
10 = link_to 'Labels', project_labels_path(@project), class: "tab" 10 = link_to 'Labels', project_labels_path(@project), class: "tab"
11 11
  12 + - if current_controller?(:milestones)
  13 + %li.pull-right
  14 + %button.btn.btn-default.sidebar-expand-button
  15 + %i.icon.icon-list
  16 +
12 - if current_controller?(:issues) 17 - if current_controller?(:issues)
13 - if current_user 18 - if current_user
14 %li 19 %li
@@ -17,6 +22,8 @@ @@ -17,6 +22,8 @@
17 22
18 %li.pull-right 23 %li.pull-right
19 .pull-right 24 .pull-right
  25 + %button.btn.btn-default.sidebar-expand-button
  26 + %i.icon.icon-list
20 = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form' do 27 = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form' do
21 .append-right-10.hidden-xs.hidden-sm 28 .append-right-10.hidden-xs.hidden-sm
22 = search_field_tag :issue_search, nil, { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input input-mn-300' } 29 = 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
1 = render "head" 1 = render "head"
2 .row 2 .row
3 - .left.sidebar-expand-button.hidden-lg.hidden-md 3 + .fixed.fixed.sidebar-expand-button.hidden-lg.hidden-md.hidden-xs
4 %i.icon-list.icon-2x 4 %i.icon-list.icon-2x
5 - .col-md-3.responsive-side-left 5 + .col-md-3.responsive-side
6 = render 'shared/project_filter', project_entities_path: project_issues_path(@project), 6 = render 'shared/project_filter', project_entities_path: project_issues_path(@project),
7 labels: true, redirect: 'issues' 7 labels: true, redirect: 'issues'
8 .col-md-9.issues-holder 8 .col-md-9.issues-holder
app/views/projects/merge_requests/index.html.haml
@@ -7,9 +7,9 @@ @@ -7,9 +7,9 @@
7 %span (#{@merge_requests.total_count}) 7 %span (#{@merge_requests.total_count})
8 %hr 8 %hr
9 .row 9 .row
10 - .left.sidebar-expand-button.hidden-lg.hidden-md 10 + .fixed.sidebar-expand-button.hidden-lg.hidden-md
11 %i.icon-list.icon-2x 11 %i.icon-list.icon-2x
12 - .col-md-3.responsive-side-left 12 + .col-md-3.responsive-side
13 = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project), 13 = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
14 labels: true, redirect: 'merge_requests' 14 labels: true, redirect: 'merge_requests'
15 .col-md-9 15 .col-md-9
app/views/projects/milestones/index.html.haml
@@ -8,9 +8,9 @@ @@ -8,9 +8,9 @@
8 New Milestone 8 New Milestone
9 9
10 .row 10 .row
11 - .left.sidebar-expand-button.hidden-lg.hidden-md 11 + .fixed.sidebar-expand-button.hidden-lg.hidden-md.hidden-xs
12 %i.icon-list.icon-2x 12 %i.icon-list.icon-2x
13 - .col-md-3.responsive-side-left 13 + .col-md-3.responsive-side
14 %ul.nav.nav-pills.nav-stacked 14 %ul.nav.nav-pills.nav-stacked
15 %li{class: ("active" if (params[:f] == "active" || !params[:f]))} 15 %li{class: ("active" if (params[:f] == "active" || !params[:f]))}
16 = link_to project_milestones_path(@project, f: "active") do 16 = link_to project_milestones_path(@project, f: "active") do