responsive sidebar

5 files changed, 68 insertions, 1 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 35e43554661..9bcd8f0a171 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -30,6 +30,7 @@
 #= require nprogress
 #= require nprogress-turbolinks
 #= require dropzone
+#= require semantic-ui/sidebar
 #= require_tree .
 
 window.slugify = (text) ->
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
new file mode 100644
index 00000000000..71e29d9ce00
--- /dev/null
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -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
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 630d2aa429b..7d058ad7719 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -51,3 +51,8 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
+
+/**
+* Styles for responsive sidebar
+*/
+@import "semantic-ui/modules/sidebar"
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
new file mode 100644
index 00000000000..46f829b67bf
--- /dev/null
+++ b/app/assets/stylesheets/generic/sidebar.scss
@@ -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;
+  }
+}
diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml
index e5b7fbf097e..cf6119672d7 100644
--- a/app/views/dashboard/show.html.haml
+++ b/app/views/dashboard/show.html.haml
@@ -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"