From 7db1d8df7346cb97b5c58a82843c27f214131be5 Mon Sep 17 00:00:00 2001
From: til-schneider <github@murfman.de>
Date: Thu, 26 May 2016 11:14:34 +0200
Subject: [PATCH] Added menu button which toggles TOC for small screens

---
 src/client/js/app-view.js               |  4 ++++
 src/server/i18n/de.php                  |  1 +
 src/server/i18n/en.php                  |  1 +
 src/server/theme/slim/less/_layout.less | 27 ++++++++++++++++++++++---
 src/server/theme/slim/page-header.php   | 17 ++++++++++------
 5 files changed, 41 insertions(+), 9 deletions(-)

diff --git a/src/client/js/app-view.js b/src/client/js/app-view.js
index 0abaea2..c5d0d2a 100644
--- a/src/client/js/app-view.js
+++ b/src/client/js/app-view.js
@@ -30,6 +30,10 @@
         headingsOffset = 80,
         headings;
 
+    document.getElementById('button-menu').addEventListener('click', function() {
+      document.body.classList.toggle('is-toc-visible');
+    });
+
     // tocbot needs ID attributes at the headings in order to function
     headings = document.getElementById('content').querySelectorAll(headingSelector);
     Array.prototype.forEach.call(headings, function (headingElem) {
diff --git a/src/server/i18n/de.php b/src/server/i18n/de.php
index b1f509c..6efd951 100644
--- a/src/server/i18n/de.php
+++ b/src/server/i18n/de.php
@@ -11,6 +11,7 @@ $i18n = array(
     'button.cancel' => 'Abbrechen',
     'button.back' => 'Zurück',
     'button.edit' => 'Bearbeiten',
+    'button.menu' => 'Menü',
     'button.createUser' => 'Benutzer erstellen',
     'button.createArticle' => 'Artikel anlegen',
     'demoAlert.title' => 'Dies ist eine Demo.',
diff --git a/src/server/i18n/en.php b/src/server/i18n/en.php
index 5129851..d4571ad 100644
--- a/src/server/i18n/en.php
+++ b/src/server/i18n/en.php
@@ -11,6 +11,7 @@ $i18n = array(
     'button.cancel' => 'Cancel',
     'button.back' => 'Back',
     'button.edit' => 'Edit',
+    'button.menu' => 'Menu',
     'button.createUser' => 'Create user',
     'button.createArticle' => 'Create article',
     'demoAlert.title' => 'This is a demo.',
diff --git a/src/server/theme/slim/less/_layout.less b/src/server/theme/slim/less/_layout.less
index 40e881f..bed70c6 100644
--- a/src/server/theme/slim/less/_layout.less
+++ b/src/server/theme/slim/less/_layout.less
@@ -53,14 +53,27 @@
   .mode-edit & {
     width: 50%;
   }
+
+  #button-menu {
+    display: none;
+
+    .is-toc-enabled & {
+      @media (max-width: @screen-size-small-max) {
+        display: block;
+      }
+    }
+  }
 }
 
 .toc-wrapper {
   position: fixed;
+  top: 0;
   left: 50%;
-  right: 10px;
-  top: 70px;
+  right: 0;
+  height: 100%;
+  padding: 70px 10px 0 0;
   margin-left: @contentMaxWidth / 2 + @tocMarginLeft;
+  background-color: rgba(255, 255, 255, 0.9);
 
   .mode-edit & {
     display: none;
@@ -75,7 +88,15 @@
     margin-left: 0;
   }
   @media (max-width: @screen-size-small-max) {
-    display: none;
+    transform: translateX(100%);
+    left: auto;
+    width: @tocMinWidth;
+    bottom: 0;
+    transition: all 300ms ease-in-out;
+
+    .is-toc-visible & {
+      transform: translateX(0);
+    }
   }
 }
 
diff --git a/src/server/theme/slim/page-header.php b/src/server/theme/slim/page-header.php
index 92a8d6c..c94ec3e 100644
--- a/src/server/theme/slim/page-header.php
+++ b/src/server/theme/slim/page-header.php
@@ -1,4 +1,14 @@
-<nav class="breadcrumbs"><div class="main-column"><?php
+<?php
+if ($data['showToc']) {
+    ?><nav class="toc-wrapper"></nav><?php
+}
+?><nav class="breadcrumbs"><div class="main-column"><?php
+
+// NOTE: We add buttons in reberse order because they float right
+
+if ($mode == 'view' && $data['showToc']) {
+    ?><div id="button-menu" class="btn btn-default btn-xs pull-right"><?php echo $i18n['button.menu']; ?></div><?php
+}
 if ($data['showCreateUserButton']) {
     ?><a class="btn btn-default btn-xs pull-right" href="<?php echo $data['requestPath']; ?>?createUser"><?php echo $i18n['button.createUser']; ?></a><?php
 }
@@ -19,8 +29,3 @@ foreach ($data['breadcrumbs'] as $item) {
     $isFirst = false;
 }
 ?></div></nav>
-<?php
-if ($data['showToc']) {
-    ?><nav class="toc-wrapper"></nav><?php
-}
-?>