Merge branch 'responsive-sidebar' into 'master'

Responsive sidebar Puts the sidebar on the dashboard in a off-screen sidebar that can be called by pressing a button with a fixed position. Any sidebar with the .responsive-sidebar class will follow this behavior. Button must be added manually.

Merge branch 'responsive-sidebar' into 'master'
Responsive sidebar Puts the sidebar on the dashboard in a off-screen sidebar that can be called by pressing a button with a fixed position. Any sidebar with the .responsive-sidebar class will follow this behavior. Button must be added manually.
Dmitriy Zaporozhets
2 parents 228386d1 9c843041
Showing 16 changed files with 119 additions and 10 deletions Show diff stats
Gemfile
Gemfile.lock
app/assets/javascripts/application.js.coffee
app/assets/javascripts/sidebar.js.coffee
app/assets/stylesheets/application.scss
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/index.html.haml
app/views/projects/merge_requests/index.html.haml
app/views/projects/milestones/index.html.haml
app/views/shared/_filter.html.haml
app/views/shared/_project_filter.html.haml
@@ -156,6 +156,9 @@ gem &quot;rack-attack&quot;
 # Ace editor
 gem 'ace-rails-ap'
  
+# Semantic UI Sass for Sidebar
+gem 'semantic-ui-sass', '~> 0.16.1.0'
+
 gem "sass-rails", '~> 4.0.2'
 gem "coffee-rails"
 gem "uglifier"
@@ -452,6 +452,8 @@ GEM
       activesupport (>= 3.1, < 4.2)
     select2-rails (3.5.2)
       thor (~> 0.14)
+    semantic-ui-sass (0.16.1.0)
+      sass (~> 3.2)
     settingslogic (2.0.9)
     sexp_processor (4.4.0)
     shoulda-matchers (2.1.0)
@@ -656,6 +658,7 @@ DEPENDENCIES
   sdoc
   seed-fu
   select2-rails
+  semantic-ui-sass (~> 0.16.1.0)
   settingslogic
   shoulda-matchers (~> 2.1.0)
   sidekiq (= 2.17.0)
@@ -30,6 +30,7 @@
 #= require nprogress
 #= require nprogress-turbolinks
 #= require dropzone
+#= require semantic-ui/sidebar
 #= require_tree .
  
 window.slugify = (text) ->
@@ -0,0 +1,31 @@
+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})
+      .sidebar('toggle')
+
+  # Hide sidebar on click outside of sidebar
+  $(document).mouseup (e) ->
+    container = $(".ui.sidebar")
+    container.sidebar "hide"  if not container.is(e.target) and container.has(e.target).length is 0
+    return
+
+# On resize, check if sidebar should be offscreen.
+$(window).resize ->
+  responsive_resize()
+  return
@@ -51,3 +51,8 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
+
+/**
+* Styles for responsive sidebar
+*/
+@import "semantic-ui/modules/sidebar"
@@ -0,0 +1,49 @@
+.ui.sidebar {
+  z-index: 1000 !important;
+  background: #fff;
+  padding: 10px;
+  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 {
+  background: #f9f9f9;
+  color: #555;
+  padding: 9px 12px 6px 14px;
+  border: 1px solid #E1E1E1;
+  border-right: 0;
+  position: fixed;
+  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;
+    padding-right: 25px;
+  }
+}
+
+.left.sidebar-expand-button {
+  left: 0px;
+  right: auto;
+  border: 1px solid #E1E1E1;
+  border-left: 0;
+  &:hover {
+    padding-right: 14px;
+    padding-left: 25px;
+  }
+}
@@ -7,7 +7,9 @@
 %hr
  
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'issue'
   .col-md-9
     = render 'shared/issues'
@@ -7,7 +7,9 @@
   List all merge requests from all projects you have access to.
 %hr
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'merge_request'
   .col-md-9
     = render 'shared/merge_requests'
@@ -2,8 +2,11 @@
   .dashboard.row
     .activities.col-md-8
       = render 'activities'
