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.

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.
Dmitriy Zaporozhets
2 parents 8000fb44 204fee4f
Showing 11 changed files with 38 additions and 39 deletions Show diff stats
app/assets/javascripts/sidebar.js.coffee
app/assets/stylesheets/generic/sidebar.scss
app/views/dashboard/issues.html.haml
app/views/dashboard/merge_requests.html.haml
app/views/dashboard/show.html.haml
app/views/groups/issues.html.haml
app/views/groups/merge_requests.html.haml
app/views/projects/issues/_head.html.haml
app/views/projects/issues/index.html.haml
app/views/projects/merge_requests/index.html.haml
app/views/projects/milestones/index.html.haml
@@ -2,18 +2,13 @@ responsive_resize = -&gt;
   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})
@@ -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;
+ }
 }
@@ -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'
@@ -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'
@@ -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
@@ -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'
@@ -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'
@@ -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' }
 = 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
@@ -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
@@ -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
...	...	@@ -2,18 +2,13 @@ responsive_resize = ->
2	2	current_width = $(window).width()
3	3	if current_width < 985
4	4	$('.responsive-side').addClass("ui right wide sidebar")
5		- $('.responsive-side-left').addClass("ui left sidebar")
6	5	else
7	6	$('.responsive-side').removeClass("ui right wide sidebar")
8		- $('.responsive-side-left').removeClass("ui left sidebar")
9	7
10	8	$ ->
11	9	# Depending on window size, set the sidebar offscreen.
12	10	responsive_resize()
13	11
14		- $('.ui.sidebar')
15		- .sidebar()
16		-
17	12	$('.sidebar-expand-button').click ->
18	13	$('.ui.sidebar')
19	14	.sidebar({overlay: true})
...	...
...	...	@@ -5,17 +5,19 @@
5	5	width: 285px;
6	6	}
7	7
8		-.ui.left.sidebar {
9		- border-right: 1px solid #e1e1e1;
10		- border-left: 0;
11		-}
12		-
13	8	.ui.right.sidebar {
14	9	border-left: 1px solid #e1e1e1;
15	10	border-right: 0;
16	11	}
17	12
18	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	21	background: #f9f9f9;
20	22	color: #555;
21	23	padding: 9px 12px 6px 14px;
...	...	@@ -25,11 +27,6 @@
25	27	top: 108px;
26	28	right: 0px;
27	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	30	&:hover {
34	31	background: #ddd;
35	32	color: #333;
...	...	@@ -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	}
...	...
...	...	@@ -7,9 +7,9 @@
7	7	%hr
8	8
9	9	.row
10		- .left.sidebar-expand-button.hidden-lg.hidden-md
	10	+ .fixed.sidebar-expand-button.hidden-lg.hidden-md
11	11	%i.icon-list.icon-2x
12		- .col-md-3.responsive-side-left
	12	+ .col-md-3.responsive-side
13	13	= render 'shared/filter', entity: 'issue'
14	14	.col-md-9
15	15	= render 'shared/issues'
...	...
...	...	@@ -7,9 +7,9 @@
7	7	List all merge requests from all projects you have access to.
8	8	%hr
9	9	.row
10		- .left.sidebar-expand-button.hidden-lg.hidden-md
	10	+ .fixed.sidebar-expand-button.hidden-lg.hidden-md
11	11	%i.icon-list.icon-2x
12		- .col-md-3.responsive-side-left
	12	+ .col-md-3.responsive-side
13	13	= render 'shared/filter', entity: 'merge_request'
14	14	.col-md-9
15	15	= render 'shared/merge_requests'
...	...
...	...	@@ -5,7 +5,7 @@
5	5	.side.col-md-4.left.responsive-side
6	6	= render 'sidebar'
7	7
8		- .sidebar-expand-button.hidden-lg.hidden-md
	8	+ .fixed.sidebar-expand-button.hidden-lg.hidden-md
9	9	%i.icon-list.icon-2x
10	10
11	11	- else
...	...
...	...	@@ -11,9 +11,9 @@
11	11	%hr
12	12
13	13	.row
14		- .left.sidebar-expand-button.hidden-lg.hidden-md
	14	+ .fixed.sidebar-expand-button.hidden-lg.hidden-md
15	15	%i.icon-list.icon-2x
16		- .col-md-3.responsive-side-left
	16	+ .col-md-3.responsive-side
17	17	= render 'shared/filter', entity: 'issue'
18	18	.col-md-9
19	19	= render 'shared/issues'
...	...
...	...	@@ -10,9 +10,9 @@
10	10	To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
11	11	%hr
12	12	.row
13		- .left.sidebar-expand-button.hidden-lg.hidden-md
	13	+ .fixed.sidebar-expand-button.hidden-lg.hidden-md
14	14	%i.icon-list.icon-2x
15		- .col-md-3.responsive-side-left
	15	+ .col-md-3.responsive-side
16	16	= render 'shared/filter', entity: 'merge_request'
17	17	.col-md-9
18	18	= render 'shared/merge_requests'
...	...
...	...	@@ -9,6 +9,11 @@
9	9	= nav_link(controller: :labels) do
10	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	17	- if current_controller?(:issues)
13	18	- if current_user
14	19	%li
...	...	@@ -17,6 +22,8 @@
17	22
18	23	%li.pull-right
19	24	.pull-right
	25	+ %button.btn.btn-default.sidebar-expand-button
	26	+ %i.icon.icon-list
20	27	= form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form' do
21	28	.append-right-10.hidden-xs.hidden-sm
22	29	= search_field_tag :issue_search, nil, { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input input-mn-300' }
...	...
1	1	= render "head"
2	2	.row
3		- .left.sidebar-expand-button.hidden-lg.hidden-md
	3	+ .fixed.fixed.sidebar-expand-button.hidden-lg.hidden-md.hidden-xs
4	4	%i.icon-list.icon-2x
5		- .col-md-3.responsive-side-left
	5	+ .col-md-3.responsive-side
6	6	= render 'shared/project_filter', project_entities_path: project_issues_path(@project),
7	7	labels: true, redirect: 'issues'
8	8	.col-md-9.issues-holder
...	...
...	...	@@ -7,9 +7,9 @@
7	7	%span (#{@merge_requests.total_count})
8	8	%hr
9	9	.row
10		- .left.sidebar-expand-button.hidden-lg.hidden-md
	10	+ .fixed.sidebar-expand-button.hidden-lg.hidden-md
11	11	%i.icon-list.icon-2x
12		- .col-md-3.responsive-side-left
	12	+ .col-md-3.responsive-side
13	13	= render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
14	14	labels: true, redirect: 'merge_requests'
15	15	.col-md-9
...	...