Merge pull request #564 from MITx/feature/rocha/wiki-cheatsheet

Feature/rocha/wiki cheatsheet

lms/static/sass/course/wiki/_wiki.scss

@@ -567,11 +567,80 @@ section.wiki {
     background: #f00 !important;
   }
 
-  
+  .cheatsheet {
+    float: right;
+    position: relative;
+    top: -26px;
+    font-size: 12px;
+  }
 
+  #cheatsheetLink {
+    text-align: right;
+    display: float;
+  }
 
+  #cheatsheetModal {
+    width: 950px;
+    margin-left: -450px;
+    margin-top: -100px;
 
+    .left-column {
+      margin-right: 10px;
+    }
 
+    .left-column,
+    .right-column {
+      float: left;
+      width: 450px;
+    }
+
+    .close-btn {
+      display: block;
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      width: 30px;
+      height: 30px;
+      border-radius: 30px;
+      border: 1px solid #ccc;
+      @include linear-gradient(top, #eee, #d2d2d2);
+      font-size: 22px;
+      line-height: 28px;    
+      color: #333;
+      text-align: center;
+      @include box-shadow(0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2));
+    }
+  }
+
+  #cheatsheet-body {
+    background: #fff;
+    text-align: left;
+    padding: 20px;
+    font-size: 14px;
+    @include clearfix;
+
+    h3 {
+      font-weight: bold;
+    }
+
+    ul {
+      list-style: circle;
+      line-height: 1.4;
+      color: #333;
+    }
+  }
+
+  #cheatsheet-body section + section {
+    margin-top: 40px;
+  }
+
+  #cheatsheet-body pre{
+    color: #000;
+    text-align: left;
+    background: #eee;
+    padding: 10px;
+    font-size: 12px;
+  }
 
   /*-----------------
 

lms/templates/wiki/base.html

@@ -27,21 +27,32 @@
       });
     }
   </script>
-  
-  
+
+
   {% addtoblock 'js' %}
     {% comment %} These scripts load at the bottom of the body {% endcomment %}
-  
+
     <script src="{% static 'js/bootstrap-alert.js' %}"></script>
     <script src="{% static 'js/bootstrap-collapse.js' %}"></script>
     <script src="{% static 'js/bootstrap-modal.js' %}"></script>
-    
+
     {% with mathjax_mode='wiki' %}
       {% include "mathjax_include.html" %}
     {% endwith %}
-    
+    <script type="text/javascript">
+	    $(document).ready(function () {
+          editor = $('#div_id_content div.controls');
+          cs = editor.prepend('<p class="cheatsheet">Markdown syntax is allowed. See the <a id="cheatsheetLink" href="#">cheatsheet</a> for help.</p>');
+          cs.find('#cheatsheetLink').click(function() {
+              $('#cheatsheetModal').modal('show');
+          });
+          $('#cheatsheetModal .close-btn').click(function(e) {
+            $('#cheatsheetModal').modal('hide');
+          });
+	    });
+    </script>
   {% endaddtoblock %}
-  
+
 {% endblock %}
 
 
@@ -64,11 +75,14 @@
             </div>
           {% endfor %}
         {% endif %}
-        
+
         {% block wiki_contents %}{% endblock %}
-        
+
       {% endblock %}
     </div>
+
+    {% include "wiki/includes/cheatsheet.html" %}
+
   </section>
 
 {% endblock %}

lms/templates/wiki/includes/cheatsheet.html

+<section id="cheatsheetModal" class="modal hide fade">
+	<a href="#" class="close-btn">×</a>
+	<div id="cheatsheet-body" class="modal-body">
+		<div class="left-column">
+			<section>
+				<h2>Wiki Syntax Help</h2>
+				<p>This wiki uses <strong>Markdown</strong> for styling. There are several useful guides online. See any of the links below for in-depth details:</p>
+				<ul>
+					<li><a href="http://daringfireball.net/projects/markdown/basics" target="_blank">Markdown: Basics</a></li>
+					<li><a href="http://greg.vario.us/doc/markdown.txt" target="_blank">Quick Markdown Syntax Guide</a></li>
+					<li><a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">Miniature Markdown Guide</a></li>
+				</ul>
+				<p>To create a new wiki article, create a link to it. Clicking the link gives you the creation page.</p>
+				<pre>[Article Name](wiki:ArticleName)</pre>
+			</section>
+			<section>
+				<h3>edX Additions:</h3>
+				<pre>
+circuit-schematic:</pre>
+				<pre>
+$LaTeX Math Expression$</pre>
+			</section>
+		</div>
+
+		<div class="right-column">
+			<section>
+				<h3>Useful examples:</h3>
+				<pre>
+http://wikipedia.org
+[Wikipedia](http://wikipedia.org)
+[edX Wiki](wiki:/edx/)</pre>
+				<pre>
+Huge Header
+===========</pre>
+				<pre>
+Smaller Header
+--------------</pre>
+				<pre>
+*emphasis* or _emphasis_</pre>
+				<pre>
+**strong** or __strong__</pre>
+				<pre>
+- Unordered List
+	- Sub Item 1
+	- Sub Item 2</pre>
+				<pre>
+1. Ordered
+2. List</pre>
+				<pre>
+> Quotes</pre>
+			</section>
+		</div>
+
+		</div>
+	</div>
+</section>