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>
This commit is contained in:
Topi Reinio 2015-05-20 15:01:10 +02:00 committed by Topi Reiniö
parent a4bd096a0a
commit 03d621cbff
4 changed files with 108 additions and 20 deletions

View File

@ -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 \

View File

@ -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);
}
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 710 B

View File

@ -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;