responsive sidebar

Job van der Voort
1 parent a5cbb4cb
Showing 7 changed files with 74 additions and 1 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/show.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,27 @@
+responsive_resize = ->
+  current_width = $(window).width()
+  if current_width < 985
+    $('.side').addClass("ui right wide sidebar")
+  else
+    $('.side').removeClass("ui right wide sidebar")
+
+$ ->
+  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
+
+$(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,31 @@
+.ui.sidebar {
+  z-index: 1000 !important;
+  background: #fff;
+  padding: 10px;
+  border-left: 1px solid #e1e1e1;
+  width: 285px;
+}
+
+.sidebar-expand-button {
+  background: #fff;
+  color: #555;
+  padding: 10px 15px;
+  border: 1px solid #E1E1E1;
+  border-right: 0;
+  border-radius: 3px;
+  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;
+  }
+}
@@ -2,8 +2,11 @@
   .dashboard.row
     .activities.col-md-8
       = render 'activities'
-    .side.col-md-4.hidden-sm.hidden-xs
+    .side.col-md-4
       = render 'sidebar'
+  .sidebar-expand-button.hidden-lg.hidden-md
+    %i.icon-list.icon-2x
+
 - else
   = render "zero_authorized_projects"
	@@ -452,6 +452,8 @@ GEM		@@ -452,6 +452,8 @@ GEM
452	activesupport (>= 3.1, < 4.2)	452	activesupport (>= 3.1, < 4.2)
453	select2-rails (3.5.2)	453	select2-rails (3.5.2)
454	thor (~> 0.14)	454	thor (~> 0.14)
		455	+ semantic-ui-sass (0.16.1.0)
		456	+ sass (~> 3.2)
455	settingslogic (2.0.9)	457	settingslogic (2.0.9)
456	sexp_processor (4.4.0)	458	sexp_processor (4.4.0)
457	shoulda-matchers (2.1.0)	459	shoulda-matchers (2.1.0)
	@@ -656,6 +658,7 @@ DEPENDENCIES		@@ -656,6 +658,7 @@ DEPENDENCIES
656	sdoc	658	sdoc
657	seed-fu	659	seed-fu
658	select2-rails	660	select2-rails
		661	+ semantic-ui-sass (~> 0.16.1.0)
659	settingslogic	662	settingslogic
660	shoulda-matchers (~> 2.1.0)	663	shoulda-matchers (~> 2.1.0)
661	sidekiq (= 2.17.0)	664	sidekiq (= 2.17.0)
	@@ -30,6 +30,7 @@		@@ -30,6 +30,7 @@
30	#= require nprogress	30	#= require nprogress
31	#= require nprogress-turbolinks	31	#= require nprogress-turbolinks
32	#= require dropzone	32	#= require dropzone
		33	+#= require semantic-ui/sidebar
33	#= require_tree .	34	#= require_tree .
34		35
35	window.slugify = (text) ->	36	window.slugify = (text) ->
@@ -0,0 +1,27 @@		@@ -0,0 +1,27 @@
	1	+responsive_resize = ->
	2	+ current_width = $(window).width()
	3	+ if current_width < 985
	4	+ $('.side').addClass("ui right wide sidebar")
	5	+ else
	6	+ $('.side').removeClass("ui right wide sidebar")
	7	+
	8	+$ ->
	9	+ responsive_resize()
	10	+
	11	+ $('.ui.sidebar')
	12	+ .sidebar()
	13	+
	14	+ $('.sidebar-expand-button').click ->
	15	+ $('.ui.sidebar')
	16	+ .sidebar({overlay: true})
	17	+ .sidebar('toggle')
	18	+
	19	+ # Hide sidebar on click outside of sidebar
	20	+ $(document).mouseup (e) ->
	21	+ container = $(".ui.sidebar")
	22	+ container.sidebar "hide" if not container.is(e.target) and container.has(e.target).length is 0
	23	+ return
	24	+
	25	+$(window).resize ->
	26	+ responsive_resize()
	27	+ return
	@@ -51,3 +51,8 @@		@@ -51,3 +51,8 @@
51	* Styles for JS behaviors.	51	* Styles for JS behaviors.
52	*/	52	*/
53	@import "behaviors.scss";	53	@import "behaviors.scss";
		54	+
		55	+/**
		56	+* Styles for responsive sidebar
		57	+*/
		58	+@import "semantic-ui/modules/sidebar"
@@ -0,0 +1,31 @@		@@ -0,0 +1,31 @@
	1	+.ui.sidebar {
	2	+ z-index: 1000 !important;
	3	+ background: #fff;
	4	+ padding: 10px;
	5	+ border-left: 1px solid #e1e1e1;
	6	+ width: 285px;
	7	+}
	8	+
	9	+.sidebar-expand-button {
	10	+ background: #fff;
	11	+ color: #555;
	12	+ padding: 10px 15px;
	13	+ border: 1px solid #E1E1E1;
	14	+ border-right: 0;
	15	+ border-radius: 3px;
	16	+ position: fixed;
	17	+ top: 108px;
	18	+ right: 0px;
	19	+ margin-right: 0;
	20	+ cursor: pointer;
	21	+ transition: all 0.4s;
	22	+ -moz-transition: all 0.4s;
	23	+ -webkit-transition: all 0.4s;
	24	+
	25	+
	26	+ &:hover {
	27	+ background: #ddd;
	28	+ color: #333;
	29	+ padding-right: 25px;
	30	+ }
	31	+}