Commit d319159d by Ned Batchelder

Cheatsheet modal is accessible.

Use the leanModal stuff to show the cheatsheet dialog in the wiki.

LMS-1303
parent dc589f72
......@@ -5,11 +5,14 @@ These are notable changes in edx-platform. This is a rolling list of changes,
in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected.
Common: Add skip links for accessibility to CMS and LMS (LMS-1311)
LMS: The wiki markup cheatsheet dialog is now accessible to people with
disabilites. (LMS-1303)
Studio: Change course overview page, checklists, assets, and course staff management
page URLs to a RESTful interface. Also removed "\listing", which duplicated
"\index".
Common: Add skip links for accessibility to CMS and LMS. (LMS-1311)
Studio: Change course overview page, checklists, assets, and course staff
management page URLs to a RESTful interface. Also removed "\listing", which
duplicated "\index".
Blades: When start time and end time are specified for a video, a visual range
will be shown on the time slider to highlight the place in the video that will
......@@ -71,8 +74,8 @@ editing capability for a course's list of tabs.
Studio and LMS: add ability to lock assets (cannot be viewed unless registered
for class).
Studio: add restful interface for paging assets (no UX yet, but just add /start/45/max/50 to end of url to get
items 45-95, e.g.)
Studio: add restful interface for paging assets (no UX yet, but just add
/start/45/max/50 to end of url to get items 45-95, e.g.)
LMS: First round of improvements to New (beta) Instructor Dash:
improvements, fixes, and internationalization to the Student Info section.
......
$(document).ready(function () {
$('#cheatsheetLink').click(function() {
$('#cheatsheetModal').modal('show');
$('#cheatsheetModal').leanModal();
});
$('#cheatsheetModal .close-btn').click(function(e) {
$('#cheatsheetModal').modal('hide');
});
});
\ No newline at end of file
accessible_modal("#cheatsheetLink", "#cheatsheetModal .close-modal", "#cheatsheetModal", ".content-wrapper");
});
......@@ -586,9 +586,7 @@ section.wiki {
}
#cheatsheetModal {
width: 950px;
margin-left: -450px;
margin-top: -100px;
width: 972px;
.left-column {
margin-right: 10px;
......@@ -599,23 +597,6 @@ section.wiki {
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;
box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0, 0, 0, .2);
}
}
#cheatsheet-body {
......
{% load i18n %}
<div class="modal hide fade" id="cheatsheetModal">
<a href="#" class="close-btn">×</a>
<div id="cheatsheet-body" class="modal-body">
<div class="left-column">
<section>
<h2>{% trans "Wiki Syntax Help" %}</h2>
<p>{% trans "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">{% trans 'Markdown: Basics' %}</a></li>
<li><a href="http://greg.vario.us/doc/markdown.txt" target="_blank">{% trans 'Quick Markdown Syntax Guide' %}</a></li>
<li><a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">{% trans 'Miniature Markdown Guide' %}</a></li>
</ul>
<p>{% trans "To create a new wiki article, create a link to it. Clicking the link gives you the creation page." %}</p>
<pre>{% trans "[Article Name](wiki:ArticleName)" %}</pre>
</section>
<section>
{% comment %}
Translators: Do not translate "edX"
{% endcomment %}
<h3>{% trans "edX Additions:" %}</h3>
<pre>
circuit-schematic:</pre>
<pre>
$LaTeX Math Expression$</pre>
</section>
</div>
<section id="cheatsheetModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title">
<button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
<div class="right-column">
<section>
<h3>{% trans "Useful examples:" %}</h3>
<pre>
<header>
<h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "modal open" %}</span></h2>
<hr/>
</header>
<div id="cheatsheet-body" class="modal-body">
<div class="left-column">
<section>
<h2>{% trans "Wiki Syntax Help" %}</h2>
<p>{% trans "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">{% trans 'Markdown: Basics' %}</a></li>
<li><a href="http://greg.vario.us/doc/markdown.txt" target="_blank">{% trans 'Quick Markdown Syntax Guide' %}</a></li>
<li><a href="http://www.lowendtalk.com/discussion/6/miniature-markdown-guide" target="_blank">{% trans 'Miniature Markdown Guide' %}</a></li>
</ul>
<p>{% trans "To create a new wiki article, create a link to it. Clicking the link gives you the creation page." %}</p>
<pre>{% trans "[Article Name](wiki:ArticleName)" %}</pre>
</section>
<section>
{% comment %}
Translators: Do not translate "edX"
{% endcomment %}
<h3>{% trans "edX Additions:" %}</h3>
<pre>circuit-schematic:</pre>
<pre>$LaTeX Math Expression$</pre>
</section>
</div>
<div class="right-column">
<section>
<h3>{% trans "Useful examples:" %}</h3>
<pre>
{% comment %}
Translators: Do not translate "edX" or "Wikipedia"
Translators: Do not translate "edX" or "Wikipedia"
{% endcomment %}
{% trans "http://wikipedia.org" %}
{% trans "[Wikipedia](http://wikipedia.org)" %}
{% trans "[edX Wiki](wiki:/edx/)" %}
</pre>
<pre>
</pre>
<pre>
{% trans "Huge Header" %}
===========</pre>
<pre>
<pre>
{% trans "Smaller Header" %}
--------------</pre>
<pre>
<pre>
{% trans "*emphasis* or _emphasis_" %}</pre>
<pre>
<pre>
{% trans "**strong** or __strong__" %}</pre>
<pre>
<pre>
- {% trans "Unordered List" %}
- {% trans "Sub Item 1" %}
- {% trans "Sub Item 2" %}</pre>
<pre>
- {% trans "Sub Item 1" %}
- {% trans "Sub Item 2" %}</pre>
<pre>
1. {% trans "Ordered" %}
2. {% trans "List" %}</pre>
<pre>
<pre>
> {% trans "Quotes" %}</pre>
</section>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
......@@ -4,7 +4,7 @@
{% comment %}
Translators: Do not translate 'cheatsheetLink'
{% endcomment %}
{% blocktrans with start_link="<a id='cheatsheetLink' href='#'>" end_link="</a>" %}
{% blocktrans with start_link="<a id='cheatsheetLink' href='#cheatsheetModal' rel='leanModal'>" end_link="</a>" %}
Markdown syntax is allowed. See the {{ start_link }}cheatsheet{{ end_link }} for help.
{% endblocktrans %}
</p>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment