modernise website menu and show it as overlay on small screenslxml-3.4

adapt width of website to narrower screens

2 files changed, 103 insertions, 33 deletions

diff --git a/doc/html/style.css b/doc/html/style.css
index 0a13203d..e9e817dc 100644
--- a/doc/html/style.css
+++ b/doc/html/style.css
@@ -3,7 +3,7 @@ body {
     text-align: center;
 }
 
-@media screen {
+@media screen and (min-width: 960px) and (min-height: 700px) {
     body {
         padding: 1em 1em 1em 21em;
     }
@@ -14,6 +14,13 @@ body {
     }
 }
 
+@media screen {
+    div.document, div.footer {
+        max-width: 45em;
+        background-color: white;
+    }
+}
+
 @media print {
     div.document, div.footer {
         width: auto;
@@ -60,48 +67,81 @@ div.contents.topic > p > a {
 
 /*** side menu ***/
 
-div.sidemenu {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 26em;
-    font-size: 10px;
-    text-align: left;
-    border-right: groove gray;
-    border-bottom: groove gray;
-    padding-right: 1ex;
-    background: #FFFAFA url(python-xml.png) no-repeat top right;
+@media (min-width: 960px) and (min-height: 700px) {
+    div.sidemenu .menutrigger {
+        display: none;
+    }
+
+    div.sidemenu {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 26em;
+        font-size: 10px;
+        text-align: left;
+        border-right: groove gray;
+        border-bottom: groove gray;
+        padding-right: 1ex;
+        background: #FFFAFA url(python-xml.png) no-repeat top right;
+    }
+
+    html > body div.sidemenu {
+        /* ignored by IE -> everyone else knows 'fixed', right?  */
+        position: fixed;
+    }
 }
 
-html > body div.sidemenu {
-    /* ignored by IE -> everyone else knows 'fixed', right?  */
-    position: fixed;
+@media (max-width: 959px), (max-height: 699px) {
+    div.sidemenu > div.menutrigger {
+        display: block;
+        border: solid darkgreen 2px;
+        padding: 2px;
+        text-align: center;
+        width: 6ex;
+    }
+
+    div.sidemenu > div.menu {
+        display: none;
+        position: absolute;
+        z-index: 999;
+        font-size: 10px;
+        text-align: left;
+        border-right: groove gray;
+        border-bottom: groove gray;
+        padding-right: 1ex;
+        background: #FFFAFA url(python-xml.png) no-repeat top right;
+    }
+
+    div.sidemenu:hover > div.menu,
+    div.sidemenu.visible > div.menu {
+        display: block;
+    }
 }
 
-div.sidemenu span.section.title {
+div.sidemenu > div.menu span.section.title {
     line-height: 1.2em;
     font-size: 130%;
 }
 
-div.sidemenu ul.menu.current li {
+div.sidemenu > div.menu ul.menu.current li {
     color: #CC0000;
     font-size: 105%;
 }
 
-div.sidemenu ul.menu.current > li > a {
+div.sidemenu > div.menu ul.menu.current > li > a {
     color: #CC0000;
 }
 
-div.sidemenu ul.menu.current ul.submenu {
+div.sidemenu > div.menu ul.menu.current ul.submenu {
     display: block;
 }
 
-div.sidemenu ul.menu.foreign ul.submenu li {
+div.sidemenu > div.menu ul.menu.foreign ul.submenu li {
     padding-top: 2px;
     padding-bottom: 2px;
 }
 
-div.sidemenu ul.menu.foreign li.menu:hover ul.submenu {
+div.sidemenu > div.menu ul.menu.foreign li.menu:hover ul.submenu {
     display: block;
     position: absolute;
     border: groove #990000;
@@ -113,11 +153,11 @@ div.sidemenu ul.menu.foreign li.menu:hover ul.submenu {
     background-color: white;
 }
 
-div.sidemenu ul.submenu {
+div.sidemenu > div.menu ul.submenu {
     display: none;
 }
 
-div.sidemenu ul {
+div.sidemenu > div.menu ul {
     line-height: 1em;
     margin: 1ex;
     padding-left: 1em;
@@ -128,7 +168,7 @@ div.sidemenu ul {
 h1.title {
     background: url(python-xml-title.png) no-repeat;
     padding: 20px 0 0 160px;
-    height: 60px;
+    min-height: 60px;
     font-size: 200%;
 }
 
@@ -224,8 +264,8 @@ div.eyecatcher, p.eyecatcher {
     text-align: center;
     font-size: 140%;
     line-height: 1.2em;
-    margin-left: 9em;
-    margin-right: 9em;
+    margin-left: 12%;
+    margin-right: 12%;
 }
 
 div.pagequote {
diff --git a/doc/mkhtml.py b/doc/mkhtml.py
index cc58da0a..87157fa3 100644
--- a/doc/mkhtml.py
+++ b/doc/mkhtml.py
@@ -1,3 +1,5 @@
+from __future__ import absolute_import
+
 from docstructure import SITE_STRUCTURE, HREF_MAP, BASENAME_MAP
 from lxml.etree import (parse, fromstring, ElementTree,
                         Element, SubElement, XPath, XML)
@@ -6,6 +8,7 @@ import re
 import sys
 import copy
 import shutil
+import textwrap
 import subprocess
 
 try:
@@ -21,8 +24,9 @@ RST2HTML_OPTIONS = " ".join([
     ])
 
 XHTML_NS = 'http://www.w3.org/1999/xhtml'
-htmlnsmap = {"h" : XHTML_NS}
+htmlnsmap = {"h": XHTML_NS}
 
+find_head = XPath("/h:html/h:head[1]", namespaces=htmlnsmap)
 find_title = XPath("/h:html/h:head/h:title/text()", namespaces=htmlnsmap)
 find_title_tag = XPath("/h:html/h:head/h:title", namespaces=htmlnsmap)
 find_headings = XPath("//h:h1[not(@class)]//text()", namespaces=htmlnsmap)
@@ -33,6 +37,7 @@ find_page_end = XPath("/h:html/h:body/h:div[last()]", namespaces=htmlnsmap)
 find_words = re.compile('(\w+)').findall
 replace_invalid = re.compile(r'[-_/.\s\\]').sub
 
+
 def make_menu_section_head(section, menuroot):
     section_id = section + '-section'
     section_head = menuroot.xpath("//ul[@id=$section]/li", section=section_id)
@@ -45,6 +50,7 @@ def make_menu_section_head(section, menuroot):
         section_head = section_head[0]
     return section_head
 
+
 def build_menu(tree, basename, section_head):
     page_title = find_title(tree)
     if page_title:
@@ -54,6 +60,7 @@ def build_menu(tree, basename, section_head):
     build_menu_entry(page_title, basename+".html", section_head,
                      headings=find_headings(tree))
 
+
 def build_menu_entry(page_title, url, section_head, headings=None):
     page_id = replace_invalid(' ', os.path.splitext(url)[0]) + '-menu'
     ul = SubElement(section_head, "ul", {"class":"menu foreign", "id":page_id})
@@ -75,6 +82,7 @@ def build_menu_entry(page_title, url, section_head, headings=None):
             a  = SubElement(li, "a", href=url+'#'+ref)
             a.text = heading
 
+
 def merge_menu(tree, menu, name):
     menu_root = copy.deepcopy(menu)
     tree.getroot()[1][0].insert(0, menu_root) # html->body->div[class=document]
@@ -93,6 +101,7 @@ def merge_menu(tree, menu, name):
                         replace("foreign", "current"))
     return tree
 
+
 def inject_flatter_button(tree):
     head = tree.xpath('h:head[1]', namespaces=htmlnsmap)[0]
     script = SubElement(head, '{%s}script' % XHTML_NS, type='text/javascript')
@@ -116,6 +125,7 @@ def inject_flatter_button(tree):
         '</p>'
         ))
 
+
 def inject_donate_buttons(lxml_path, rst2html_script, tree):
     command = ([sys.executable, rst2html_script]
                + RST2HTML_OPTIONS.split() + [os.path.join(lxml_path, 'README.rst')])
@@ -134,12 +144,14 @@ def inject_donate_buttons(lxml_path, rst2html_script, tree):
     last_div = tree.xpath('h:body//h:div//h:div', namespaces=htmlnsmap)[-1]
     last_div.addnext(legal)
 
+
 def rest2html(script, source_path, dest_path, stylesheet_url):
     command = ('%s %s %s --stylesheet=%s --link-stylesheet %s > %s' %
                (sys.executable, script, RST2HTML_OPTIONS,
                 stylesheet_url, source_path, dest_path))
     subprocess.call(command, shell=True)
 
+
 def convert_changelog(lxml_path, changelog_file_path, rst2html_script, stylesheet_url):
     f = open_file(os.path.join(lxml_path, 'CHANGES.txt'), 'r', encoding='utf-8')
     try:
@@ -164,6 +176,7 @@ def convert_changelog(lxml_path, changelog_file_path, rst2html_script, styleshee
     finally:
         out_file.close()
 
+
 def publish(dirname, lxml_path, release):
     if not os.path.exists(dirname):
         os.mkdir(dirname)
@@ -179,11 +192,25 @@ def publish(dirname, lxml_path, release):
     changelog_basename = 'changes-%s' % release
     href_map['Release Changelog'] = changelog_basename + '.html'
 
+    menu_js = textwrap.dedent('''
+    function trigger_menu() {
+        var sidemenu = document.getElementById("sidemenu");
+        var classes = sidemenu.getAttribute("class");
+        if (classes.indexOf(" visible") === -1) {
+            sidemenu.setAttribute("class", classes + " visible");
+        } else {
+            sidemenu.setAttribute("class", classes.replace(" visible", ""));
+        }
+    }
+    ''')
+
     trees = {}
-    menu = Element("div", {"class":"sidemenu"})
+    menu = Element("div", {'class': 'sidemenu', 'id': 'sidemenu'})
+    SubElement(SubElement(menu, 'div', {'class': 'menutrigger', 'onclick': 'trigger_menu()'}), 'a').text = "Menu"
+    menu_div = SubElement(menu, 'div', {'class': 'menu'})
     # build HTML pages and parse them back
     for section, text_files in SITE_STRUCTURE:
-        section_head = make_menu_section_head(section, menu)
+        section_head = make_menu_section_head(section, menu_div)
         for filename in text_files:
             if filename.startswith('@'):
                 # special menu entry
@@ -213,7 +240,7 @@ def publish(dirname, lxml_path, release):
                       script, stylesheet_url)
 
     # generate sitemap from menu
-    sitemap = XML('''\
+    sitemap = XML(textwrap.dedent('''\
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
       <head>
@@ -228,17 +255,19 @@ def publish(dirname, lxml_path, release):
         <h1>Sitemap of lxml.de - Processing XML and HTML with Python</h1>
       </body>
     </html>
-    '''.replace('    ', ' '))
+    '''))
     sitemap_menu = copy.deepcopy(menu)
     SubElement(SubElement(sitemap_menu[-1], 'li'), 'a', href='http://lxml.de/files/').text = 'Download files'
-    sitemap[-1].append(sitemap_menu) # append to body
+    sitemap[-1].append(sitemap_menu)  # append to body
     ElementTree(sitemap).write(os.path.join(dirname, 'sitemap.html'))
 
     # integrate sitemap into the menu
-    SubElement(SubElement(menu[-1], 'li'), 'a', href='http://lxml.de/sitemap.html').text = 'Sitemap'
+    SubElement(SubElement(menu_div[-1], 'li'), 'a', href='http://lxml.de/sitemap.html').text = 'Sitemap'
 
     # integrate menu into web pages
     for tree, basename, outpath in trees.itervalues():
+        head = find_head(tree)[0]
+        SubElement(head, 'script', type='text/javascript').text = menu_js
         new_tree = merge_menu(tree, menu, basename)
         title = find_title_tag(new_tree)
         if title and title[0].text == 'lxml':
@@ -248,5 +277,6 @@ def publish(dirname, lxml_path, release):
                 heading[0].text = "lxml - XML and HTML with Python"
         new_tree.write(outpath)
 
+
 if __name__ == '__main__':
     publish(sys.argv[1], sys.argv[2], sys.argv[3])