Added mockup of the link to view demo in a new window and the view source spindown that need to be added above and below the description under the iframe. Demo css updated with styles needed and made Trebuchet MS the font on all rules.

2 files changed, 25 insertions, 7 deletions

diff --git a/demos/demos.css b/demos/demos.css
index ce918b1d7..fe5baedf9 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -10,7 +10,7 @@ table {
    -------------------------------- */
 
 body {
-	font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
+	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 }
 
 /* Layout
@@ -31,7 +31,7 @@ body {
 .layout-grid td.normal {
 	border-left: 1px solid #ccc;
 	padding: 20px 24px;
-	font-family:  "Lucida Grande", "Arial", "Helvetica", "Verdana", "sans-serif";
+	font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 }
 
 .layout-grid td.demos {
@@ -83,7 +83,7 @@ body {
 	margin: 0;
 	padding: 0;
 	letter-spacing: 0.75pt;
-	font: bold 1.2em 'Arial', 'Helvetica', sans-serif;
+	font: bold 1.2em "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
 	color: #e87b10;
 }
 
@@ -98,7 +98,7 @@ body {
 .demos-nav li a {
 	border-bottom: 1px solid #F4F4F4;
 	display:block;
-	padding: 3px 3px 3px 12px;
+	padding: 3px 3px 3px 3px;
 	font-size: 95%;
 	text-decoration: none;
 	color: #000;
@@ -134,10 +134,10 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
 
 #demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
 
-#demo-config-menu li { font-size:11px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
+#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
 
 #demo-config-menu li a:link,
-#demo-config-menu li a:visited { display:block; padding:2px 8px 3px; border-bottom:1px dotted #b3b3b3; }
+#demo-config-menu li a:visited { display:block; padding:3px 8px 2px; border-bottom:1px dotted #b3b3b3; }
 #demo-config-menu li a:hover,
 #demo-config-menu li a:active { background-color:#f6f6f6; }
 
@@ -191,3 +191,6 @@ div.demo-description {
 .left-nav .demos-nav {
 	padding-right: 10px;
 }
+
+#demo-link { font-size:11px;  margin:6px 0 20px 0; }
+#demo-link a span.ui-icon { float:left; margin-right:3px; }
diff --git a/demos/index.html b/demos/index.html
index 8b8d9253e..7340a7077 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -160,7 +160,7 @@
 		function updateDemoNotes() {
 			var notes = $('#demo-frame .demo-description');
 			if ($('#demo-notes').length == 0) {
-				$('<div id="demo-notes"></div>').insertAfter('#demo-config');
+				$('<div id="demo-notes"></div>sdfdffd').insertAfter('#demo-config');
 			}						
 			$('#demo-notes').hide().empty().html(notes.html());
 			$('#demo-notes').fadeIn();
@@ -209,6 +209,21 @@
 					<p>
 						These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
 					</p>
+					
+				
+				<iframe></iframe>
+				
+				<div id="demo-link">
+					<a href="foo" class="demoWindowLink"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a>
+				</div>
+				
+				<p>The description for the demo goes here, below the link to open the demo in a new window. The description for the demo goes here, below the link to open the demo in a new window. The description for the demo goes here, below the link to open the demo in a new window.</p>
+				
+				<div id="demo-source">
+					<a href="#" class="source-closed">View source</a><!-- change the class to "source-open" when code is visible -->
+				</div>
+				
+				
 					<?php  } ?>
 			</div>