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 \
|
HTML.stylesheets = template/style/online.css \
|
||||||
template/style/gsc.css \
|
template/style/gsc.css \
|
||||||
template/style/list_arrow.png \
|
template/style/list_arrow.png \
|
||||||
|
template/style/list_expand.png \
|
||||||
template/style/icomoon.eot \
|
template/style/icomoon.eot \
|
||||||
template/style/icomoon.svg \
|
template/style/icomoon.svg \
|
||||||
template/style/icomoon.ttf \
|
template/style/icomoon.ttf \
|
||||||
@ -15,6 +16,7 @@ HTML.stylesheets = template/style/online.css \
|
|||||||
qhp.extraFiles += style/online.css \
|
qhp.extraFiles += style/online.css \
|
||||||
style/gsc.css \
|
style/gsc.css \
|
||||||
style/list_arrow.png \
|
style/list_arrow.png \
|
||||||
|
style/list_expand.png \
|
||||||
style/icomoon.eot \
|
style/icomoon.eot \
|
||||||
style/icomoon.svg \
|
style/icomoon.svg \
|
||||||
style/icomoon.ttf \
|
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 () {
|
$(function () {
|
||||||
$('a[href*=#]:not([href=#])').on('click', function (e) {
|
$('a[href*=#]:not([href=#])').on('click', function (e) {
|
||||||
if (e.which == 2)
|
if (e.which == 2 || e.metaKey || e.ctrlKey || e.shiftKey)
|
||||||
return true;
|
return true;
|
||||||
var target = $(this.hash.replace(/(\.)/g, "\\$1"));
|
var target = $(this.hash.replace(/(\.)/g, "\\$1"));
|
||||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||||
@ -14,11 +31,50 @@ $(function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
$(window).load(function () {
|
$(window).load(function () {
|
||||||
var h = window.location.hash;
|
var hashChanged = function() {
|
||||||
var re = /[^a-z0-9_\.\#\-]/i
|
var h = window.location.hash;
|
||||||
if (h.length > 1 && !re.test(h)) {
|
var re = /[^a-z0-9_\.\#\-]/i
|
||||||
setTimeout(function () {
|
if (h.length > 1 && !re.test(h)) {
|
||||||
$(window).scrollTop($(h.replace(/(\.)/g, "\\$1")).offset().top - vOffset);
|
setTimeout(function () {
|
||||||
}, 0);
|
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;
|
position:absolute;
|
||||||
transition:none;
|
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 {
|
.cookies_yum .close:hover {
|
||||||
background-position:bottom left
|
background-position:bottom left
|
||||||
}
|
}
|
||||||
@ -1128,7 +1143,7 @@ dd {
|
|||||||
.mainContent b {
|
.mainContent b {
|
||||||
font-weight:600
|
font-weight:600
|
||||||
}
|
}
|
||||||
.context ul {
|
.context ul,.context ol {
|
||||||
margin-bottom:1.5em
|
margin-bottom:1.5em
|
||||||
}
|
}
|
||||||
.mainContent ul ul {
|
.mainContent ul ul {
|
||||||
@ -1282,6 +1297,9 @@ div.main_index .row:after {
|
|||||||
div.table {
|
div.table {
|
||||||
overflow-x:auto
|
overflow-x:auto
|
||||||
}
|
}
|
||||||
|
.context tr > td > pre {
|
||||||
|
font-size:0.85em
|
||||||
|
}
|
||||||
p.qt_commercial {
|
p.qt_commercial {
|
||||||
border:3px solid #5caa15;
|
border:3px solid #5caa15;
|
||||||
margin:0 auto;
|
margin:0 auto;
|
||||||
@ -1312,7 +1330,6 @@ pre {
|
|||||||
line-height:1.5;
|
line-height:1.5;
|
||||||
overflow-x:auto;
|
overflow-x:auto;
|
||||||
margin-bottom:25px;
|
margin-bottom:25px;
|
||||||
overflow-x:auto;
|
|
||||||
padding:25px;
|
padding:25px;
|
||||||
margin-top:0.75em
|
margin-top:0.75em
|
||||||
}
|
}
|
||||||
@ -1376,6 +1393,9 @@ pre:hover>.copy_text {
|
|||||||
margin:0;
|
margin:0;
|
||||||
border:none
|
border:none
|
||||||
}
|
}
|
||||||
|
#sidebar-toggle,#toc-toggle {
|
||||||
|
display:none
|
||||||
|
}
|
||||||
@media (max-width: 980px) {
|
@media (max-width: 980px) {
|
||||||
body {
|
body {
|
||||||
font-size:calc-em(14px)
|
font-size:calc-em(14px)
|
||||||
@ -1413,7 +1433,8 @@ pre:hover>.copy_text {
|
|||||||
visibility:hidden
|
visibility:hidden
|
||||||
}
|
}
|
||||||
.col-2 h2,.toc h3,.sidebar-content h2,.sidebar-content h3,.sectionlist h2 {
|
.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 {
|
div.main_index .row:after {
|
||||||
content:none
|
content:none
|
||||||
@ -1438,6 +1459,12 @@ pre:hover>.copy_text {
|
|||||||
margin-bottom:1em;
|
margin-bottom:1em;
|
||||||
padding:20px
|
padding:20px
|
||||||
}
|
}
|
||||||
|
#sidebar-toggle,#toc-toggle {
|
||||||
|
display:block
|
||||||
|
}
|
||||||
|
#sidebar-toggle.collapsed + h2 {
|
||||||
|
display:block
|
||||||
|
}
|
||||||
.mainContent p {
|
.mainContent p {
|
||||||
line-height:1.56em;
|
line-height:1.56em;
|
||||||
margin-bottom:1em;
|
margin-bottom:1em;
|
||||||
@ -1446,6 +1473,9 @@ pre:hover>.copy_text {
|
|||||||
table td,table th {
|
table td,table th {
|
||||||
padding:5px 5px
|
padding:5px 5px
|
||||||
}
|
}
|
||||||
|
.sectionlist {
|
||||||
|
padding:0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
[id]:target,[name]:target,[name]:target+* {
|
[id]:target,[name]:target,[name]:target+* {
|
||||||
-webkit-animation:highlighter 3s;
|
-webkit-animation:highlighter 3s;
|
||||||
@ -1453,22 +1483,22 @@ pre:hover>.copy_text {
|
|||||||
}
|
}
|
||||||
@-webkit-keyframes highlighter {
|
@-webkit-keyframes highlighter {
|
||||||
25% {
|
25% {
|
||||||
background-color:#46a2da;
|
background-color:#d1e8f6;
|
||||||
color:#fff
|
color:#444
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
background-color:#46a2da;
|
background-color:#d1e8f6;
|
||||||
color:#fff
|
color:#444
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes highlighter {
|
@keyframes highlighter {
|
||||||
25% {
|
25% {
|
||||||
background-color:#46a2da;
|
background-color:#d1e8f6;
|
||||||
color:#fff
|
color:#444
|
||||||
}
|
}
|
||||||
75% {
|
75% {
|
||||||
background-color:#46a2da;
|
background-color:#d1e8f6;
|
||||||
color:#fff
|
color:#444
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-webkit-keyframes copypaste {
|
@-webkit-keyframes copypaste {
|
||||||
@ -1580,7 +1610,7 @@ img.gsc-branding-img {
|
|||||||
input.gsc-search-button {
|
input.gsc-search-button {
|
||||||
background-color: white !important;
|
background-color: white !important;
|
||||||
height: 35px !important;
|
height: 35px !important;
|
||||||
width: 35px !important;
|
width: 25px !important;
|
||||||
color: transparent !important;
|
color: transparent !important;
|
||||||
background-image: url("doc_search.png") !important;
|
background-image: url("doc_search.png") !important;
|
||||||
background-size: 25px auto;
|
background-size: 25px auto;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user