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