sai menu is now autocollapsing (little hide issue)

sai/modules/saistart_sys_sai/tpl/content_loggedin.tpl

@@ -4,22 +4,23 @@
         <h4 class="text-info">${sai_start_welcome_description}</h4>
     </div>
     <div class="clearfix row-same-height row-full-height">
-        <div class="col-xs-3 col-xs-height col-full-height well">
+        <div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
             <h2 class="muted"><a href="#!config">${basic_project}</a></h2>
             <b>${basic_name}:</b> ${project_name}<br/>
             <b>${basic_URL}:</b> <a href="${project_url}" target="_blank">${project_url}</a><br/>
             <b>${basic_progress}:</b> ${project}%
         </div>
-        <div class="col-xs-3 col-xs-height col-full-height well">
+        <div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
             <h2 class="muted"><a href="#!log(stats)">${basic_analytics}</a></h2>
             ${analytics}
         </div>
-        <div class="col-xs-3 col-xs-height col-full-height well">
+        <div class="clearfix visible-sm-block"></div>
+        <div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
             <h2 class="muted">Git</h2>
             <b>Current Project Version:</b> ${git_project}<br/>
             <b>Current SYSTEM Version:</b> ${git_system}
         </div>
-        <div class="col-xs-3 col-xs-height col-full-height well">
+        <div class="col-sm-6 col-xs-3 col-xs-height col-full-height well">
             <h2 class="muted"><a href="#!login">${basic_logout}</a></h2>
             <table class="table table-hover table-condensed">
                 <tr>

sai/page/default_page.php

@@ -40,6 +40,7 @@ class default_page extends \SYSTEM\PAGE\Page {
     private static function js(){
         $result = '<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/libs/jquery.min.js').'" type="text/javascript"></script>'.
                   '<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/libs/bootstrap.min.js').'" type="text/javascript"></script>'.
+                  '<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/libs/collapse.js').'" type="text/javascript"></script>'.
                   '<script type="text/javascript" language="JavaScript" src="./sai.php?call=files&amp;cat=sys&amp;id=system.js"></script>'.
                   '<script src="'.\SYSTEM\WEBPATH(new \SYSTEM\PSAI(),'page/js/sai.js').'" type="text/javascript"></script>'.
                   '<script src="https://www.google.com/jsapi" type="text/javascript"></script>'.

sai/page/js/libs/collapse.js

