added breadcrumb collapse-on-small-widths behavior

config.rb

@@ -1,3 +1,6 @@
+Encoding.default_external = "utf-8" 
+# ^ this ^ is here because it prevents the following error:
+# Encoding::InvalidByteSequenceError on line ["22"] of /usr/lib/ruby/vendor_ruby/execjs/encoding.rb: "\xE6" on US-ASCII
 require 'compass/import-once/activate'
 require 'autoprefixer-rails'
 # Require any additional compass plugins here.

public/assets/javascripts/navigation/breadcrumbs.js

@@ -0,0 +1,38 @@
+function collision($div1, $div2) {
+  var x1 = $div1.offset().left;
+  var y1 = $div1.offset().top;
+  var h1 = $div1.outerHeight(true);
+  var w1 = $div1.outerWidth(true);
+  var b1 = y1 + h1;
+  var r1 = x1 + w1;
+  var x2 = $div2.offset().left;
+  var y2 = $div2.offset().top;
+  var h2 = $div2.outerHeight(true);
+  var w2 = $div2.outerWidth(true);
+  var b2 = y2 + h2;
+  var r2 = x2 + w2;
+
+  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
+  return true;
+}
+
+var result
+window.setInterval(function() {
+  result = collision($('.navigation-left .navigation-item:last-child'), $('.navigation-search'));
+  console.log('' + result)
+  if (result === true) {
+    $('.navigation-left').addClass('collapsed');
+  }
+  unsetBreadCrumbs ()
+}, 200);
+
+// can't use the above function to unset breadcrumbs because immediately on collapse the above function returns false and would unset and reset recursively
+function unsetBreadCrumbs () {
+  if (window.innerWidth >= 700 && $('.navigation-left').hasClass('collapsed')) {
+    $('.collapsed').removeClass('collapsed');
+  }
+}
+
+// this script is meant to detect when the left section of the nav (breadcrumbs) collide with the right side of the nav (nav-search)
+// needs to be done this way because the width of left-nav is variable
+// when collision = true, apply .collapsed to the <ul.nav-left>, and css should handle the rest

public/{kevin}

@@ -0,0 +1 @@
+../storage/app

resources/assets/scss/partials/_navigation.scss

@@ -9,6 +9,7 @@
   padding: 0;
   position: fixed;
   top: -$status-height;
+  white-space: nowrap;
   width: 100vw;
   z-index: 9999;
 

resources/assets/scss/partials/navigation/_left.scss

@@ -68,6 +68,33 @@
       color: palette('green', accent);
     }
   }
+  // start new
+  // .collapsed will be applied when breadcrumbs.js detects collision between the two designated elements
+  &.collapsed {
+    li {
+      overflow: hidden;
+      &:after {
+        background: rgb(227,227,227);
+        background: linear-gradient(90deg, rgba(227,227,227,0.4) 0%, rgba(227,227,227,1) 35%);
+        padding-left: 1em;
+      }
+    }
+    & a {
+      @include transition();
+
+      max-width: 2em;
+    }
+    & a:hover,
+    & a:focus,
+    & li:hover a {
+      max-width: 1000px;
+    }
+    & li:hover:after {
+      background: transparent;
+      padding-left: 0;
+    }
+  }
+  // end new
 }
 
 @media screen and (max-width: $max-mobile-xs-width) {

resources/views/partials/nav.blade.php

@@ -62,7 +62,44 @@
       @include("partials.menu.sideMenu")
     @endif
   </ul>
+  <!--<script src="/assets/javascripts/navigation/breadcrumbs.js"></script>-->
+  <script type="text/javascript">
+    function collision($div1, $div2) {
+      var x1 = $div1.offset().left;
+      var y1 = $div1.offset().top;
+      var h1 = $div1.outerHeight(true);
+      var w1 = $div1.outerWidth(true);
+      var b1 = y1 + h1;
+      var r1 = x1 + w1;
+      var x2 = $div2.offset().left;
+      var y2 = $div2.offset().top;
+      var h2 = $div2.outerHeight(true);
+      var w2 = $div2.outerWidth(true);
+      var b2 = y2 + h2;
+      var r2 = x2 + w2;
 
+      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
+      return true;
+    }
+    
+    var result
+    window.setInterval(function() {
+      result = collision($('.navigation-left .navigation-item:last-child'), $('.navigation-search'));
+      console.log('' + result)
+      if (result === true) {
+        $('.navigation-left').addClass('collapsed');
+      }
+      unsetBreadCrumbs ()
+    }, 200);
+    
+    function unsetBreadCrumbs () {
+      if (window.innerWidth >= 700 && $('.navigation-left').hasClass('collapsed')) {
+        $('.collapsed').removeClass('collapsed');
+      }
+    }
+    
+  </script>
+
   <script type="text/javascript">
     var globalQuickSearchUrl = '{{ action('ProjectSearchController@globalQuickSearch') }}';
     var globalSearchUrl = '{{action('ProjectSearchController@globalSearch')}}';