Commit d718209b47022abe8a28a7267cd40569bd7ec06a

Authored by Job van der Voort
1 parent 8b6dd9d4

responsive sidebar on dashboard

app/assets/javascripts/sidebar.js.coffee
1 1 responsive_resize = ->
2 2 current_width = $(window).width()
3 3 if current_width < 985
4   - $('.side').addClass("ui right wide sidebar")
  4 + $('.responsive-side').addClass("ui right wide sidebar")
5 5 else
6   - $('.side').removeClass("ui right wide sidebar")
  6 + $('.responsive-side').removeClass("ui right wide sidebar")
7 7  
8 8 $ ->
  9 + # Depending on window size, set the sidebar offscreen.
9 10 responsive_resize()
10 11  
11 12 $('.ui.sidebar')
... ... @@ -22,6 +23,7 @@ $ -&gt;
22 23 container.sidebar "hide" if not container.is(e.target) and container.has(e.target).length is 0
23 24 return
24 25  
  26 +# On resize, check if sidebar should be offscreen.
25 27 $(window).resize ->
26 28 responsive_resize()
27 29 return
... ...
app/assets/stylesheets/generic/sidebar.scss
... ... @@ -7,12 +7,11 @@
7 7 }
8 8  
9 9 .sidebar-expand-button {
10   - background: #fff;
  10 + background: #f9f9f9;
11 11 color: #555;
12   - padding: 10px 15px;
  12 + padding: 9px 12px 6px 14px;
13 13 border: 1px solid #E1E1E1;
14 14 border-right: 0;
15   - border-radius: 3px;
16 15 position: fixed;
17 16 top: 108px;
18 17 right: 0px;
... ... @@ -22,7 +21,6 @@
22 21 -moz-transition: all 0.4s;
23 22 -webkit-transition: all 0.4s;
24 23  
25   -
26 24 &:hover {
27 25 background: #ddd;
28 26 color: #333;
... ...
app/views/dashboard/show.html.haml
... ... @@ -2,7 +2,7 @@
2 2 .dashboard.row
3 3 .activities.col-md-8
4 4 = render 'activities'
5   - .side.col-md-4
  5 + .side.col-md-4.responsive-side
6 6 = render 'sidebar'
7 7  
8 8 .sidebar-expand-button.hidden-lg.hidden-md
... ...