Merge remote-tracking branch 'dominikmatt/feature/scrollable-overlay-…

…tabs' into develop
massiveart · Apr 28, 2016 · 388a4d1 · 388a4d1
2 parents 41bd39c + 8415ee6
commit 388a4d1
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # CHANGELOG for husky
 
 * dev-develop
+    * BUGFIX      #644 Fixed scrollable tabs
     * BUGFIX      #633 Removed bound effect respectively additional scrollbar
 
 * 0.19.1 (2016-04-26)

diff --git a/demos/overlay/index.html b/demos/overlay/index.html
@@ -214,7 +214,10 @@
                             tabs: [
                                 {title: 'Info', data: '<h2>Info Tab</h2><p>I dont support Enter and Esc</p>'},
                                 {title: 'Languages', data: '<h2>Languages Tab</h2>'},
-                                {title: 'Versions', data: '<h2>Versions</h2>'}
+                                {title: 'Versions', data: '<h2>Versions</h2>'},
+                                {title: 'preview', data: '<h2>Preview</h2>'},
+                                {title: 'scrollable', data: '<h2>Scrollable</h2>'},
+                                {title: 'last-tab', data: '<h2>last tab</h2>'}
                             ],
                             languageChanger: {
                                 locales: ['EN', 'DE', 'ES'],

diff --git a/dist/husky.css b/dist/husky.css
@@ -9034,17 +9034,18 @@ a.btn-black, a.btn-highlight {
 .tabs-container {
   background-color: #fff;
   position: relative;
+  overflow: auto;
   /**
   *** Deactivated Skin
   **/
 }
-/* line 10, ../scss/modules/tabs.scss */
+/* line 11, ../scss/modules/tabs.scss */
 .tabs-container ul {
   padding: 0;
   margin: 0;
   white-space: nowrap;
 }
-/* line 15, ../scss/modules/tabs.scss */
+/* line 16, ../scss/modules/tabs.scss */
 .tabs-container ul li {
   display: inline-block;
   list-style-type: none;
@@ -9055,19 +9056,19 @@ a.btn-black, a.btn-highlight {
   min-width: 60px;
   cursor: pointer;
 }
-/* line 25, ../scss/modules/tabs.scss */
+/* line 26, ../scss/modules/tabs.scss */
 .tabs-container ul li a {
   color: black;
   text-decoration: none;
   font-size: 14px;
   outline: 0;
 }
-/* line 33, ../scss/modules/tabs.scss */
+/* line 34, ../scss/modules/tabs.scss */
 .tabs-container ul li.is-selected a {
   color: #52B6CA;
   font-weight: bold;
 }
-/* line 41, ../scss/modules/tabs.scss */
+/* line 42, ../scss/modules/tabs.scss */
 .tabs-container .marker {
   height: 2px;
   background: #52B6CA;
@@ -9076,22 +9077,27 @@ a.btn-black, a.btn-highlight {
   width: 0px;
   left: 0px;
 }
-/* line 50, ../scss/modules/tabs.scss */
+/* line 51, ../scss/modules/tabs.scss */
 .tabs-container .marker.animate {
   -moz-transition: left 350ms ease, width 350ms ease;
   -o-transition: left 350ms ease, width 350ms ease;
   -webkit-transition: left 350ms ease, width 350ms ease;
   transition: left 350ms ease, width 350ms ease;
 }
-/* line 60, ../scss/modules/tabs.scss */
+/* line 61, ../scss/modules/tabs.scss */
 .tabs-container.deactivated ul li a, .tabs-container.deactivated ul li a:hover {
   color: #999;
   cursor: default;
 }
-/* line 64, ../scss/modules/tabs.scss */
+/* line 65, ../scss/modules/tabs.scss */
 .tabs-container.deactivated ul li.is-selected a {
   color: #52B6CA;
 }
+/* line 71, ../scss/modules/tabs.scss */
+.has-language-chooser .tabs-container {
+  width: calc(100% - 100px);
+  border-right: 1px solid #e9e9e9;
+}
 
 /*styles related to the whole container*/
 /* line 10, ../scss/modules/toolbar.scss */

diff --git a/dist/husky.js b/dist/husky.js
@@ -43578,6 +43578,7 @@ define('__component__$overlay@husky',[], function() {
         renderLanguageChanger: function(slide) {
             var $element = this.sandbox.dom.createElement('<div/>');
 
+            this.sandbox.dom.addClass(this.overlay.$el, 'has-language-chooser');
             this.overlay.slides[slide].$languageChanger = this.sandbox.dom.createElement(
                 '<div class="' + constants.languageChangerClass + '"/>'
             );

diff --git a/dist/husky.min.css b/dist/husky.min.css
diff --git a/dist/husky.min.js b/dist/husky.min.js
diff --git a/husky_components/overlay/main.js b/husky_components/overlay/main.js
@@ -696,6 +696,7 @@ define([], function() {
         renderLanguageChanger: function(slide) {
             var $element = this.sandbox.dom.createElement('<div/>');
 
+            this.sandbox.dom.addClass(this.overlay.$el, 'has-language-chooser');
             this.overlay.slides[slide].$languageChanger = this.sandbox.dom.createElement(
                 '<div class="' + constants.languageChangerClass + '"/>'
             );

diff --git a/scss/modules/tabs.scss b/scss/modules/tabs.scss
@@ -6,6 +6,7 @@
     $tabsHeight: 50px;
     background-color: $white;
     position: relative;
+    overflow: auto;
 
     ul {
         padding: 0;
@@ -66,6 +67,11 @@
             }
         }
     }
+
+    .has-language-chooser & {
+        width: calc(100% - 100px); //reduce language chooser width
+        border-right: 1px solid $grayLightMedium2;
+    }
 }