Fix mobile issues (#147)

* Fix mobile menu

* Link cover page

* Add home link

book/style.css

@@ -152,6 +152,7 @@ figure.texsource, figure.shellcommand, figure.htmlsource, figure.luasource, figu
 
 div.footnotes {
   border: none;
+  margin-right: 0;
 }
 
 .footnote-mark {
@@ -165,3 +166,140 @@ table.tabular {
 .chapterHead .titlemark {
   display: block;
 }
+
+figure.figure {
+  margin: 30px 0px 30px 0px;;
+  text-align: center;
+  padding: 0;
+}
+
+figcaption.caption {
+  text-indent: 0;
+  margin: 0;
+}
+
+
+.table div.center, .table div.center div.center {
+  margin: 0;
+}
+
+.table {
+  overflow-x: auto;
+}
+
+.table table {
+  width: 100%;
+}
+
+
+.menu {
+  position: relative;
+}
+
+.toggle-menu-label {
+  display: none;
+}
+
+.menu input {
+  display: none;
+}
+
+.menu-items {
+  display: block;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu-items .chapterToc {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.menu-items a {
+  text-decoration: none;
+}
+
+
+@media (max-width: 768px) {
+  .toggle-menu-label {
+    display: block;
+    padding: 10px;
+    cursor: pointer;
+  }
+  .hamb{
+    cursor: pointer;
+    float: right;
+    padding: 30px 20px;
+    position: absolute;
+    right: 0px;
+    top: 0px;
+  }
+
+  .hamb-line {
+    background: #000;
+    display: block;
+    height: 2px;
+    position: relative;
+    width: 24px;
+  }
+
+  .hamb-line::before,
+  .hamb-line::after{
+    background: #000;
+    content: '';
+    display: block;
+    height: 100%;
+    position: absolute;
+    transition: all .2s ease-out;
+    width: 100%;
+  }
+  .hamb-line::before{
+    top: 5px;
+  }
+  .hamb-line::after{
+    top: -5px;
+  }
+
+  span.hamb-line:hover  {
+    background-color: #000 !important;
+  }
+
+  .menu-items {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    background-color: #f2f2f2;
+    padding-left: 3px;
+    z-index: 1;
+  }
+
+  .menu-items .chapterToc {
+    margin-bottom: 8px;
+  }
+
+  .menu {
+    background: #F5F2EF;
+    padding: 20px 0px;
+    position: relative;
+  }
+
+  #toggle-menu:checked ~ .menu-items {
+    display: block;
+  }
+
+  .logo {
+    display: block;
+    color: #000;
+    font-size: 20px;
+    font-weight: bold;
+    padding-left: 17px;
+  }
+}
+
+div.center {
+  margin-left: 0;
+  margin-right: 0;
+}

website/modify_build.rb

@@ -30,9 +30,19 @@ class ModifyBuild
     text = fix_double_slashes(orig_text)
     text = fix_navigation_bar(text)
     text = fix_titles(text)
+    text = fix_menu(text)
+    text = fix_cover_page(text) if is_cover_page?(filename)
+    text = add_home_link_to_menu(text)
+    text = fix_anchor_hyperlinks_menu(text)
     File.open(filename, "w") {|file| file.puts text }
   end
 
+  def is_cover_page?(filename)
+    ["book.html", "index.html"].any? do |name|
+      filename.include?(name)
+    end
+  end
+
   def list_of_files_to_modify
     Dir.glob("#{build_dir}/*.html")
   end
@@ -55,7 +65,7 @@ class ModifyBuild
   end
 
   def fix_navigation_bar(text)
-    doc = Nokogiri::HTML(text)
+    doc = build_doc(text)
     elements = [doc.search('.chapterToc'), doc.search('.sectionToc'), doc.search('.subsectionToc')].flatten
     elements.each do |n|
       chapter_number_or_nothing = n.children[0].text.strip
@@ -81,8 +91,10 @@ class ModifyBuild
     doc.to_html
   end
 
+  # By default the titles look boring. This changes the titles of all the
+  # pages and adds the book name as appendix
   def fix_titles(text)
-    doc = Nokogiri::HTML(text)
+    doc = build_doc(text)
     title_node = doc.css("title")[0]
     raise ArgumentError.new("No title found in HTML document") if title_node.nil?
 
@@ -90,7 +102,6 @@ class ModifyBuild
     doc.to_html
   end
 
-
   # "3 Making a sourdough starter"
   # Should return Making a sourdough starter - The Sourdough Framework"
   def build_title(title)
@@ -109,6 +120,81 @@ class ModifyBuild
   def title_appendix
     "The Sourdough Framework"
   end
+
+  # By default the menu is not made for mobile devices. This adds mobile
+  # capabilities to the menu
+  def fix_menu(text)
+    doc = build_doc(text)
+    nav = doc.css("nav.TOC")[0]
+    # page has no nav
+    return text unless nav
+
+    menu_items_html = doc.css("nav.TOC > *").to_html
+    nav.add_class("menu")
+    nav_content = %Q{
+      #{menu_mobile_nav}
+      <div class="menu-items">#{menu_items_html}</div>
+    }
+    nav.inner_html = nav_content
+    doc.to_html
+  end
+
+  def menu_mobile_nav
+  %Q{
+    <a href="/" class="logo">
+      The Sourdough Framework
+    </a>
+    <input type="checkbox" id="toggle-menu">
+    <label class="hamb toggle-menu-label" for="toggle-menu"><span class="hamb-line"></span></label>
+  }
+  end
+
+  # The cover page should have some additional content and allow the user to
+  # click the book cover in order to start reading.
+  def fix_cover_page(text)
+    doc = build_doc(text)
+    body = doc.css("body")[0]
+    content = doc.css("body > .titlepage")[0]
+    menu = doc.css("body > .menu")[0]
+    cover = content.css(".center")[0]
+    cover_html = cover.to_html
+    cover.inner_html = "<a href='Thehistoryofsourdough.html'>#{cover_html}</a>"
+    body.inner_html = "#{menu} #{content}"
+    doc.to_html
+  end
+
+  # Users are lost and can't easily access the root page of the book. This
+  # adds a home menu item.
+  def add_home_link_to_menu(text)
+    doc = build_doc(text)
+    menu = doc.css(".menu-items")[0]
+    return text if menu.nil?
+
+    home_html = %Q{<span class="chapterToc"><a href="/">Home</a></span>}
+    menu.inner_html = "#{home_html} #{menu.inner_html}"
+    doc.to_html
+  end
+
+  # Some of the links in the menu have an anchor. This makes clicking through
+  # the menu frustrating as the browser jumps a lot on each request. Only do
+  # this for the top level menu entries though.
+  def fix_anchor_hyperlinks_menu(text)
+    doc = build_doc(text)
+    top_level_menus = doc.css(".menu-items > span > a")
+    top_level_menus.each do |el|
+      link = el.attribute("href").value
+      splitted = link.split("#")
+      next if splitted.length == 1
+
+      el["href"] = splitted[0]
+    end
+
+    doc.to_html
+  end
+
+  def build_doc(text)
+    Nokogiri::HTML(text)
+  end
 end
 
 ModifyBuild.build