x-browser fixes and polish for the site

akdubya · Oct 27, 2010 · 55fe615 · 55fe615
1 parent cb76206
commit 55fe615
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 142 deletions.
diff --git a/docs/index.css b/docs/index.css
@@ -17,13 +17,10 @@ p, h4, h3, .content ul {
 }
 
 h1, h2 {
+  line-height: 48px;
   font-size: 32px;
   font-weight: normal;
-  margin: 12px 0 12px 2%;
-}
-
-h1 {
-  float: left;
+  margin: 8px 0 8px 2%;
 }
 
 h3 {
@@ -35,7 +32,7 @@ h4 {
 }
 
 h1, h2, pre, code, .console, .status, #nav, #tagline {
-  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
+  font-family: 'Droid Sans Mono', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;
 }
 
 a:link, a:visited {
@@ -57,6 +54,19 @@ pre, .console {
   font-size: 16px;
   height: 270px;
   color: #dddddd;
+  margin-top: 26px;
+  margin-bottom: 26px;
+  border: 1px solid #888;
+  resize: auto;
+  overflow: auto;
+  padding: 2px;
+}
+
+textarea {
+  width: 100%;
+  display: block;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
 }
 
 #nav {
@@ -68,7 +78,7 @@ pre, .console {
 }
 
 #nav a:link, #nav a:visited {
-  color: #EAF2D9;
+  color: #eaf2d9;
 }
 
 #nav a {
@@ -81,13 +91,13 @@ pre, .console {
 }
 
 #tagline {
-  float: left;
-  margin-left: 10px;
-  margin-top: 24px;
+  position: absolute;
+  display: none;
+  top: 24px;
   font-size: 14px;
 }
 
