Merge pull request #35 from jasonkliu/14652_frontpage_style

14652 frontpage style

Author: brson

css/style.css

@@ -16,6 +16,12 @@
 	font-weight: 500;
 	src: local('Fira Sans Medium'), url("../fonts/FiraSans-Medium.woff") format('woff');
 }
+@font-face {
+    font-family: 'fontello';
+    src: url('../fonts/fontello.svg?32953337#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
 
 body {
 	font-family: 'Fira Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -277,6 +283,34 @@ ul.laundry-list {
   outline: none;
 }
 
+ [class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+ 
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  /* opacity: .8; */
+ 
+  /* For safety - reset parent styles, that can break glyph codes*/
+  font-variant: normal;
+  text-transform: none;
+     
+  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+ 
+  position: relative;
+  float: right;
+  font-size: 120%;
+ 
+}
+ 
+.icon-link-ext:before { content: '\e800'; } /* '' */
+
 #result {
   background-color: #E2EEF6;
   margin-top: 10px;

fonts/fontello.svg

@@ -49,8 +49,8 @@ <h2>Featuring</h2>
           <div id="editor">// This code is editable and runnable!
 fn main() {
     // A simple integer calculator:
-    // `+` or `-` means add/sub by 1
-    // `*` or `/` means mul/div by 2
+    // `+` or `-` means add or subtract by 1
+    // `*` or `/` means multiply or divide by 2
 
     let program = "+ + * - /";
     let mut accumulator = 0;
@@ -65,17 +65,19 @@ <h2>Featuring</h2>
         }
     }
 
-  println!("The program \"{}\" calculates the value {}",
-           program, accumulator);
+    println!("The program \"{}\" calculates the value {}",
+              program, accumulator);
 }</div>
-          <div id="result"></div>
+          <div id="result">
+            <a id="playlink" onclick="f1()" href="http://play.rust-lang.org/"><i class="icon-link-ext"></i></a>
+          </div>
         </div>
         <div id="static-code">
 <pre class='rust'>
 <span class='kw'>fn</span> main() {
     <span class='comment'>// A simple integer calculator:
-    // `+` or `-` means add/sub by 1
-    // `*` or `/` means mul/div by 2</span>
+    // `+` or `-` means add or subtract by 1
+    // `*` or `/` means multiply or divide by 2</span>
 
     <span class='kw'>let</span> program = <span class='string'>"+ + * - /"</span>;
     <span class='kw'>let</span> <span class='kw'>mut</span> accumulator = <span class='number'>0</span>;
@@ -121,7 +123,7 @@ <h2>Featuring</h2>
 
       return os;
     }
-    
+
     var platform = detect_platform();
 
     var rec_package_name = "nightly";
@@ -149,7 +151,7 @@ <h2>Featuring</h2>
     var rec_dl_addy = "http://static.rust-lang.org/dist/" + rec_download_file;
     var rec_inst_link = document.getElementById("inst-link");
     rec_inst_link.setAttribute("href", rec_dl_addy);
-   
+
   </script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
   <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/mode-rust.js"></script>

index.html

@@ -14,6 +14,7 @@ var editorDiv = document.getElementById("editor");
 var staticCode = document.getElementById("static-code");
 var runButton = document.getElementById("run-code");
 var resultDiv = document.getElementById("result");
+var playLink = document.getElementById("playlink");
 
 // Background colors for program result on success/error
 var successColor = "#E2EEF6";
@@ -121,10 +122,15 @@ function handleResult(statusCode, message) {
   }
 }
 
-// Called on successful program run
+// Called on successful program run: display output and link to playground
 function handleSuccess(message) {
   resultDiv.style.backgroundColor = successColor;
-  resultDiv.innerHTML = escapeHTML(message);
+  var program = encodeURIComponent(editor.getValue());
+  playLink.href = "http://play.rust-lang.org/?code=" + program + "&run=1"
+  // console.log(playLink.href);
+  resultDiv.innerHTML = '';        // clear resultDiv, then add
+  resultDiv.appendChild(playLink); // playLink icon and message
+  resultDiv.innerHTML += escapeHTML(message);
 }
 
 // Called when program run results in warning(s)
@@ -164,7 +170,12 @@ function handleProblem(message, problem) {
   }).join("<br />");
 
   // Setting message
-  resultDiv.innerHTML = cleanMessage;
+  var program = encodeURIComponent(editor.getValue());
+  playLink.href = "http://play.rust-lang.org/?code=" + program + "&run=1"
+  // console.log(playLink.href);
+  resultDiv.innerHTML = '';        // clear resultDiv, then add
+  resultDiv.appendChild(playLink); // playLink icon and error message
+  resultDiv.innerHTML += cleanMessage;
 
   // Highlighting the lines
   var ranges = parseProblems(lines);