From 8b6dd9d4a802eeba5fa4f7e10d738a2af5e87d98 Mon Sep 17 00:00:00 2001 From: Job van der Voort <job@gitlab.com> Date: Sat, 14 Jun 2014 11:17:11 +0200 Subject: [PATCH] responsive sidebar --- Gemfile | 3 ++ Gemfile.lock | 3 ++ app/assets/javascripts/application.js.coffee | 1 + app/assets/javascripts/sidebar.js.coffee | 27 +++++++++++++++++ app/assets/stylesheets/application.scss | 5 ++++ app/assets/stylesheets/generic/sidebar.scss | 31 ++++++++++++++++++++ app/views/dashboard/show.html.haml | 5 +++- 7 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 app/assets/javascripts/sidebar.js.coffee create mode 100644 app/assets/stylesheets/generic/sidebar.scss diff --git a/Gemfile b/Gemfile index ef0adb5e2b..928b766f16 100644 --- a/Gemfile +++ b/Gemfile @@ -156,6 +156,9 @@ gem "rack-attack" # Ace editor gem 'ace-rails-ap' +# Semantic UI Sass for Sidebar +gem 'semantic-ui-sass', '~> 0.16.1.0' + gem "sass-rails", '~> 4.0.2' gem "coffee-rails" gem "uglifier" diff --git a/Gemfile.lock b/Gemfile.lock index 3bea962f6a..896e6fdebe 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -452,6 +452,8 @@ GEM activesupport (>= 3.1, < 4.2) select2-rails (3.5.2) thor (~> 0.14) + semantic-ui-sass (0.16.1.0) + sass (~> 3.2) settingslogic (2.0.9) sexp_processor (4.4.0) shoulda-matchers (2.1.0) @@ -656,6 +658,7 @@ DEPENDENCIES sdoc seed-fu select2-rails + semantic-ui-sass (~> 0.16.1.0) settingslogic shoulda-matchers (~> 2.1.0) sidekiq (= 2.17.0) diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee index 35e4355466..9bcd8f0a17 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 0000000000..71e29d9ce0 --- /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 630d2aa429..7d058ad771 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 0000000000..46f829b67b --- /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 e5b7fbf097..cf6119672d 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" -- 2.30.9