Fix for makeExample styling without linenumbers losing scrollbar + default handling of makeExamples with only one line

closes #427

public/_includes/_util-fns.jade

@@ -2,8 +2,9 @@
 
 mixin makeExample(filePath, region, title, stylePatterns)
   - var language = attributes.language || getExtn(filePath);
-  - var format = attributes.format || "linenums";
   - var frag = getFrag(filePath, region);
+  - var defaultFormat = frag.split('\n').length > 2 ? "linenums" : "";
+  - var format = attributes.format || defaultFormat;
   if (title)
     .example-title #{title}
   code-example(language="#{language}" format="#{format}")

public/docs/_includes/styleguide/_code-examples.jade

@@ -9,8 +9,6 @@ include ../../../_includes/_util-fns
     p Below are some examples of how you can add/customize code examples in a page.
 
   .showcase-content
-    .l-sub-section
-
     :marked
       ### Including a code example from the `_examples` folder
 
@@ -78,7 +76,7 @@ include ../../../_includes/_util-fns
 
     +makeTabs('styleguide/js/index.html, styleguide/js/spec.js', null, 'index.html,unit test')
 
-    .l-sub-section
+
     :marked
       ### Marking up an example file for use by the `makeExample` and `makeTabs` mixins
 
@@ -178,7 +176,7 @@ include ../../../_includes/_util-fns
         margin: 0 auto;
       }
 
-    .l-sub-section
+
     :marked
       ### Including a named #docregion via the makeExample or makeTabs mixins.
 
@@ -195,7 +193,7 @@ include ../../../_includes/_util-fns
 
     +makeExample('styleguide/js/app.js', 'class-w-annotations', "Extracted region")
 
-    .l-sub-section
+
     :marked
       ### Additional styling
 
@@ -249,7 +247,7 @@ include ../../../_includes/_util-fns
     -var stylePatterns = [{ pnk: /script (src=.*")/g }, {pnk: /(result)/ }];
     +makeTabs('styleguide/js/index.html, styleguide/js/spec.js', null, 'index.html,unit test', stylePatterns)
 
-    .l-sub-section
+
     :marked
       ### Including a JSON file or just parts of one
 
@@ -303,7 +301,6 @@ include ../../../_includes/_util-fns
     -  var styles = { pnk: /(^.*dependencies[\s\S]*  \})/gm };
     +makeJson('styleguide/package.json', {paths: 'name, version, dependencies '}, "Foo", styles )
 
-    .l-sub-section
     :marked
       ### Inline code and code examples provided directly i.e. not from an example file.
 
@@ -324,14 +321,14 @@ include ../../../_includes/_util-fns
       code-example(format="linenums" language="javascript").
         //SOME CODE
 
-    .l-sub-section
+
     h3 Specify starting line number
 
     code-example(language="javascript" format="linenums:4").
       code-example(language="html" format="linenums:4").
         var title = "This starts on line four";
 
-    .l-sub-section
+
     h3 Specify a language
 
     p.
@@ -345,7 +342,7 @@ include ../../../_includes/_util-fns
       <h1>Title</h1>
       <p>This is some copy...</p>
 
-    .l-sub-section
+
     h3 Code Highlighting
     p.
       There are three types of highlights available
@@ -366,7 +363,6 @@ include ../../../_includes/_util-fns
       // class="otl"
       var match = "The <span class='otl'>bird</span> ate <span class='otl'>bird</span> seed near the <span class='otl'>bird</span> bath ";
 
-    .l-sub-section
     h3 Code Tabs
     p.
       Code Tabs are a great way to show different languages and versions
@@ -390,7 +386,6 @@ include ../../../_includes/_util-fns
         code-pane(format="linenums" name="Tab 2").
           // TAB 2 CONTENT
 
-    .l-sub-section
     :marked
       ### Combining makeExample, makeTabs mixins with code-example style attributes
       As mentioned above the `makeExample` and `makeTabs` mixins are built on top of the `code-example` style. By default
@@ -416,7 +411,7 @@ include ../../../_includes/_util-fns
 
     +makeExample('styleguide/js/app.js', 'class-w-annotations')(format=".")
 
-    .l-sub-section
+
     :marked
       ### Code examples in angular/angular source code
 
@@ -468,7 +463,7 @@ include ../../../_includes/_util-fns
        *
       **/
 
-      .l-sub-section
+
     :marked
       ### Cross references to Developer guide pages in angular/angular source comments.
 

public/docs/ts/latest/guide/displaying-data.jade

@@ -186,7 +186,7 @@ figure.image-display
   advantage of a TypeScript short-cut in our declaration of the constructor parameters.
 
   Consider the first parameter:
-+makeExample('displaying-data/ts/src/app/hero.ts', 'id-parameter')(format=".")
++makeExample('displaying-data/ts/src/app/hero.ts', 'id-parameter')
 
 :marked
   That brief syntax simultaneously
@@ -221,7 +221,7 @@ figure.image-display
 
   The Angular `NgIf` directive will insert or remove an element based on a truthy/falsey condition.
   We can see it in action by adding the following paragraph at the bottom of the template:
-+makeExample('displaying-data/ts/src/app/app.final.ts', 'message')(format=".")
++makeExample('displaying-data/ts/src/app/app.final.ts', 'message')
 .alert.is-important
   :marked
     Don't forget the leading asterisk (\*) in front of `*ng-if`. It is an essential part of the syntax.
@@ -243,11 +243,11 @@ figure.image-display
   As with the `NgFor`, we must add the `NgIf` directive to the component's metadata.
 
   We should extend our `import` statement as before ...
-+makeExample('displaying-data/ts/src/app/app.3.ts', 'import-ng-if')(format=".")
++makeExample('displaying-data/ts/src/app/app.3.ts', 'import-ng-if')
 
 :marked
   ... and add it to the directives array:
-+makeExample('displaying-data/ts/src/app/app.3.ts', 'directives')(format=".")
++makeExample('displaying-data/ts/src/app/app.3.ts', 'directives')
 
 :marked
   Try it out. We have four items in the array so the message should appear.
@@ -267,11 +267,11 @@ figure.image-display
   Let's simplify our lives, discard the `NgFor` and `NgIf`, use the constant for all of them.
 
   We'll revise our `import` statement one last time.
-+makeExample('displaying-data/ts/src/app/app.final.ts', 'imports')(format=".")
++makeExample('displaying-data/ts/src/app/app.final.ts', 'imports')
 
 :marked
   and update the `directives` metadata
-+makeExample('displaying-data/ts/src/app/app.final.ts', 'directives')(format=".")
++makeExample('displaying-data/ts/src/app/app.final.ts', 'directives')
 
 :marked
   Pro tip: we register this constant in almost every template we write.

public/resources/css/module/_code.scss

@@ -26,7 +26,8 @@
   background: $steel;
   font-family: $mono-font;
   color: $snow;
-  overflow: hidden;
+  width: auto;
+  overflow: auto;
   position: relative;
   padding: 0px;
   font-size: 15px;