improved style and generating toc; logos for GRASS and FOSS4G

ncsu-geoforall-lab · Aug 8, 2014 · e763f8a · e763f8a
1 parent 121c0fd
commit e763f8a
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 99 deletions.
diff --git a/codetabs.css b/codetabs.css
@@ -102,81 +102,6 @@ pre code {
     padding: 0.5em;
 }
 
-
-/* toc */
-
-
-#table-of-contents h3 {
-    padding-top: 3px;
-    margin-top: 3px;
-    padding-bottom: 3px;
-    margin-bottom: 3px;
-    padding-left: 3px;
-}
-
-#table-of-contents {
-  float: right;
-  width: 20%;
-  background: #eee;
-  font-size: 80%;
-  padding: 2px 2px;
-  margin: 0 0 0.5em 0.5em;
-
-  border-style:  solid;
-  border-width: 2px;
-  border-radius: 10px;
-  border-color:  rgb(25%, 60%, 25%);
-
-  position: fixed;
-  right: 0;
-  top: 0;
-  background-color:#FFF;
-
-}
-#table-of-contents ul {
-  display: none;
-}
-
-
-#table-of-contents:hover ul {
-  display: block;
-}
-
-#table-of-contents ul {
-  padding-left: 10px;
-}
-
-/*
-#table-of-contents li {
-  margin: 0 0 0.25em 0;
-}
-#table-of-contents li {
-  margin: 1 1 1 1 1;
-}
-*/
-
-
-#table-of-contents a {
-  text-decoration: none;
-}
-#table-of-contents a:hover,
-#table-of-contents a:active {
-  text-decoration: underline;
-}
-
-h3:target {
-  animation: highlight 1s ease;
-}
-
-@keyframes highlight {
-  from { background: yellow; }
-  to { background: white; }
-}
-
-h1, h2, h3, h4, h5, h6 {
-    display: block;
-}
-
 pre code a.modulelink {
     color: inherit;
     text-decoration: none;
@@ -193,3 +118,8 @@ p a.modulelink {
 p a.modulelink:hover {
     text-decoration: underline;
 }
+
+pre samp {
+    overflow-x: auto;
+    display: block; /* for overflow-x to work */
+}
diff --git a/codetabs.js b/codetabs.js
@@ -463,24 +463,41 @@ $(document).ready(function() {
             others.removeClass("visible");
         });
     });
