Commit 1555146a authored by Dmitriy Zaporozhets's avatar Dmitriy Zaporozhets

Merge branch 'responsive-sidebar' into 'master'

Responsive sidebar

Puts the sidebar on the dashboard in a off-screen sidebar that can be called by pressing a button with a fixed position.

Any sidebar with the .responsive-sidebar class will follow this behavior. Button must be added manually.
parents 228386d1 9c843041
...@@ -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
$('.responsive-side').addClass("ui right wide sidebar")
$('.responsive-side-left').addClass("ui left sidebar")
else
$('.responsive-side').removeClass("ui right wide sidebar")
$('.responsive-side-left').removeClass("ui left sidebar")
$ ->
# Depending on window size, set the sidebar offscreen.
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
# On resize, check if sidebar should be offscreen.
$(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;
width: 285px;
}
.ui.left.sidebar {
border-right: 1px solid #e1e1e1;
border-left: 0;
}
.ui.right.sidebar {
border-left: 1px solid #e1e1e1;
border-right: 0;
}
.sidebar-expand-button {
background: #f9f9f9;
color: #555;
padding: 9px 12px 6px 14px;
border: 1px solid #E1E1E1;
border-right: 0;
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;
}
}
.left.sidebar-expand-button {
left: 0px;
right: auto;
border: 1px solid #E1E1E1;
border-left: 0;
&:hover {
padding-right: 14px;
padding-left: 25px;
}
}
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
%hr %hr
.row .row
.col-md-3 .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
= render 'shared/filter', entity: 'issue' = render 'shared/filter', entity: 'issue'
.col-md-9 .col-md-9
= render 'shared/issues' = render 'shared/issues'
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
List all merge requests from all projects you have access to. List all merge requests from all projects you have access to.
%hr %hr
.row .row
.col-md-3 .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
= render 'shared/filter', entity: 'merge_request' = render 'shared/filter', entity: 'merge_request'
.col-md-9 .col-md-9
= render 'shared/merge_requests' = render 'shared/merge_requests'
...@@ -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.left.responsive-side
= 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"
...@@ -11,7 +11,9 @@ ...@@ -11,7 +11,9 @@
%hr %hr
.row .row
.col-md-3 .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
= render 'shared/filter', entity: 'issue' = render 'shared/filter', entity: 'issue'
.col-md-9 .col-md-9
= render 'shared/issues' = render 'shared/issues'
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page. To see all merge requests you should visit #{link_to 'dashboard', merge_requests_dashboard_path} page.
%hr %hr
.row .row
.col-md-3 .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
= render 'shared/filter', entity: 'merge_request' = render 'shared/filter', entity: 'merge_request'
.col-md-9 .col-md-9
= render 'shared/merge_requests' = render 'shared/merge_requests'
= render "head" = render "head"
.row .row
.col-md-3 .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
= render 'shared/project_filter', project_entities_path: project_issues_path(@project), = render 'shared/project_filter', project_entities_path: project_issues_path(@project),
labels: true, redirect: 'issues' labels: true, redirect: 'issues'
.col-md-9.issues-holder .col-md-9.issues-holder
......
...@@ -7,7 +7,9 @@ ...@@ -7,7 +7,9 @@
%span (#{@merge_requests.total_count}) %span (#{@merge_requests.total_count})
%hr %hr
.row .row
.col-md-3 .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
= render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project), = render 'shared/project_filter', project_entities_path: project_merge_requests_path(@project),
labels: true, redirect: 'merge_requests' labels: true, redirect: 'merge_requests'
.col-md-9 .col-md-9
......
...@@ -8,7 +8,9 @@ ...@@ -8,7 +8,9 @@
New Milestone New Milestone
.row .row
.col-md-3.hidden-sm .left.sidebar-expand-button.hidden-lg.hidden-md
%i.icon-list.icon-2x
.col-md-3.responsive-side-left
%ul.nav.nav-pills.nav-stacked %ul.nav.nav-pills.nav-stacked
%li{class: ("active" if (params[:f] == "active" || !params[:f]))} %li{class: ("active" if (params[:f] == "active" || !params[:f]))}
= link_to project_milestones_path(@project, f: "active") do = link_to project_milestones_path(@project, f: "active") do
......
.side-filters.hidden-xs.hidden-sm .side-filters
= form_tag filter_path(entity), method: 'get' do = form_tag filter_path(entity), method: 'get' do
- if current_user - if current_user
%fieldset.scope-filter %fieldset.scope-filter
......
.side-filters.hidden-xs.hidden-sm .side-filters
= form_tag project_entities_path, method: 'get' do = form_tag project_entities_path, method: 'get' do
- if current_user - if current_user
%fieldset %fieldset
......
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