Merge pull request github#1958 from jf205/slide-buttons

docs: a few slide improvements

Author: Felicity Chapman

docs/language/README.rst

@@ -89,9 +89,11 @@ Building and previewing the QL training presentations
 *****************************************************
 
 To build the QL training presentations, you need to install a Sphinx extension
-called `hieroglyph <https://github.com/nyergler/hieroglyph>`__.
+called `hieroglyph <https://github.com/nyergler/hieroglyph>`__. 
+You also need to install `graphviz <https://graphviz.gitlab.io/download/>`__, which 
+is used to generate graphs on some slides.
 
-After installing hieroglyph, you can build the QL training presentations by running 
+After installing hieroglyph and graphviz, you can build the QL training presentations by running 
 ``sphinx-build``, specifying the ``slides`` builder. For example
 
 .. code::

docs/language/learn-ql/ql-training.rst

@@ -19,7 +19,10 @@ Start learning how to use QL in variant analysis for a specific language by look
 
 .. |arrow-r| unicode:: U+2192
 
-When you have selected a presentation, use |arrow-r| and |arrow-l| to navigate between slides, press **p** to view the additional notes for a slide (where available), and press **f** to enter full-screen mode.
+.. |info| unicode:: U+24D8
+
+When you have selected a presentation, use |arrow-r| and |arrow-l| to navigate between slides.
+Press **p** to view the additional notes on slides that have an information icon |info| in the top right corner, and press **f** to enter full-screen mode.
 
 The presentations contain a number of QL query examples.
 We recommend that you download `QL for Eclipse <https://help.semmle.com/ql-for-eclipse/Content/WebHelp/home-page.html>`__ and import the example snapshot for each presentation so that you can find the bugs mentioned in the slides. 

docs/language/ql-training/_static-training/slides-semmle-2/layout.html

@@ -148,11 +148,18 @@
 </slides>
 
 
+<script type="text/javascript">
+
+//insert info buttons on slides that have additional notes 
+  $(".admonition.note").before("<button id='extra-notes'>&#9432;</button>");
+  $(".admonition-title").before("<button id='close-notes'>&times;</button>");
+  $(document).ready(function() {
+     $('button').click(function() {
+       document.body.classList.toggle('with-notes');
+     });
+  });
+</script>
 
-<!--[if IE]>
-  <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
-  <script>CFInstall.check({mode: 'overlay'});</script>
-<![endif]-->
 <script type="text/javascript">
 
 //assigns font-size when document is ready

docs/language/ql-training/_static-training/slides-semmle-2/static/theme/css/default.css

@@ -587,15 +587,6 @@ dt {
 /* line 386, ../scss/default.scss */
 button {
   display: inline-block;
-  background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmOWY5ZjkiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iI2UzZTNlMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
-  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3));
-  background: -moz-linear-gradient(#f9f9f9 40%, #e3e3e3 70%);
-  background: -webkit-linear-gradient(#f9f9f9 40%, #e3e3e3 70%);
-  background: linear-gradient(#f9f9f9 40%, #e3e3e3 70%);
-  border: 1px solid #a9a9a9;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  border-radius: 3px;
   padding: 5px 8px;
   outline: none;
   white-space: nowrap;
@@ -605,7 +596,6 @@ button {
   user-select: none;
   cursor: pointer;
   text-shadow: 1px 1px #fff;
-  font-size: 10pt;
 }
 
 /* line 400, ../scss/default.scss */
@@ -1599,10 +1589,38 @@ p.first.admonition-title {
   font-size: 1em;
 }
 
-.admonition.note  ul {
+.admonition.note  ul li {
   width: inherit;
 }
 
+
+/* styles for information buttons on slides that have notes */
+
+#extra-notes {
+  display: block;
+  position: fixed;
+  top: 0;
+  right: 1%;
+  font-size: 1em;
+}
+
+#close-notes {
+  display: block;
+  position: fixed;
+  top: 0;
+  right: -1%;
+  font-size: 1.2em;
+}
+
+button {
+  border: none;
+  background: none;
+}
+
+button:hover {
+  text-decoration: underline;
+}
+
 /********* images ************/
 /* general styles to scale and centre images*/
 
@@ -1774,4 +1792,4 @@ li > ul > li {
     width: 90%;
     height: 100%;
   }
-}
+}

docs/language/ql-training/conf.py

@@ -33,7 +33,6 @@
     'sphinx.ext.intersphinx',
     'sphinx.ext.mathjax',
     'hieroglyph',
-    'sphinxcontrib.blockdiag',
     'sphinx.ext.graphviz',
 ]