Commit 8b6dd9d4 authored by Job van der Voort's avatar Job van der Voort

responsive sidebar

parent a5cbb4cb
...@@ -156,6 +156,9 @@ gem "rack-attack" ...@@ -156,6 +156,9 @@ gem "rack-attack"
# Ace editor # Ace editor
gem 'ace-rails-ap' gem 'ace-rails-ap'
# Semantic UI Sass for Sidebar
gem 'semantic-ui-sass', '~> 0.16.1.0'
gem "sass-rails", '~> 4.0.2' gem "sass-rails", '~> 4.0.2'
gem "coffee-rails" gem "coffee-rails"
gem "uglifier" gem "uglifier"
......
...@@ -452,6 +452,8 @@ GEM ...@@ -452,6 +452,8 @@ GEM
activesupport (>= 3.1, < 4.2) activesupport (>= 3.1, < 4.2)
select2-rails (3.5.2) select2-rails (3.5.2)
thor (~> 0.14) thor (~> 0.14)
semantic-ui-sass (0.16.1.0)
sass (~> 3.2)
settingslogic (2.0.9) settingslogic (2.0.9)
sexp_processor (4.4.0) sexp_processor (4.4.0)
shoulda-matchers (2.1.0) shoulda-matchers (2.1.0)
...@@ -656,6 +658,7 @@ DEPENDENCIES ...@@ -656,6 +658,7 @@ DEPENDENCIES
sdoc sdoc
seed-fu seed-fu
select2-rails select2-rails
semantic-ui-sass (~> 0.16.1.0)
settingslogic settingslogic
shoulda-matchers (~> 2.1.0) shoulda-matchers (~> 2.1.0)
sidekiq (= 2.17.0) sidekiq (= 2.17.0)
......
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
#= require nprogress #= require nprogress
#= require nprogress-turbolinks #= require nprogress-turbolinks
#= require dropzone #= require dropzone
#= require semantic-ui/sidebar
#= require_tree . #= require_tree .
window.slugify = (text) -> window.slugify = (text) ->
......
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 @@ ...@@ -51,3 +51,8 @@
* Styles for JS behaviors. * Styles for JS behaviors.
*/ */
@import "behaviors.scss"; @import "behaviors.scss";
/**
* Styles for responsive sidebar
*/
@import "semantic-ui/modules/sidebar"
.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 @@ ...@@ -2,8 +2,11 @@
.dashboard.row .dashboard.row
.activities.col-md-8 .activities.col-md-8
= render 'activities' = render 'activities'
.side.col-md-4.hidden-sm.hidden-xs .side.col-md-4
= render 'sidebar' = render 'sidebar'
.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
- else - else
= render "zero_authorized_projects" = render "zero_authorized_projects"
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment