Create Aside js class for handling all sidebars in UI for mobile devices

13 files changed, 56 insertions, 96 deletions

diff --git a/Gemfile b/Gemfile
index c3d8299e944..233b8c8cd7d 100644
--- a/Gemfile
+++ b/Gemfile
@@ -176,9 +176,6 @@ gem 'ace-rails-ap'
 # Keyboard shortcuts
 gem 'mousetrap-rails'
 
-# Semantic UI Sass for Sidebar
-gem 'semantic-ui-sass', '~> 1.8.0'
-
 gem "sass-rails", '~> 4.0.2'
 gem "coffee-rails"
 gem "uglifier"
diff --git a/Gemfile.lock b/Gemfile.lock
index a9784f36ac9..034fd7efc83 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -513,8 +513,6 @@ GEM
       activesupport (>= 3.1, < 4.2)
     select2-rails (3.5.2)
       thor (~> 0.14)
-    semantic-ui-sass (1.8.0.0)
-      sass (~> 3.2)
     settingslogic (2.0.9)
     shoulda-matchers (2.7.0)
       activesupport (>= 3.0.0)
@@ -740,7 +738,6 @@ DEPENDENCIES
   sdoc
   seed-fu
   select2-rails
-  semantic-ui-sass (~> 1.8.0)
   settingslogic
   shoulda-matchers (~> 2.7.0)
   sidekiq (~> 3.3)
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 9c97582e6dd..e9042b56416 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -32,7 +32,6 @@
 #= require nprogress
 #= require nprogress-turbolinks
 #= require dropzone
-#= require semantic-ui/sidebar
 #= require mousetrap
 #= require mousetrap/pause
 #= require shortcuts
@@ -115,7 +114,6 @@ if location.hash
 window.addEventListener "hashchange", shiftWindow
 
 $ ->
-
   # Click a .one_click_select field, select the contents
   $(".one_click_select").on 'click', -> $(@).select()
 
@@ -183,6 +181,8 @@ $ ->
     form = btn.closest("form")
     new ConfirmDangerModal(form, text)
 
