Merge pull request #317 from sass/adjacent-tabs

Render syntax examples using adjacent tabs if they're narrow enough

Closes #311

helpers/sass_helpers.rb

@@ -200,9 +200,23 @@ module SassHelpers
         _syntax_div("CSS Output", "css", css_sections, css_paddings, id)
     end
 
+    max_source_width = (scss_sections + sass_sections).map {|s| s.split("\n")}.flatten.map(&:size).max
+    max_css_width = css_sections.map {|s| s.split("\n")}.flatten.map(&:size).max
+
+    can_split = max_css_width && (max_source_width + max_css_width) < 110
+    if can_split
+      if max_source_width < 55 && max_css_width < 55
+        split_location = 0.5
+      else
+        # Put the split exactly in between the two longest lines.
+        split_location = 0.5 + (max_source_width - max_css_width) / 110.0 / 2
+      end
+    end
+
     text = content_tag(:div, contents,
-      class: "code-example",
-      "data-unique-id": @unique_id)
+      class: "code-example #{'can-split' if can_split}",
+      "data-unique-id": @unique_id,
+      "style": ("--split-location: #{split_location * 100}%" if split_location))
 
     # Newlines between tags cause Markdown to parse these blocks incorrectly.
     text = text.gsub(%r{\n+<(/?[a-z0-9]+)}, '<\1')

source/assets/css/components/_sass-syntax-switcher.scss

@@ -1,26 +1,13 @@
 .ui-helper-reset { line-height: inherit; }
 
-.ui-tabs {
+@mixin -active-tab {
+  margin: 0;
 
-  &,
-  .ui-tabs-nav,
-  .ui-tabs-nav li.ui-tabs-active,
-  .ui-tabs-panel { padding: 0; }
-
-  .ui-tabs-nav {
-    margin-top: -1rem;
-    margin-left: -1em;
-
-    a { border: 0; background: none; }
-
-    a:focus {
-      outline: 0px !important;
-      border:none !important;
-      box-shadow:none !important;
+  a {
+    color: $sl-color--regent-grey;
+    cursor: text;
   }
 
-    .ui-tabs-active {
-
   &:after,
   &:before {
     bottom: -3px;
@@ -48,12 +35,32 @@
   }
 }
 
-    li {
-      float: left;
+.ui-tabs {
 
   &,
-      &.ui-tabs-active { margin: 0; }
+  .ui-tabs-nav,
+  .ui-tabs-nav li.ui-tabs-active,
+  .ui-tabs-panel { padding: 0; }
 
+  .ui-tabs-panel-inactive { display: none; }
+
+  .ui-tabs-nav {
+    margin-top: -1rem;
+    margin-left: -1em;
+
+    a { border: 0; background: none; }
+
+    a:focus {
+      outline: 0px !important;
+      border:none !important;
+      box-shadow:none !important;
+    }
+
+    .ui-tabs-active { @include -active-tab; }
+
+    li {
+      float: left;
+      margin: 0;
 
       &.css-tab {
 
@@ -72,8 +79,6 @@
       }
     }
 
-    .ui-tabs-active a { color: $sl-color--regent-grey; }
-
     .ui-tabs-anchor { padding: .75rem 1rem; }
   }
 
@@ -138,3 +143,47 @@ html .ui-button.ui-state-disabled:active { background: none; }
   &,
   * { font-size: 1rem; }
 }
+
+@mixin -split-css-tabs {
+  .ui-tabs.can-split {
+    .ui-tabs-panel {
+      &.scss, &.sass {
+        width: calc(var(--split-location) - 5px);
+        display: inline-block;
+        &.ui-tabs-panel-inactive { display: none; }
+      }
+
+      &.css {
+        width: calc(100% - var(--split-location) - 5px);
+        float: right;
+        &.ui-tabs-panel-inactive { display: block; }
+      }
+    }
+
+
+    &.ui-tabs-panel-css-is-active {
+      .scss, .sass {
+        &.ui-tabs-panel.ui-tabs-panel-previously-active { display: inline-block; }
+      }
+    }
+
+    .css-tab {
+      position: absolute;
+      left: calc(var(--split-location) - 1%);
+      @include -active-tab;
+
+      &,
+      &.ui-tabs-active { margin-left: 0; }
+
+      ::before {content: none}
+    }
+  }
+}
+
+@media screen and (min-width: sl-px-to-rem(1500px)) {
+  body.documentation { @include -split-css-tabs }
+}
+
+@media screen and (min-width: sl-px-to-rem(1000px)) {
+  body.guide { @include -split-css-tabs }
+}

source/assets/js/sass.js

@@ -47,7 +47,32 @@ $(function() {
                 .prepend("<a href='#example-" + id + "-css'>CSS</a>"));
     }
 
-    figure.prepend(ul).tabs({active: 0});
+    figure.prepend(ul).tabs({
+      active: 0,
+      beforeActivate: function(event, ui) {
+        // If multiple panels are visible, the CSS tab shouldn't be clickable.
+        if (ui.newPanel.hasClass('css') &&
+            allPanels.filter(":visible").length > 1) {
+          return false;
+        }
+      },
+      activate: function(event, ui) {
+        if (ui.newPanel.hasClass('css')) {
+          figure.addClass('ui-tabs-panel-css-is-active');
+        } else {
+          figure.removeClass('ui-tabs-panel-css-is-active');
+        }
+
+        allPanels.removeClass('ui-tabs-panel-previously-active');
+        ui.oldPanel.addClass('ui-tabs-panel-inactive').addClass('ui-tabs-panel-previously-active');
+        ui.newPanel.removeClass('ui-tabs-panel-inactive');
+        allPanels.css('display', '');
+      }
+    });
+    var allPanels = figure.find(".ui-tabs-panel");
+
+    allPanels.slice(1).addClass('ui-tabs-panel-inactive');
+    allPanels.css('display', '');
   });
 
   // Switch ALL the tabs (Sass/SCSS) together