Improve offcanvas

- active by default
- fix margin
- use variables
- toggle active when tabs are added or removed

review16771002

index.html

@@ -61,7 +61,7 @@ this repository contains the full copyright notices and license terms. -->
             </div>
         </nav>
         <div id="main" class="container-fluid">
-            <div class="row row-offcanvas row-offcanvas-left"
+            <div class="row row-offcanvas row-offcanvas-left active"
                 style="height: calc(100vh - 50px - 1px - 20px);">
                 <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="menu" role="navigation"
                     style="overflow-y: auto; height: 100%;"></div>
@@ -80,6 +80,13 @@ this repository contains the full copyright notices and license terms. -->
                     jQuery('[data-toggle="offcanvas"]').click(function() {
                         jQuery('.row-offcanvas').toggleClass('active');
                         });
+                    jQuery('#tabs').on('ready', function() {
+                        if (jQuery(this).find('> .nav-tabs').children().length) {
+                            jQuery('.row-offcanvas').removeClass('active');
+                        } else {
+                            jQuery('.row-offcanvas').addClass('active');
+                        }
+                    });
                     Sao.login();
                     });
         </script>

offcanvas.css

@@ -20,25 +20,49 @@
 
   .row-offcanvas-right
   .sidebar-offcanvas {
-    right: -50%; /* 6 columns */
+    right: calc(-50% + 7px);
   }
 
   .row-offcanvas-left
   .sidebar-offcanvas {
-    left: -50%; /* 6 columns */
+    left: calc(-50% + 7.5px);
   }
 
   .row-offcanvas-right.active {
-    right: 50%; /* 6 columns */
+    right: calc(50% + 7.5px);
   }
 
   .row-offcanvas-left.active {
-    left: 50%; /* 6 columns */
+    left: calc(50% + 7.5px);
   }
 
   .sidebar-offcanvas {
     position: absolute;
     top: 0;
-    width: 50%; /* 6 columns */
+    width: 50%;
+  }
+}
+
+@media screen and (max-width: 479px) {
+  .row-offcanvas-right
+  .sidebar-offcanvas {
+    right: calc(-100% + 15px);
+  }
+
+  .row-offcanvas-left
+  .sidebar-offcanvas {
+    left: calc(-100% + 15px);
+  }
+
+  .row-offcanvas-right.active {
+    right: calc(100% + 15px);
+  }
+
+  .row-offcanvas-left.active {
+    left: calc(100% + 15px);
+  }
+
+  .sidebar-offcanvas {
+    width: 100%;
   }
 }

src/sao.less

@@ -22,7 +22,7 @@
     font-size: 18px;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: @screen-xs-max) {
     .tab-form, .tab-board {
         .navbar-nav > li {
             float: left;
@@ -204,13 +204,13 @@ button {
     text-align: right;
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: @screen-xs-max) {
     .dict-label {
         text-align: left;
     }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (max-width: @screen-xs-max) {
     .treeview.responsive {
         /* Override the width from Sao.View.resize */
         width: 100% !important;

src/tab.js

@@ -156,6 +156,7 @@
                 if (next) {
                     next.find('a').tab('show');
                 }
+                tabs.trigger('ready');
             }.bind(this));
         },
         _close_allowed: function() {
@@ -269,6 +270,7 @@
             Sao.View.resize(tab.el);
         });
         tab_link.tab('show');
+        tabs.trigger('ready');
     };
 
     Sao.Tab.Form = Sao.class_(Sao.Tab, {