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:
parent
a4bd096a0a
commit
03d621cbff
@ -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 \
|
||||
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
BIN
doc/global/template/style/list_expand.png
Normal file
BIN
doc/global/template/style/list_expand.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 710 B |
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user