Doc: Update online documentation template

Update the online documentation template with following fixes:

   - Improve responsivess for narrow screens: TOC and sidebar
     now collapse into drop-down menus
   - React to hashchange events: When the user edits the anchor
     tag in URL and presses enter, the page is scrolled
     correctly to bring the selected section title into view.
   - Handle Ctrl and Meta keys correctly
   - Improve colors for target section highlighting
   - Minor CSS fixes

Task-number: QTWEBSITE-634
Task-number: QTWEBSITE-657
Change-Id: I7221f38cf4988497f0f24ee66e62b7b7d770a121
Reviewed-by: Martin Smith <martin.smith@digia.com>
Reviewed-by: Topi Reiniö <topi.reinio@digia.com>

diff --git a/doc/global/html-header-online.qdocconf b/doc/global/html-header-online.qdocconf
index aa67c43947629a8260f9501779c2ff817bab3bb1..450eb1120b2f24cd6c62768270484ada43473621 100644 (file)
--- a/doc/global/html-header-online.qdocconf
+++ b/doc/global/html-header-online.qdocconf
@@ -3,6 +3,7 @@
 HTML.stylesheets = template/style/online.css \
                    template/style/gsc.css \
                    template/style/list_arrow.png \
+                   template/style/list_expand.png \
                    template/style/icomoon.eot \
                    template/style/icomoon.svg \
                    template/style/icomoon.ttf \
@@ -15,6 +16,7 @@ HTML.stylesheets = template/style/online.css \
 qhp.extraFiles += style/online.css \
                   style/gsc.css \
                   style/list_arrow.png \
+                  style/list_expand.png \
                   style/icomoon.eot \
                   style/icomoon.svg \
                   style/icomoon.ttf \

