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

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"

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)

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: ->

app/assets/javascripts/aside.js.coffee

+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')

app/assets/javascripts/sidebar.js.coffee

-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'

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";

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);
 }

app/assets/stylesheets/generic/sidebar.scss

-.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;
- }
-}

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"

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

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

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

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