From 7d4aaabb7e218abf4b8880d23e611baed33288c4 Mon Sep 17 00:00:00 2001
From: Markus Schmidt <schmidt@boomshop.net>
Date: Wed, 15 Oct 2014 23:56:09 +0200
Subject: [PATCH] Manuals: fixed menu on smaller screens

---
 doc/manuals/scripts/manual.js | 28 +++++++++++++++++++++-------
 doc/manuals/scripts/style.css |  8 +++++++-
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/doc/manuals/scripts/manual.js b/doc/manuals/scripts/manual.js
index a34d32c..30cb28f 100644
--- a/doc/manuals/scripts/manual.js
+++ b/doc/manuals/scripts/manual.js
@@ -102,17 +102,20 @@ $(document).ready(function () {
         var icon = $("<img src='images/" + items[i][2] + "' alt='" + items[i][0] + "' class='micon' id='" + items[i][0] + "'/>").appendTo(menu);
         $("<span>" + items[i][0] + "</span>").appendTo(menu);
         icon.mouseenter(function (e) {
-            show_menu("#menu_" + $(this).attr("id"));
+            $(".menu").addClass("mover");
+            show_menu("#menu_" + $(this).attr("id"), "#" + $(this).attr("id"));
         });
         icon.mouseleave(function (e) {
+            $(".menu").removeClass("mover");
             hide_menu("#menu_" + $(this).attr("id"));
         });
         submenu.mouseenter(function (e) {
-            show_menu(this);
+            show_menu(this, "#" + $(this).attr("id").substr(5));
         });
         submenu.mouseleave(function (e) {
             hide_menu(this);
         });
+        resize();
         for(var j = 0; j < items[i][1].length; j++) {
             if (!j) {
                 $("<li><img class='marrow' src='images/marrow.png'/><h3>" + items[i][0] + "</h3></li>").appendTo(submenu);
@@ -135,9 +138,6 @@ $(document).ready(function () {
             if (i >= items.length - 1)
                 $("<br clear='all'/>").appendTo($("#index"));
         }
-        submenu.css({
-            top: Math.min(icon.position().top + 5, $(window).height() - submenu.outerHeight())
-        });
     }
     $(".prettyPhoto").prettyPhoto({
         theme: 'dark_rounded',
@@ -145,6 +145,7 @@ $(document).ready(function () {
         show_title: false,
     });
     $(window).resize(resize);
+    $(window).scroll(scroll);
     resize();
 });
 
@@ -155,11 +156,16 @@ var hide_menu = function (id) {
         opacity: 0
     }, 300, function () { $(this).css({display: "none"});});
 }
-var show_menu = function (id) {
+var show_menu = function (id, icon) {
     $(id).clearQueue();
     $(id).stop();
+    var w = $(window).innerHeight();
+    var t = $(window).scrollTop();
+    var y = Math.max(-t, Math.min(w - $(".menu").outerHeight(), 0));
+    var t_ = Math.min($(icon).position().top + 5, w - $(id).outerHeight() - y);
     $(id).css({
-        display: "block"
+        display: "block",
+        top: t_
     });
     $(id).animate({
         opacity: 1.0
@@ -172,3 +178,11 @@ var resize = function () {
         'line-height' : ((width / 1500 + 1) * 1.1) + "em"
     });
 }
+
+var scroll = function () {
+    var h = $(".menu").outerHeight();
+    var w = $(window).innerHeight();
+    var t = $(window).scrollTop();
+    $(".menu").css("top", Math.max(-t, Math.min(w - h, 0)));
+    console.log(t, h, w)
+}
diff --git a/doc/manuals/scripts/style.css b/doc/manuals/scripts/style.css
index 09f1628..864a75a 100644
--- a/doc/manuals/scripts/style.css
+++ b/doc/manuals/scripts/style.css
@@ -139,11 +139,17 @@ strong {
 }
 .menu {
     width: 56px;
-    height: 100%;
+    min-height: 100%;
     position: fixed;
     left: 0;
     top: 0;
     background: #555;
+    transition-property: padding-bottom;
+    transition-duration: 0.3s;
+    padding-bottom: 16px;
+}
+.menu.mover {
+    padding-bottom: 0px;
 }
 .menu .micon {
     width: 50px;
-- 
2.11.4.GIT