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

6 files changed, 39 insertions, 80 deletions

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