-/*
-    var toc_element = $('<div/>');
+
+    var toc_element_root = $('<div/>');
+    toc_element_root.addClass('toc');
+    toc_element_root.html('<h4 class="notoc toc">Table of contents</h4>')
+    var toc_element = toc_element_root;
     var current_level = 0;
-    $("h1, h2, h3, h4, h5, h6").each(function() {
+    $("h2:not(.notoc), h3:not(.notoc)").each(function() {
         var element = $(this);
         var text = element.text();
-        var id = text.replace(/ /g, "-");
+        var id = text.replace(/ /g, "-").toLowerCase();
         element.attr("id", id);
-        
-        level = parseInt(this.tagName.substring(1));
-        
-        var li = $('<li/>').text(text);
-        
+
+        var level = parseInt(this.tagName.substring(1));
+
+        var li = $('<li/>');
+        li.html('<a href="#' + id + '" class="toc">' + text + '</a>')
+        li.addClass('toc');
+
         if (level > current_level) {
-            toc_element.append($('<ul/>').append(li));
+            var new_subtree = $('<ul/>').append(li)
+            new_subtree.addClass('toc');
+            toc_element.append(new_subtree);
             toc_element = li;
         } else if (level < current_level) {
-            toc_element.parents('ol:eq(' + (current_level - level - 1) + ')').append(li);
+            //a = toc_element.parents('ul:eq(' + (current_level - level - 1) + ')')
+            //a.append(li);
+            //.parent('ul:last')
+            var a = toc_element
+            for (var j = 0; j < current_level - level; j++)
+                console.log(a)
+                a = a.parents('ul:last')
+            //a_level = parseInt(this.tagName.substring(1));
+            //if (a_level - current_level > 1)
+            //    a = a.parents('ul:last')
+            a.append(li);
             toc_element = li;
         } else {
             toc_element.parent().append(li);
@@ -489,14 +506,9 @@ $(document).ready(function() {
 
         current_level = level;
     });
-    
-    
 
-    toc_element = toc_element.parents('ol:last');
-    toc_element.attr('id', 'table-of-contents');
-    console.log(toc_element)
-    $('body').prepend(toc_element)
-*/
+    console.log(toc_element_root)
+    $('body').prepend(toc_element_root)
 
     // link modules to grass documentation
     $("pre code").each(function() {
@@ -521,7 +533,7 @@ $(document).ready(function() {
                 link = GRASS_ADDONS_MANUAL_LINK;
             return p1 + '<em><a href="' + link + p2 + '.html" class="modulelink">' + p2 + '</a></em>' + p3;
         }
-        $(this).html($(this).html().replace(/(^|[^a-zA-Z_])([a-z]3?\.[a-zA-Z.0-9]+[a-zA-Z0-9])([^a-zA-Z_]|$)/g, module_link_par_replacer)); 
+        $(this).html($(this).html().replace(/(^|[^a-zA-Z0-9_])([a-z]3?\.[a-zA-Z.0-9]+[a-zA-Z0-9])([^a-zA-Z_]|$)/g, module_link_par_replacer)); 
     });
 
     // this is toc, not code

diff --git a/foss4g-2014.png b/foss4g-2014.png
diff --git a/grass-large.png b/grass-large.png
diff --git a/grassdocs.css b/grassdocs.css
@@ -14,7 +14,6 @@ body{
     background: white;
     color: black;
     font-family: arial,sans-serif;
-    width: 80%;
 }
 
 hr.header {
@@ -30,6 +29,7 @@ h1{
     font-family: arial,sans-serif;
     font-weight: bold;
     font-size: xx-large;
+    width: 80%; /* avoid collision with toc */
 }
 
 h2{
@@ -56,6 +56,14 @@ h4{
     font-size: medium;
 }
 
+a {
+    color: #060;
+}
+
+a:visited {
+    color: #060;
+}
+
 div.code{
     width: 97%;
     color : black;
@@ -104,7 +112,7 @@ td {
 }
 
 div.toc{
-    background-color: transparent;
+    /* background-color: transparent; */
     position: fixed;
     border: solid 1px rgb(25%, 60%, 25%);
     top: 5px;
@@ -115,16 +123,53 @@ div.toc{
 }
 
 li.toc {
-   margin-left: -15px;
+   margin-left: 0;
    padding: 3px 3px 3px 3px;
+   padding-left: 0;
    color: rgb(25%, 60%, 25%);
 }
 
 ul.toc {
    margin-top: 3px;
    margin-bottom: 3px;
+   padding-left: 10%;
+   margin-left: 5%;
 }
 
 a.toc {
     text-decoration: none;
 }
+
+a.toc:hover, a.toc:active {
+    text-decoration: underline;
+}
+
+a:visited {
+    color: #060;
+}
+
+h4.toc {
+    padding-top: 3px;
+    margin-top: 3px;
+    padding-bottom: 3px;
+    margin-bottom: 3px;
+    padding-left: 3px;
+}
+
+/* show and hide toc */
+
+div.toc:hover ul {
+  display: block;
+}
+
+div.toc ul {
+  display: none;
+}
+
+div.toc:hover {
+  background-color: white;
+}
+
+div.toc {
+  background-color: rgba(255, 255, 255, 0.7);
+}
diff --git a/index.html b/index.html
@@ -36,16 +36,19 @@
 
 <body>
 
-
 <h1>Spatio-temporal data handling and visualization in GRASS GIS</h1>
+<h2 class="notoc">FOSS4G 2014 workshop</h2>
 <p>
 Vaclav Petras,
 Anna Petrasova,
 Helena Mitasova,
 Markus Neteler
 </p>
 
-<p>FOSS4G 2014 workshop</p>
+<p>
+  <a href="https://2014.foss4g.org" title="FOSS4G 2014"><img src="foss4g-2014.png"></a>
+  <a href="http://grass.osgeo.org" title="GRASS GIS"><img src="grass-large.png"></a>
+</p>
 
 <p>
 Outline: