From 03d621cbff392b753a4333d3a74288f0968f5148 Mon Sep 17 00:00:00 2001 From: Topi Reinio Date: Wed, 20 May 2015 15:01:10 +0200 Subject: Doc: Update online documentation template MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Reviewed-by: Topi Reiniö --- doc/global/html-header-online.qdocconf | 2 + doc/global/template/scripts/extras.js | 72 ++++++++++++++++++++++++++---- doc/global/template/style/list_expand.png | Bin 0 -> 710 bytes doc/global/template/style/online.css | 54 +++++++++++++++++----- 4 files changed, 108 insertions(+), 20 deletions(-) create mode 100644 doc/global/template/style/list_expand.png diff --git a/doc/global/html-header-online.qdocconf b/doc/global/html-header-online.qdocconf index aa67c43947..450eb1120b 100644 --- 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 8a623a037e..ba7a4a50fb 100644 --- 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')) { + $('
').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'); + $('').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 index 0000000000..d2145145fd 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 8775719be6..cfd0da0f4b 100644 --- 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; -- cgit v1.2.3