-pre {
+#guide pre {
   font-size: 16px;
   line-height: 26px;
   color: #dddddd;
@@ -178,15 +188,6 @@ pre {
   left: 56%;
 }
 
-textarea {
-  width: 100%;
-  display: block;
-  margin-top: 26px;
-  margin-bottom: 26px;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-}
-
 .docked {
   position: fixed;
   width: 100%;

diff --git a/docs/index.dust.html b/docs/index.dust.html
@@ -3,6 +3,7 @@
   <head>
     <title>dust</title>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <link href="http://fonts.googleapis.com/css?family=Droid+Sans+Mono:regular&subset=latin" rel="stylesheet" type="text/css">
     {#inline names="index" ext="css"/}
     <script src="vendor/ecma.js"></script>
     <script src="vendor/jquery.min.js"></script>
@@ -36,15 +37,15 @@ <h1>{~lb}dust{~rb}</h1>
           <textarea id="input-source" class="console"></textarea>
           <div class="status ok">Ready</div>
           <p>2. The compiled template registers itself by name:</p>
-          <textarea id="output-js" class="console"></textarea>
+          <pre class="console"><code id="output-js"></code></pre>
           <p>When you're done messing around have a look at the guide.</p>
         </div>
         <div class="col2">
           <p>3. Control template behavior with contexts and helpers:</p>
           <textarea id="input-context" class="console"></textarea>
           <div class="status ok">Ready</div>
           <p>4. Render or stream the result:</p>
-          <textarea id="output-text" class="console"></textarea>
+          <pre id="output-text" class="console"></pre>
         </div>
       </div>
     </div>
@@ -68,7 +69,7 @@ <h2>{~lb}tests{~rb}</h2>
         </div>
         <div class="col1">
           <p>If the console below indicates an error then we have a problem.</p>
-          <textarea id="test-console" class="console"></textarea>
+          <pre id="test-console" class="console"></pre>
         </div>
         <div class="col2">
           <p>Interested in seeing how Dust stacks up against similar templating engines? Have a look at the <a href="benchmark/index.html">live benchmarks</a>.</p>

diff --git a/docs/index.js b/docs/index.js
@@ -1,10 +1,10 @@
-dustExamples.forEach(function(ex) {
-  dust.loadSource(dust.compile(ex.source, ex.name));
-});
+jsDump.parsers['function'] = function(fn) {
+  return fn.toString();
+}
 
 function renderDemo() {
   var tmpl = dust.cache["demo"],
-  source = $('#input-context').val();
+      source = $('#input-context').val();
 
   $('#output-text').empty();
 
@@ -56,55 +56,61 @@ function setError(sel, err) {
 }
 
 function dump(obj) {
-  jsDump.parsers['function'] = function(fn) {
-    return fn.toString();
-  }
   return js_beautify(jsDump.parse(obj), {
     indent_size: 2
   });
 }
 
-function dumpError(err) {
-  var out = err.testName + " -> ";
-  if (!err.message) {
-    err.message = jsDump.parse(err.expected)
-    + " " + err.operator + " " + jsDump.parse(err.actual);
-  }
-  return out + err.stack;
-}
-
 function runSuite() {
   var suite = new uutest.Suite({
     start: function() {
-      $("#test-console").empty();
+      $('#test-console').empty();
     },
     pass: function() {
-      $("#test-console").append(".");
+      $('#test-console').append(".");
     },
     fail: function() {
-      $("#test-console").append("F");
+      $('#test-console').append("F");
     },
     done: function(passed, failed, elapsed) {
-      $("#test-console").append("\n");
-      $("#test-console").append(passed + " passed " + failed + " failed " + "(" + elapsed + "ms)");
+      $('#test-console').append("\n");
+      $('#test-console').append(passed + " passed " + failed + " failed " + "(" + elapsed + "ms)");
       this.errors.forEach(function(err) {
-        $("#test-console").append("\n");
-        $("#test-console").append(dust.escapeHtml(dumpError(err)));
+        $('#test-console').append("\n");
+        $('#test-console').append(dust.escapeHtml(dumpError(err)));
       });
     }
   });
   coreSetup(suite, dustExamples.slice(1), dust);
   suite.run();
 }
 
-$(document).ready(function(){
+function dumpError(err) {
+  var out = err.testName + " -> ";
+  if (!err.message) {
+    err.message = jsDump.parse(err.expected)
+    + " " + err.operator + " " + jsDump.parse(err.actual);
+  }
+  return out + err.stack;
+}
+
+$(document).ready(function() {
+
+  dustExamples.forEach(function(ex) {
+    dust.loadSource(dust.compile(ex.source, ex.name));
+  });
+
   runSuite();
 
-  $('#tagline').empty();
+  $('#tagline').empty().show().css({left: ($(window).width() * .02) + 125});
   dust.loadSource(dust.compile(dustExamples[0].source, "intro"));
-  dust.stream("intro", dustExamples[0].context()).on('data', function(data) {
-    $('#tagline').append(data);
-  });
+  dust.stream("intro", dustExamples[0].context())
+      .on('data', function(data) {
+        $('#tagline').append(data);
+      })
+      .on('end', function() {
+        $('#tagline').delay(500).fadeOut('slow');
+      });
 
   dust.render("select", {
     examples: dustExamples,
@@ -122,26 +128,12 @@ $(document).ready(function(){
     $('#input-source').change();
   });
 
-  $(".cwrap > h3 > span").click(function() {
-    var $console = $(this).closest(".cwrap").children(".console"),
-    $anchor = $(this).children("a");
-
-    if ($console.is(":visible")) {
-      $console.hide();
-      $anchor.html("show");
-    } else {
-      $console.show();
-      $anchor.html("hide");
-    }
-    return false;
-  });
-
   $('#input-source').change(function() {
     setPending('#input-source');
     try {
       var compiled = dust.compile($(this).val(), "demo");
       dust.loadSource(compiled);
-      $('#output-js').val(js_beautify(compiled, {
+      $('#output-js').text(js_beautify(compiled, {
         indent_size: 2
       }));
       setOkay('#input-source');
@@ -154,8 +146,6 @@ $(document).ready(function(){
 
   $('#input-context').change(renderDemo);
 
-  $('#select > select').change();
-
   var sections = $("body > div");
   var cur_id;
 
@@ -173,15 +163,19 @@ $(document).ready(function(){
           sectionBottom = sectionTop + section.offsetHeight;
 
       if (scrollTop >= sectionTop && scrollTop < sectionBottom) {
-        var foof = $(section).find('.header').clone();
+        var $hdr = $(section).find('.header').clone();
         if (section.id !== cur_id) {
           cur_id = section.id;
           $('.docked').remove();
-          foof.appendTo('body');
-          foof.addClass('docked');
+          $hdr.appendTo('body');
+          $hdr.addClass('docked');
         }
         return false;
       }
     });
   });
+
+  $('#select > select').change();
+  $(window).scroll();
+
 });