diff --git a/doc/global/template/scripts/extras.js b/doc/global/template/scripts/extras.js
index 8a623a037e2715d11f8a504c9cd3cdcc742cd608..ba7a4a50fb0459a3edb5e672e2130755979edeb8 100644 (file)
--- a/doc/global/template/scripts/extras.js
+++ b/doc/global/template/scripts/extras.js
@@ -1,8 +1,25 @@
-var vOffset = 65;
+var vOffset_init = 65;
+var vOffset = vOffset_init;
+var c = 'collapsed';
+
+function toggleList(toggle, content, maxItems) {
+    if (toggle.css('display') == 'none') {
+        vOffset = vOffset_init;
+        toggle.removeClass(c);
+        content.show();
+        return;
+    } else
+        vOffset = 8;
+
+    if (maxItems > content.children().length)
+        return;
+    content.hide();
+    toggle.addClass(c);
+}
 
 $(function () {
     $('a[href*=#]:not([href=#])').on('click', function (e) {
-        if (e.which == 2)
+        if (e.which == 2 || e.metaKey || e.ctrlKey || e.shiftKey)
             return true;
         var target = $(this.hash.replace(/(\.)/g, "\\$1"));
         target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
@@ -14,11 +31,50 @@ $(function () {
 });
 
 $(window).load(function () {
-    var h = window.location.hash;
-    var re = /[^a-z0-9_\.\#\-]/i
-    if (h.length > 1 && !re.test(h)) {
-        setTimeout(function () {
-            $(window).scrollTop($(h.replace(/(\.)/g, "\\$1")).offset().top - vOffset);
-        }, 0);
+    var hashChanged = function() {
+        var h = window.location.hash;
+        var re = /[^a-z0-9_\.\#\-]/i
+        if (h.length > 1 && !re.test(h)) {
+            setTimeout(function () {
+                var tgt = $(h.replace(/(\.)/g, "\\$1"));
+                tgt = tgt.length ? tgt : $('[name=' + h.slice(1) + ']');
+                $(window).scrollTop(tgt.offset().top - vOffset);
+            }, 0);
+        }
+    }
+    $(window).bind('hashchange', hashChanged);
+    hashChanged.call();
+
+    if (!$('.sidebar toc').is(':empty')) {
+        $('<div id="toc-toggle"></div>').prependTo('.sidebar .toc');
+        var toc = $('.sidebar .toc ul');
+        var tocToggle = $('#toc-toggle');
+        var tocCallback = function() { toggleList(tocToggle, toc, 4); };
+
+        $('#toc-toggle').on('click', function(e) {
+            e.stopPropagation();
+            toc.toggle();
+            tocToggle.toggleClass(c);
+        });
+
+        tocCallback.call();
+        $(window).resize(tocCallback);
+    }
+
+    if (!$('#sidebar-content').is(':empty')) {
+        $('#sidebar-content h2').first().clone().prependTo('#sidebar-content');
+        $('<div id="sidebar-toggle"></div>').prependTo('#sidebar-content');
+        var sb = $('#sidebar-content .sectionlist');
+        var sbToggle = $('#sidebar-toggle');
+        var sbCallback = function() { toggleList(sbToggle, sb, 0); };
+
+        $('#sidebar-toggle').on('click', function(e) {
+            e.stopPropagation();
+            sb.toggle();
+            sbToggle.toggleClass(c);
+        });
+
+        sbCallback.call();
+        $(window).resize(sbCallback);
     }
 });

diff --git a/doc/global/template/style/list_expand.png b/doc/global/template/style/list_expand.png
new file mode 100644 (file)
index 0000000..d214514
Binary files /dev/null and b/doc/global/template/style/list_expand.png differ

diff --git a/doc/global/template/style/online.css b/doc/global/template/style/online.css
index 8775719be6a57fed33f3b754f9644fb19198ebbe..cfd0da0f4bb10235ee569b946565fc77e8429706 100644 (file)
--- a/doc/global/template/style/online.css
+++ b/doc/global/template/style/online.css
@@ -525,6 +525,21 @@ body.qt-account #navbar .navbar-oneQt h2 {
   position:absolute;
   transition:none;
 }
+#sidebar-toggle,#toc-toggle {
+  width:24px;
+  height:14px;
+  background-size:24px 28px;
+  cursor:pointer;
+  background-image:url("list_expand.png");
+  float:right
+}
+#sidebar-toggle.collapsed,
+#toc-toggle.collapsed {
+  background-position:bottom left
+}
+#sidebar-content > h2 {
+  display:none
+}
 .cookies_yum .close:hover {
   background-position:bottom left
 }
@@ -1128,7 +1143,7 @@ dd {
 .mainContent b {
   font-weight:600
 }
-.context ul {
+.context ul,.context ol {
   margin-bottom:1.5em
 }
 .mainContent ul ul {
@@ -1282,6 +1297,9 @@ div.main_index .row:after {
 div.table {
   overflow-x:auto
 }
+.context tr > td > pre {
+  font-size:0.85em
+}
 p.qt_commercial {
   border:3px solid #5caa15;
   margin:0 auto;
@@ -1312,7 +1330,6 @@ pre {
   line-height:1.5;
   overflow-x:auto;
   margin-bottom:25px;
-  overflow-x:auto;
   padding:25px;
   margin-top:0.75em
 }
@@ -1376,6 +1393,9 @@ pre:hover>.copy_text {
   margin:0;
   border:none
 }
+#sidebar-toggle,#toc-toggle {
+  display:none
+}
 @media (max-width: 980px) {
   body {
     font-size:calc-em(14px)
@@ -1413,7 +1433,8 @@ pre:hover>.copy_text {
     visibility:hidden
   }
   .col-2 h2,.toc h3,.sidebar-content h2,.sidebar-content h3,.sectionlist h2 {
-    text-align:center
+    text-align:center;
+    margin-bottom:0
   }
   div.main_index .row:after {
     content:none
@@ -1438,6 +1459,12 @@ pre:hover>.copy_text {
     margin-bottom:1em;
     padding:20px
   }
+  #sidebar-toggle,#toc-toggle {
+    display:block
+  }
+  #sidebar-toggle.collapsed + h2 {
+    display:block
+  }
   .mainContent p {
     line-height:1.56em;
     margin-bottom:1em;
@@ -1446,6 +1473,9 @@ pre:hover>.copy_text {
   table td,table th {
     padding:5px 5px
   }
+  .sectionlist {
+    padding:0
+  }
 }
 [id]:target,[name]:target,[name]:target+* {
   -webkit-animation:highlighter 3s;
@@ -1453,22 +1483,22 @@ pre:hover>.copy_text {
 }
 @-webkit-keyframes highlighter {
   25% {
-    background-color:#46a2da;
-    color:#fff
+    background-color:#d1e8f6;
+    color:#444
   }
   75% {
-    background-color:#46a2da;
-    color:#fff
+    background-color:#d1e8f6;
+    color:#444
   }
 }
 @keyframes highlighter {
   25% {
-    background-color:#46a2da;
-    color:#fff
+    background-color:#d1e8f6;
+    color:#444
   }
   75% {
-    background-color:#46a2da;
-    color:#fff
+    background-color:#d1e8f6;
+    color:#444
   }
 }
 @-webkit-keyframes copypaste {
@@ -1580,7 +1610,7 @@ img.gsc-branding-img {
 input.gsc-search-button {
   background-color: white !important;
   height: 35px !important;
-  width: 35px !important;
+  width: 25px !important;
   color: transparent !important;
   background-image: url("doc_search.png") !important;
   background-size: 25px auto;