Download as
Browse Code »

Commit dbb7610365782e1d780903d88e8b804e89262a02

Authored by Dmitriy Zaporozhets
2 parents 8000fb44 204fee4f
Exists in spb-stable and in 2 other branches 7-0-stable, 7-0-stable-spb

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.
Showing 11 changed files with 38 additions and 39 deletions   Show diff stats
app/assets/javascripts/sidebar.js.coffee
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
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
  Diff comments   View file @dbb7610
@@ -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
  Diff comments   View file @dbb7610
@@ -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