@@ -0,0 +1,211 @@
+/* ========================================================================
+ * Bootstrap: collapse.js v3.3.4
+ * http://getbootstrap.com/javascript/#collapse
+ * ========================================================================
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * ======================================================================== */
+
+
++function ($) {
+  'use strict';
+
+  // COLLAPSE PUBLIC CLASS DEFINITION
+  // ================================
+
+  var Collapse = function (element, options) {
+    this.$element      = $(element)
+    this.options       = $.extend({}, Collapse.DEFAULTS, options)
+    this.$trigger      = $('[data-toggle="collapse"][href="#' + element.id + '"],' +
+                           '[data-toggle="collapse"][data-target="#' + element.id + '"]')
+    this.transitioning = null
+
+    if (this.options.parent) {
+      this.$parent = this.getParent()
+    } else {
+      this.addAriaAndCollapsedClass(this.$element, this.$trigger)
+    }
+
+    if (this.options.toggle) this.toggle()
+  }
+
+  Collapse.VERSION  = '3.3.4'
+
+  Collapse.TRANSITION_DURATION = 350
+
+  Collapse.DEFAULTS = {
+    toggle: true
+  }
+
+  Collapse.prototype.dimension = function () {
+    var hasWidth = this.$element.hasClass('width')
+    return hasWidth ? 'width' : 'height'
+  }
+
+  Collapse.prototype.show = function () {
+    if (this.transitioning || this.$element.hasClass('in')) return
+
+    var activesData
+    var actives = this.$parent && this.$parent.children('.panel').children('.in, .collapsing')
+
+    if (actives && actives.length) {
+      activesData = actives.data('bs.collapse')
+      if (activesData && activesData.transitioning) return
+    }
+
+    var startEvent = $.Event('show.bs.collapse')
+    this.$element.trigger(startEvent)
+    if (startEvent.isDefaultPrevented()) return
+
+    if (actives && actives.length) {
+      Plugin.call(actives, 'hide')
+      activesData || actives.data('bs.collapse', null)
+    }
+
+    var dimension = this.dimension()
+
+    this.$element
+      .removeClass('collapse')
+      .addClass('collapsing')[dimension](0)
+      .attr('aria-expanded', true)
+
+    this.$trigger
+      .removeClass('collapsed')
+      .attr('aria-expanded', true)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.$element
+        .removeClass('collapsing')
+        .addClass('collapse in')[dimension]('')
+      this.transitioning = 0
+      this.$element
+        .trigger('shown.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    var scrollSize = $.camelCase(['scroll', dimension].join('-'))
+
+    this.$element
+      .one('bsTransitionEnd', $.proxy(complete, this))
+      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)[dimension](this.$element[0][scrollSize])
+  }
+
+  Collapse.prototype.hide = function () {
+    if (this.transitioning || !this.$element.hasClass('in')) return
+
+    var startEvent = $.Event('hide.bs.collapse')
+    this.$element.trigger(startEvent)
+    if (startEvent.isDefaultPrevented()) return
+
+    var dimension = this.dimension()
+
+    this.$element[dimension](this.$element[dimension]())[0].offsetHeight
+
+    this.$element
+      .addClass('collapsing')
+      .removeClass('collapse in')
+      .attr('aria-expanded', false)
+
+    this.$trigger
+      .addClass('collapsed')
+      .attr('aria-expanded', false)
+
+    this.transitioning = 1
+
+    var complete = function () {
+      this.transitioning = 0
+      this.$element
+        .removeClass('collapsing')
+        .addClass('collapse')
+        .trigger('hidden.bs.collapse')
+    }
+
+    if (!$.support.transition) return complete.call(this)
+
+    this.$element
+      [dimension](0)
+      .one('bsTransitionEnd', $.proxy(complete, this))
+      .emulateTransitionEnd(Collapse.TRANSITION_DURATION)
+  }
+
+  Collapse.prototype.toggle = function () {
+    this[this.$element.hasClass('in') ? 'hide' : 'show']()
+  }
+
+  Collapse.prototype.getParent = function () {
+    return $(this.options.parent)
+      .find('[data-toggle="collapse"][data-parent="' + this.options.parent + '"]')
+      .each($.proxy(function (i, element) {
+        var $element = $(element)
+        this.addAriaAndCollapsedClass(getTargetFromTrigger($element), $element)
+      }, this))
+      .end()
+  }
+
+  Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
+    var isOpen = $element.hasClass('in')
+
+    $element.attr('aria-expanded', isOpen)
+    $trigger
+      .toggleClass('collapsed', !isOpen)
+      .attr('aria-expanded', isOpen)
+  }
+
+  function getTargetFromTrigger($trigger) {
+    var href
+    var target = $trigger.attr('data-target')
+      || (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
+
+    return $(target)
+  }
+
+
+  // COLLAPSE PLUGIN DEFINITION
+  // ==========================
+
+  function Plugin(option) {
+    return this.each(function () {
+      var $this   = $(this)
+      var data    = $this.data('bs.collapse')
+      var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
+
+      if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
+      if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  var old = $.fn.collapse
+
+  $.fn.collapse             = Plugin
+  $.fn.collapse.Constructor = Collapse
+
+
+  // COLLAPSE NO CONFLICT
+  // ====================
+
+  $.fn.collapse.noConflict = function () {
+    $.fn.collapse = old
+    return this
+  }
+
+
+  // COLLAPSE DATA-API
+  // =================
+
+  $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
+    var $this   = $(this)
+
+    if (!$this.attr('data-target')) e.preventDefault()
+
+    var $target = getTargetFromTrigger($this)
+    var data    = $target.data('bs.collapse')
+    var option  = data ? 'toggle' : $this.data()
+
+    Plugin.call($target, option)
+  })
+
+}(jQuery);

sai/page/js/sai.js

@@ -1,6 +1,5 @@
 $(document).ready(function() {
     new SYSTEM('./sai.php',42,'start',sys_hashchange);
-    
     $('#sai_navbar ul li a, #project_navbar ul li a').click(function () {
         $('#sai_navbar li, #project_navbar li').each(function(){
             $(this).removeClass('active');});
@@ -11,8 +10,11 @@ $(document).ready(function() {
     $('.brand').click(function(){
         location.reload();
     }); 
-   $(document).on('ready', autocollapse);
+    $(".navbar-toggle").click(function(){
-   $(window).on('resize', autocollapse);
+            $('#navbar-collapse-1').collapse('toggle');
+    });
+    $(document).on('ready', autocollapse);
+    $(window).on('resize', autocollapse);
 });
 
 function sys_hashchange(state){

sai/page/tpl/sai.tpl

@@ -10,21 +10,24 @@
     </head>
     <body>
         <nav id="sys_autocollapse" class="navbar navbar-default" role="navigation">
-            <div class="navbar-header">
+            <div class="container-fluid">  
-                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
+                <div class="navbar-header">
-                  <span class="sr-only">Toggle navigation</span>
+                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
-                  <span class="icon-bar"></span>
+                      <span class="sr-only">Toggle navigation</span>
-                  <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
-                  <span class="icon-bar"></span>
+                      <span class="icon-bar"></span>
-                </button>
+                      <span class="icon-bar"></span>
-                <a id="sai_brand" class="navbar-brand" href="#!start">SAI</a>
+                    </button>
+                    <a id="sai_brand" class="navbar-brand" href="#!start">SAI</a>
+                </div>
+                 <!-- Collect the nav links, forms, and other content for toggling -->
+                <div id="navbar-collapse-1" class="collapse navbar-collapse">
+                    <ul class="nav navbar-nav">
+                        ${menu_start}
+                        ${menu_sys}
+                    </ul>
+                </div><!-- /.navbar-collapse -->
             </div>  
-            <div id="navbar-collapse-1" class="collapse navbar-collapse">
-                <ul class="nav navbar-nav">
-                    ${menu_start}
-                    ${menu_sys}
-                </ul>
-            </div><!-- /.navbar-collapse -->
         </nav>
         <div class="sai_wrapper">
             <div class="container-fluid">