Merge branch 'release-0.6.1'

Author: dmolsen

CHANGELOG

@@ -1,5 +1,9 @@
 THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
 
+PL-v0.6.1
+ - FIX: fixed the height of the HTML pre element on the pattern detail view
+ - ADD: added in support for viewing the generated CSS on the pattern detail view
+
 PL-v0.6.0
  - ADD: a UI list of the current media query widths from the CSS
  - ADD: a pattern's "lineage" now displays in the UI under code view

builder/builder.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Builder CLI - v0.6.0
+ * Pattern Lab Builder CLI - v0.6.1
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

builder/lib/builder.lib.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Builder Class - v0.6.0
+ * Pattern Lab Builder Class - v0.6.1
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

builder/lib/generator.lib.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Generator Class - v0.6.0
+ * Pattern Lab Generator Class - v0.6.1
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

builder/lib/watcher.lib.php

@@ -1,7 +1,7 @@
 <?php
 
 /*!
- * Pattern Lab Watcher Class - v0.6.0
+ * Pattern Lab Watcher Class - v0.6.1
  *
  * Copyright (c) 2013 Dave Olsen, http://dmolsen.com
  * Licensed under the MIT license

public/styleguide/css/styleguide.css

@@ -553,6 +553,13 @@
   #sg-annotation-container a, #sg-code-container a {
     color: #dddddd; }
 
+#sg-code-container pre {
+  max-height: 300px;
+  padding: 0 1em; }
+
+#sg-code-container .with-css pre {
+  max-height: 200px; }
+
 #sg-annotation-close-btn, #sg-code-close-btn {
   color: #fff;
   position: absolute;

public/styleguide/css/styleguide.scss

@@ -794,6 +794,15 @@ $animate-quick: 0.2s;
     }
 }
 
+#sg-code-container pre {
+	max-height: 300px;
+	padding: 0 1em;
+}
+
+#sg-code-container .with-css pre {
+	max-height: 200px;
+}
+
 #sg-annotation-close-btn, #sg-code-close-btn {
 	color: #fff;
 	position: absolute;

public/styleguide/js/code-viewer.js

@@ -55,7 +55,7 @@ var codeViewer = {
 	codeContainerInit: function() {
 
 		if (document.getElementById("sg-code-container") == undefined) {
-			$('<div id="sg-code-container" style="display: none;"></div>').html('<a href="#" id="sg-code-close-btn">Close</a><div id="sg-code-lineage" style="display: none;"><h2>Lineage</h2><p>This pattern contains the following patterns: <span id="sg-code-lineage-fill"></span></p></div><div id="sg-code-html"><h2>HTML</h2><pre><code id="sg-code-html-fill" class="language-markup"></code></pre></div>').appendTo('body').css('bottom',-$(document).outerHeight());
+			$('<div id="sg-code-container" style="display: none;"></div>').html('<a href="#" id="sg-code-close-btn">Close</a><div id="sg-code-lineage" style="display: none;"><h2>Lineage</h2><p>This pattern contains the following patterns: <span id="sg-code-lineage-fill"></span></p></div><div id="sg-code-html"><h2>HTML</h2><pre><code id="sg-code-html-fill" class="language-markup"></code></pre></div><div id="sg-code-css" class="with-css" style="display: none;"><h2>CSS</h2><pre><code id="sg-code-css-fill" class="language-css"></code></pre></div>').appendTo('body').css('bottom',-$(document).outerHeight());
 		}
 
 		if (codeViewer.sw < codeViewer.breakpoint) {
@@ -111,6 +111,7 @@ var codeViewer = {
 
 			// draw CSS
 			if (css.indexOf("{{ patternCSS }}") == -1) {
+				$("#sg-code-html").addClass("with-css");
 				$("#sg-code-css").css("display","block");
 				$("#sg-code-css-fill").text(css);
 				Prism.highlightElement(document.getElementById("sg-code-css-fill"));