From d94ef5454999fe738cefbf9555515f23b70ed692 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carlos=20Andr=C3=A9s=20Rocha?= <rocha@edx.org>
Date: Thu, 23 Aug 2012 16:30:58 -0400
Subject: [PATCH 1/3] Added cheatsheet popup to wiki editor.

---
 lms/static/sass/course/wiki/_wiki.scss      | 23 ++++++++-
 lms/templates/wiki/base.html                | 27 +++++++----
 lms/templates/wiki/includes/cheatsheet.html | 53 +++++++++++++++++++++
 3 files changed, 93 insertions(+), 10 deletions(-)
 create mode 100644 lms/templates/wiki/includes/cheatsheet.html

diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index bcc2c8855d..ead58bf6a6 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -567,11 +567,30 @@ section.wiki {
     background: #f00 !important;
   }
 
-  
-
+  #cheatsheetLink {
+   text-align:right;
+   display: float;
+  }
 
+  #cheatsheetModal {
+   width: 350px;
+   margin-left: 100px;
+   margin-top: -100px;
+   }
 
+  #cheatsheet-body {
+   background: #FFF;
+   text-align: left;
+   padding: 10px;
+  }
 
+  #cheatsheet-body pre{
+   color: #000;
+   text-align: left;
+   background: #EEE;
+   margin:10px;
+   padding: 10px;
+  }
 
   /*-----------------
 
diff --git a/lms/templates/wiki/base.html b/lms/templates/wiki/base.html
index fc4a2d18d4..a346be0e3e 100644
--- a/lms/templates/wiki/base.html
+++ b/lms/templates/wiki/base.html
@@ -27,21 +27,29 @@
       });
     }
   </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('<a id="cheatsheetLink" href="#">cheatsheet</a>');
+          cs.click(function() {
+              $('#cheatsheetModal').modal('show');
+          });
+	    });
+    </script>
   {% endaddtoblock %}
-  
+
 {% endblock %}
 
 
@@ -64,11 +72,14 @@
             </div>
           {% endfor %}
         {% endif %}
-        
+
         {% block wiki_contents %}{% endblock %}
-        
+
       {% endblock %}
     </div>
+
+    {% include "wiki/includes/cheatsheet.html" %}
+
   </section>
 
 {% endblock %}
diff --git a/lms/templates/wiki/includes/cheatsheet.html b/lms/templates/wiki/includes/cheatsheet.html
new file mode 100644
index 0000000000..d58920b814
--- /dev/null
+++ b/lms/templates/wiki/includes/cheatsheet.html
@@ -0,0 +1,53 @@
+<section id="cheatsheetModal" class="modal hide fade" >
+<div id="cheatsheet-body" class="modal-body">
+<h2>Wiki Syntax Help</h2>
+<p> This wiki uses <strong>Markdown</strong> for styling.
+  There are several <a href="http://daringfireball.net/projects/markdown/basics" target="_blank">useful</a>
+  <a href="http://greg.vario.us/doc/markdown.txt" target="_blank">guides</a>
+  <a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">online</a>.
+<p> To create a new wiki article, create a link to it. Clicking the link gives you the creation page.
+<pre>
+[Article Name](wiki:ArticleName)
+</pre>
+<h2> Useful examples:</h2>
+<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>
+<h2>edX Additions:</h2>
+<pre>
+circuit-schematic:
+</pre>
+<pre>
+$LaTeX Math Expression$
+</pre>
+</div>
+</div>
+</section>

From d1760f9a22a075648190003f9647bc64ba2cbfb0 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Fri, 24 Aug 2012 16:14:04 -0400
Subject: [PATCH 2/3] styled markdown modal and link

---
 lms/static/sass/course/wiki/_wiki.scss      | 78 ++++++++++++++---
 lms/templates/wiki/base.html                |  5 +-
 lms/templates/wiki/includes/cheatsheet.html | 95 +++++++++++----------
 3 files changed, 117 insertions(+), 61 deletions(-)

diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss
index ead58bf6a6..912b416ff6 100644
--- a/lms/static/sass/course/wiki/_wiki.scss
+++ b/lms/static/sass/course/wiki/_wiki.scss
@@ -567,29 +567,79 @@ section.wiki {
     background: #f00 !important;
   }
 
+  .cheatsheet {
+    float: right;
+    position: relative;
+    top: -26px;
+    font-size: 12px;
+  }
+
   #cheatsheetLink {
-   text-align:right;
-   display: float;
+    text-align: right;
+    display: float;
   }
 
   #cheatsheetModal {
-   width: 350px;
-   margin-left: 100px;
-   margin-top: -100px;
-   }
+    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: 10px;
+    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;
-   margin:10px;
-   padding: 10px;
+    color: #000;
+    text-align: left;
+    background: #eee;
+    padding: 10px;
+    font-size: 12px;
   }
 
   /*-----------------
diff --git a/lms/templates/wiki/base.html b/lms/templates/wiki/base.html
index a346be0e3e..5c7381ac05 100644
--- a/lms/templates/wiki/base.html
+++ b/lms/templates/wiki/base.html
@@ -42,9 +42,12 @@
     <script type="text/javascript">
 	    $(document).ready(function () {
           editor = $('#div_id_content div.controls');
-          cs = editor.prepend('<a id="cheatsheetLink" href="#">cheatsheet</a>');
+          cs = editor.prepend('<p class="cheatsheet">Markdown syntax is allowed. See the <a id="cheatsheetLink" href="#">cheatsheet</a> for help.</p>');
           cs.click(function() {
               $('#cheatsheetModal').modal('show');
+          });
+          $('#cheatsheetModal .close-btn').click(function(e) {
+            $('#cheatsheetModal').modal('hide');
           });
 	    });
     </script>
diff --git a/lms/templates/wiki/includes/cheatsheet.html b/lms/templates/wiki/includes/cheatsheet.html
index d58920b814..429c1ea22e 100644
--- a/lms/templates/wiki/includes/cheatsheet.html
+++ b/lms/templates/wiki/includes/cheatsheet.html
@@ -1,53 +1,56 @@
-<section id="cheatsheetModal" class="modal hide fade" >
-<div id="cheatsheet-body" class="modal-body">
-<h2>Wiki Syntax Help</h2>
-<p> This wiki uses <strong>Markdown</strong> for styling.
-  There are several <a href="http://daringfireball.net/projects/markdown/basics" target="_blank">useful</a>
-  <a href="http://greg.vario.us/doc/markdown.txt" target="_blank">guides</a>
-  <a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">online</a>.
-<p> To create a new wiki article, create a link to it. Clicking the link gives you the creation page.
-<pre>
-[Article Name](wiki:ArticleName)
-</pre>
-<h2> Useful examples:</h2>
-<pre>
+<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>
+[edX Wiki](wiki:/edx/)</pre>
+				<pre>
 Huge Header
-===========
-</pre>
-<pre>
+===========</pre>
+				<pre>
 Smaller Header
---------------
-</pre>
-<pre>
-*emphasis* or _emphasis_
-</pre>
-<pre>
-**strong** or __strong__
-</pre>
-<pre>
+--------------</pre>
+				<pre>
+*emphasis* or _emphasis_</pre>
+				<pre>
+**strong** or __strong__</pre>
+				<pre>
 - Unordered List
-  - Sub Item 1
-  - Sub Item 2
-</pre>
-<pre>
+	- Sub Item 1
+	- Sub Item 2</pre>
+				<pre>
 1. Ordered
-2. List
-</pre>
-<pre>
-> Quotes
-</pre>
-<h2>edX Additions:</h2>
-<pre>
-circuit-schematic:
-</pre>
-<pre>
-$LaTeX Math Expression$
-</pre>
-</div>
-</div>
+2. List</pre>
+				<pre>
+> Quotes</pre>
+			</section>
+		</div>
+
+		</div>
+	</div>
 </section>

From 7b3098edc0eb8de1856c51c4a72e105b22fb9ab0 Mon Sep 17 00:00:00 2001
From: Tom Giannattasio <tom@mitx.mit.edu>
Date: Mon, 27 Aug 2012 11:48:54 -0400
Subject: [PATCH 3/3] fixed cheatsheet bug on new article page

---
 lms/templates/wiki/base.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lms/templates/wiki/base.html b/lms/templates/wiki/base.html
index 5c7381ac05..1c1bbc4a63 100644
--- a/lms/templates/wiki/base.html
+++ b/lms/templates/wiki/base.html
@@ -43,7 +43,7 @@
 	    $(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.click(function() {
+          cs.find('#cheatsheetLink').click(function() {
               $('#cheatsheetModal').modal('show');
           });
           $('#cheatsheetModal .close-btn').click(function(e) {