-    .side.col-md-4.hidden-sm.hidden-xs
+    .side.col-md-4.left.responsive-side
       = render 'sidebar'
  
+  .sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+
 - else
   = render "zero_authorized_projects"
@@ -11,7 +11,9 @@
 %hr
  
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'issue'
   .col-md-9
     = render 'shared/issues'
@@ -10,7 +10,9 @@
     To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
 %hr
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/filter', entity: 'merge_request'
   .col-md-9
     = render 'shared/merge_requests'
 = render "head"
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/project_filter', project_entities_path: project_issues_path(@project),
              labels: true, redirect: 'issues'
   .col-md-9.issues-holder
@@ -7,7 +7,9 @@
   %span (#{@merge_requests.total_count})
 %hr
 .row
-  .col-md-3
+  .left.sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+  .col-md-3.responsive-side-left
     = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
              labels: true, redirect: 'merge_requests'
   .col-md-9
@@ -8,7 +8,9 @@
         New Milestone
  
   .row
-    .col-md-3.hidden-sm
+    .left.sidebar-expand-button.hidden-lg.hidden-md
+      %i.icon-list.icon-2x
+    .col-md-3.responsive-side-left
       %ul.nav.nav-pills.nav-stacked
         %li{class: ("active" if (params[:f] == "active" || !params[:f]))}
           = link_to project_milestones_path(@project, f: "active") do
-.side-filters.hidden-xs.hidden-sm
+.side-filters
   = form_tag filter_path(entity), method: 'get' do
     - if current_user
       %fieldset.scope-filter
-.side-filters.hidden-xs.hidden-sm
+.side-filters
   = form_tag project_entities_path, method: 'get' do
     - if current_user
       %fieldset
...	...	@@ -156,6 +156,9 @@ gem "rack-attack"
156	156	# Ace editor
157	157	gem 'ace-rails-ap'
158	158
	159	+# Semantic UI Sass for Sidebar
	160	+gem 'semantic-ui-sass', '~> 0.16.1.0'
	161	+
159	162	gem "sass-rails", '~> 4.0.2'
160	163	gem "coffee-rails"
161	164	gem "uglifier"
...	...
...	...	@@ -452,6 +452,8 @@ GEM
452	452	activesupport (>= 3.1, < 4.2)
453	453	select2-rails (3.5.2)
454	454	thor (~> 0.14)
	455	+ semantic-ui-sass (0.16.1.0)
	456	+ sass (~> 3.2)
455	457	settingslogic (2.0.9)
456	458	sexp_processor (4.4.0)
457	459	shoulda-matchers (2.1.0)
...	...	@@ -656,6 +658,7 @@ DEPENDENCIES
656	658	sdoc
657	659	seed-fu
658	660	select2-rails
	661	+ semantic-ui-sass (~> 0.16.1.0)
659	662	settingslogic
660	663	shoulda-matchers (~> 2.1.0)
661	664	sidekiq (= 2.17.0)
...	...
...	...	@@ -30,6 +30,7 @@
30	30	#= require nprogress
31	31	#= require nprogress-turbolinks
32	32	#= require dropzone
	33	+#= require semantic-ui/sidebar
33	34	#= require_tree .
34	35
35	36	window.slugify = (text) ->
...	...
...	...	@@ -0,0 +1,31 @@
	1	+responsive_resize = ->
	2	+ current_width = $(window).width()
	3	+ if current_width < 985
	4	+ $('.responsive-side').addClass("ui right wide sidebar")
	5	+ $('.responsive-side-left').addClass("ui left sidebar")
	6	+ else
	7	+ $('.responsive-side').removeClass("ui right wide sidebar")
	8	+ $('.responsive-side-left').removeClass("ui left sidebar")
	9	+
	10	+$ ->
	11	+ # Depending on window size, set the sidebar offscreen.
	12	+ responsive_resize()
	13	+
	14	+ $('.ui.sidebar')
	15	+ .sidebar()
	16	+
	17	+ $('.sidebar-expand-button').click ->
	18	+ $('.ui.sidebar')
	19	+ .sidebar({overlay: true})
	20	+ .sidebar('toggle')
	21	+
	22	+ # Hide sidebar on click outside of sidebar
	23	+ $(document).mouseup (e) ->
	24	+ container = $(".ui.sidebar")
	25	+ container.sidebar "hide" if not container.is(e.target) and container.has(e.target).length is 0
	26	+ return
	27	+
	28	+# On resize, check if sidebar should be offscreen.
	29	+$(window).resize ->
	30	+ responsive_resize()
	31	+ return
...	...
...	...	@@ -51,3 +51,8 @@
51	51	* Styles for JS behaviors.
52	52	*/
53	53	@import "behaviors.scss";
	54	+
	55	+/**
	56	+* Styles for responsive sidebar
	57	+*/
	58	+@import "semantic-ui/modules/sidebar"
...	...
...	...	@@ -0,0 +1,49 @@
	1	+.ui.sidebar {
	2	+ z-index: 1000 !important;
	3	+ background: #fff;
	4	+ padding: 10px;
	5	+ width: 285px;
	6	+}
	7	+
	8	+.ui.left.sidebar {
	9	+ border-right: 1px solid #e1e1e1;
	10	+ border-left: 0;
	11	+}
	12	+
	13	+.ui.right.sidebar {
	14	+ border-left: 1px solid #e1e1e1;
	15	+ border-right: 0;
	16	+}
	17	+
	18	+.sidebar-expand-button {
	19	+ background: #f9f9f9;
	20	+ color: #555;
	21	+ padding: 9px 12px 6px 14px;
	22	+ border: 1px solid #E1E1E1;
	23	+ border-right: 0;
	24	+ position: fixed;
	25	+ top: 108px;
	26	+ right: 0px;
	27	+ 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 {
	34	+ background: #ddd;
	35	+ color: #333;
	36	+ padding-right: 25px;
	37	+ }
	38	+}
	39	+
	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	+ }
	49	+}
