Make tabs responsive

static/css/core-ui.css

@@ -81,12 +81,16 @@
   margin: 0px;
   padding: 0px;
   width: 82px;
-  background-color: #e8f1f6;
+  display: table-cell;
-  border-right: 1px solid #DDE7ED;
+  vertical-align: top;
+}
 
+.co-tab-element {
   display: table-cell;
   float: none;
   vertical-align: top;
+  background-color: #e8f1f6;
+  border-right: 1px solid #DDE7ED;
 }
 
 .co-tab-content {
@@ -102,7 +106,6 @@
   border-bottom: 1px solid #DDE7ED;
 }
 
-
 .co-tabs li.active {
   background-color: white;
   border-right: 1px solid white;
@@ -116,6 +119,10 @@
   line-height: 82px;
   text-align: center;
   font-size: 36px;
+}
+
+.co-tabs li a i {
+  font-size: 36px;
   color: gray;
 }
 
@@ -123,6 +130,93 @@
   color: black;
 }
 
+.co-tabs .xs-toggle {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .co-tabs {
+    display: block;
+    width: auto;
+    border-right: none;
+    border-bottom: 1px solid #DDE7ED;
+  }
+
+  .co-tab-element {
+    position: relative;
+    display: block;
+  }
+
+  .co-tab-element .xs-toggle {
+    display: inline-block;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 4;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    font-size: 18px;
+    text-align: center;
+    line-height: 40px;
+    border: 2px solid #DDE7ED;
+    background: white;
+  }
+
+  .co-tab-element.closed .xs-toggle:before {
+    content: "\f0d7";
+    font-family: FontAwesome;
+  }
+
+  .co-tab-element.open .xs-toggle:before {
+    content: "\f0d8";
+    font-family: FontAwesome;
+  }
+
+  .co-tab-element .xs-label {
+    line-height: 60px;
+    font-size: 16px;
+    margin-left: 10px;
+    display: inline-block !important;
+    color: gray;
+  }
+
+  .co-tabs li a {
+    height: 60px;
+    line-height: 60px;
+    white-space: nowrap;
+    width: 100%;
+    text-align: left;
+    padding-left: 20px;
+    text-decoration: none !important;
+    font-size: 28px;
+  }
+
+  .co-tabs li a i {
+    vertical-align: middle;
+    font-size: 28px;
+  }
+
+  .co-tabs li.active a .xs-label {
+    color: black;
+  }
+
+  .co-tabs li.active a i {
+    color: black;
+  }
+
+  .co-tab-element.open li {
+    display: block;
+  }
+
+  .co-tab-element.closed li {
+    display: none;
+  }
+
+  .co-tab-element.closed li.active {
+    display: block;
+  }
+}
 
 .co-main-content-panel {
   margin-bottom: 20px;

static/directives/cor-tab.html

@@ -6,8 +6,7 @@
               data-placement="right"
               data-container="body"
               style="display:inline-block"
-              bs-tooltip>
+              bs-tooltip><span ng-transclude/></span><span class="visible-xs-inline xs-label">{{ tabTitle }}</span>
-             <span ng-transclude/></span>
         </span>
     </a>
 </li>

static/directives/cor-tabs.html

@@ -1 +1,4 @@
-<ul class="co-tabs col-md-1" ng-transclude></ul>
+<span class="co-tab-element" ng-class="isClosed ? 'closed' : 'open'">
+  <span class="xs-toggle" ng-click="toggleClosed($event)"></span>
+  <ul class="co-tabs col-md-1" ng-transclude></ul>
+</span>

static/js/core-ui.js

@@ -244,6 +244,13 @@ angular.module("core-ui", [])
       restrict: 'C',
       scope: {},
       controller: function($rootScope, $scope, $element) {
+        $scope.isClosed = true;
+
+        $scope.toggleClosed = function(e) {
+          $scope.isClosed = !$scope.isClosed;
+          e.stopPropagation();
+          e.preventDefault();
+        };
       }
     };
     return directiveDefinitionObject;