+  new Aside()
+
 (($) ->
   # Disable an element and add the 'disabled' Bootstrap class
   $.fn.extend disable: ->
diff --git a/app/assets/javascripts/aside.js.coffee b/app/assets/javascripts/aside.js.coffee
new file mode 100644
index 00000000000..85473101944
--- /dev/null
+++ b/app/assets/javascripts/aside.js.coffee
@@ -0,0 +1,17 @@
+class @Aside
+  constructor: ->
+    $(document).off "click", "a.show-aside"
+    $(document).on "click", 'a.show-aside', (e) ->
+      e.preventDefault()
+      btn = $(e.currentTarget)
+      icon = btn.find('i')
+      console.log('1')
+
+      if icon.hasClass('fa-angle-left')
+        btn.parent().find('section').hide()
+        btn.parent().find('aside').fadeIn()
+        icon.removeClass('fa-angle-left').addClass('fa-angle-right')
+      else
+        btn.parent().find('aside').hide()
+        btn.parent().find('section').fadeIn()
+        icon.removeClass('fa-angle-right').addClass('fa-angle-left')
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index 5013bcdacd0..7febcba0e94 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -1,30 +1,3 @@
-responsive_resize = ->
-  current_width = $(window).width()
-  if current_width < 985
-    $('.responsive-side').addClass("ui right wide sidebar")
-  else
-    $('.responsive-side').removeClass("ui right wide sidebar")
-
-$ ->
-  # Depending on window size, set the sidebar offscreen.
-  responsive_resize()
-
-  $('.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
-
 $(document).on("click", '.toggle-nav-collapse', (e) ->
   e.preventDefault()
   collapsed = 'page-sidebar-collapsed'
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 8f63a7fee64..e5bb5e21bb0 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -55,8 +55,3 @@
  * Styles for JS behaviors.
  */
 @import "behaviors.scss";
-
-/**
-* Styles for responsive sidebar
-*/
-@import "semantic-ui/modules/sidebar";
diff --git a/app/assets/stylesheets/generic/mobile.scss b/app/assets/stylesheets/generic/mobile.scss
index 54e06661161..2bb69f4aa7e 100644
--- a/app/assets/stylesheets/generic/mobile.scss
+++ b/app/assets/stylesheets/generic/mobile.scss
@@ -50,4 +50,24 @@
   .issue_edited_ago, .note_edited_ago {
     display: none;
   }
+
+  aside {
+    display: none;
+  }
+
+  .show-aside {
+    display: block !important;
+  }
+}
+
+.show-aside {
+  display: none;
+  position: fixed;
+  right: 0px;
+  top: 30%;
+  padding: 5px 15px;
+  background: #EEE;
+  font-size: 20px;
+  color: #777;
+  @include box-shadow(0 1px 2px #DDD);
 }
diff --git a/app/assets/stylesheets/generic/sidebar.scss b/app/assets/stylesheets/generic/sidebar.scss
deleted file mode 100644
index f6311ef74e8..00000000000
--- a/app/assets/stylesheets/generic/sidebar.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.ui.sidebar {
-  z-index: 1000 !important;
-  background: #fff;
-  padding: 10px;
-  width: 285px;
-}
-
-.ui.right.sidebar {
-  border-left: 1px solid #e1e1e1;
-  border-right: 0;
-}
-
-.sidebar-expand-button {
-  cursor: pointer;
-  transition: all 0.4s;
-  -moz-transition: all 0.4s;
-  -webkit-transition: all 0.4s;
-}
-
-.fixed.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;
-  &:hover {
-    background: #ddd;
-    color: #333;
-    padding-right: 25px;
-  }
-}
-
-.btn.btn-default.sidebar-expand-button {
-  margin-left: 12px;
-  display: inline-block !important;
-}
-
-@media (min-width: 767px) {
-.btn.btn-default.sidebar-expand-button {
-  display: none!important;
- }
-}
diff --git a/app/views/dashboard/show.html.haml b/app/views/dashboard/show.html.haml
index 10951af6a09..f973f4829a0 100644
--- a/app/views/dashboard/show.html.haml
+++ b/app/views/dashboard/show.html.haml
@@ -2,11 +2,10 @@
   .dashboard.row
     %section.activities.col-md-8
       = render 'activities'
-    %aside.side.col-md-4.left.responsive-side
+    %aside.col-md-4
       = render 'sidebar'
-
-  .fixed.sidebar-expand-button.hidden-lg.hidden-md
-    %i.fa.fa-list.fa-2x
+    = link_to '#aside', class: 'show-aside' do
+      %i.fa.fa-angle-left
 
 - else
   = render "zero_authorized_projects"
diff --git a/app/views/groups/show.html.haml b/app/views/groups/show.html.haml
index d5af859ee62..a453889f744 100644
--- a/app/views/groups/show.html.haml
+++ b/app/views/groups/show.html.haml
@@ -9,7 +9,7 @@
           = escaped_autolink(@group.description)
   %hr
   .row
-    %section.activities.col-md-8.hidden-sm.hidden-xs
+    %section.activities.col-md-8
       - if current_user
         = render "events/event_last_push", event: @last_push
         = render 'shared/event_filter'
@@ -17,3 +17,5 @@
       = spinner
     %aside.side.col-md-4
       = render "projects", projects: @projects
+    = link_to '#aside', class: 'show-aside' do
+      %i.fa.fa-angle-left
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index 89572c9a735..15f5208a645 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -5,14 +5,14 @@
     - else
       = link_to 'Close Issue', project_issue_path(@project, @issue, issue: {state_event: :close }, status_only: true), method: :put, class: "btn btn-grouped btn-close js-note-target-close", title: "Close Issue"
 .row
-  .col-md-9
+  %section.col-md-9
     .participants
       %span= pluralize(@issue.participants.count, 'participant')
       - @issue.participants.each do |participant|
         = link_to_member(@project, participant, name: false, size: 24)
 
     .voting_notes#notes= render "projects/notes/notes_with_form"
-  .col-md-3
+  %aside.col-md-3
     .issuable-affix
       .clearfix
         %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
@@ -33,3 +33,5 @@
           - @issue.labels.each do |label|
             = link_to project_issues_path(@project, label_name: label.name) do
               = render_colored_label(label)
+  = link_to '#aside', class: 'show-aside' do
+    %i.fa.fa-angle-left
diff --git a/app/views/projects/merge_requests/_discussion.html.haml b/app/views/projects/merge_requests/_discussion.html.haml
index ca4ce26c676..69bbdf49396 100644
--- a/app/views/projects/merge_requests/_discussion.html.haml
+++ b/app/views/projects/merge_requests/_discussion.html.haml
@@ -6,10 +6,10 @@
       = link_to 'Reopen', project_merge_request_path(@project, @merge_request, merge_request: {state_event: :reopen }), method: :put, class: "btn btn-grouped btn-reopen reopen-mr-link js-note-target-reopen", title: "Reopen merge request"
 
 .row
-  .col-md-9
+  %section.col-md-9
     = render "projects/merge_requests/show/participants"
     = render "projects/notes/notes_with_form"
-  .col-md-3
+  %aside.col-md-3
     .issuable-affix
       .clearfix
         %span.slead.has_tooltip{:"data-original-title" => 'Cross-project reference'}
@@ -29,3 +29,5 @@
           - @merge_request.labels.each do |label|
             = link_to project_merge_requests_path(@project, label_name: label.name) do
               = render_colored_label(label)
+  = link_to '#aside', class: 'show-aside' do
+    %i.fa.fa-angle-left
diff --git a/app/views/projects/show.html.haml b/app/views/projects/show.html.haml
index 435b2648404..c71123c4fbf 100644
--- a/app/views/projects/show.html.haml
+++ b/app/views/projects/show.html.haml
@@ -23,12 +23,14 @@
 .tab-content
   .tab-pane.active#tab-activity
     .row
+      = link_to '#aside', class: 'show-aside' do
+        %i.fa.fa-angle-left
       %section.col-md-9
         = render "events/event_last_push", event: @last_push
         = render 'shared/event_filter'
         .content_list
         = spinner
-      %aside.col-md-3.project-side.hidden-sm.hidden-xs
+      %aside.col-md-3.project-side
         .clearfix
           - if @project.archived?
             .alert.alert-warning