...	...
...	...	@@ -7,7 +7,9 @@
7	7	%hr
8	8
9	9	.row
10		- .col-md-3
	10	+ .left.sidebar-expand-button.hidden-lg.hidden-md
	11	+ %i.icon-list.icon-2x
	12	+ .col-md-3.responsive-side-left
11	13	= render 'shared/filter', entity: 'issue'
12	14	.col-md-9
13	15	= render 'shared/issues'
...	...
...	...	@@ -7,7 +7,9 @@
7	7	List all merge requests from all projects you have access to.
8	8	%hr
9	9	.row
10		- .col-md-3
	10	+ .left.sidebar-expand-button.hidden-lg.hidden-md
	11	+ %i.icon-list.icon-2x
	12	+ .col-md-3.responsive-side-left
11	13	= render 'shared/filter', entity: 'merge_request'
12	14	.col-md-9
13	15	= render 'shared/merge_requests'
...	...
...	...	@@ -2,8 +2,11 @@
2	2	.dashboard.row
3	3	.activities.col-md-8
4	4	= render 'activities'
5		- .side.col-md-4.hidden-sm.hidden-xs
	5	+ .side.col-md-4.left.responsive-side
6	6	= render 'sidebar'
7	7
	8	+ .sidebar-expand-button.hidden-lg.hidden-md
	9	+ %i.icon-list.icon-2x
	10	+
8	11	- else
9	12	= render "zero_authorized_projects"
...	...
...	...	@@ -11,7 +11,9 @@
11	11	%hr
12	12
13	13	.row
14		- .col-md-3
	14	+ .left.sidebar-expand-button.hidden-lg.hidden-md
	15	+ %i.icon-list.icon-2x
	16	+ .col-md-3.responsive-side-left
15	17	= render 'shared/filter', entity: 'issue'
16	18	.col-md-9
17	19	= render 'shared/issues'
...	...