Doc: Update the online documentation template

This change fixes a number of issues in the online template:
    - Missing vertical line after the login icon in the header
    - Update header, footer links and appearance
    - Adjust alternate background color of table cells to improve
      readability
    - Fix style of cookie notification in the html header
    - Add The Qt Company logo in the footer
    - Adjust list item marker image
    - Improve responsiveness of footer

Change-Id: I77147b4b4161d6001c095a4b67e15552132100e6
Reviewed-by: Martin Smith <martin.smith@digia.com>
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@theqtcompany.com>
This commit is contained in:
Topi Reinio 2015-02-06 15:51:23 +01:00 committed by Topi Reiniö
parent 268cc1dc99
commit 2002103baa
7 changed files with 74 additions and 42 deletions

View File

@ -27,7 +27,7 @@ HTML.footer += \
" <li id=\"menu-item-1356\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1356\"><a href=\"http://qt.io/qt-features/\">Qt Features</a></li>\n" \
" <li id=\"menu-item-1359\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1359\"><a href=\"http://qt.io/qt-quick/\">Qt Quick</a></li>\n" \
" <li id=\"menu-item-1357\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1357\"><a href=\"http://qt.io/qt-for-device-creation/\">Qt for Device Creation</a></li>\n" \
" <li id=\"menu-item-34\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-34\"><a href=\"http://qt.io/qt-in-use/\">Qt in Use</a></li>\n" \
" <li id=\"menu-item-10159\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-10159\"><a href=\"http://qt.io/mobile-app-development/\">Qt for Mobile Apps</a></li>\n" \
" <li id=\"menu-item-1366\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-1366\"><a href=\"http://showroom.qt-project.org/\">Showroom</a></li>\n" \
"</ul>\n" \
"</li>\n" \
@ -48,6 +48,7 @@ HTML.footer += \
" <li id=\"menu-item-4027\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-4027\"><a href=\"http://qt.io/services-proof-of-concept/\">Proof of Concept</a></li>\n" \
" <li id=\"menu-item-4026\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-4026\"><a href=\"http://qt.io/services-design-implementation/\">Design &amp; Implementation</a></li>\n" \
" <li id=\"menu-item-4025\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-4025\"><a href=\"http://qt.io/services-productization/\">Productization</a></li>\n" \
" <li id=\"menu-item-5124\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-5124\"><a href=\"https://qtcloudservices.com/\">Qt Cloud Services</a></li>\n" \
"</ul>\n" \
"</li>\n" \
"<li id=\"menu-item-1403\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1403\"><a href=\"http://qt.io/download/\">Download</a>\n" \
@ -60,11 +61,10 @@ HTML.footer += \
"</ul>\n" \
"</li>\n" \
"</ul></div></nav>\n" \
"<a href=\"http://digia.com\" target=\"_blank\" class=\"footer-logo retina\" data-icon=\"\">\n" \
" </a>\n" \
"<a href=\"http://qt.io/about-us/\" target=\"_blank\" class=\"theqtcompany\"></a>\n" \
" <div class=\"footer-social clearfix\">\n" \
" <div class=\"facebook\">\n" \
" <div class=\"fb-like fb_iframe_widget\" data-href=\"https://www.facebook.com/qtbydigia\" data-layout=\"button_count\" data-action=\"like\" data-show-faces=\"true\" data-share=\"false\" fb-xfbml-state=\"parsed\" fb-iframe-plugin-query=\"action=like&amp;app_id=207346529386114&amp;href=https%3A%2F%2Fwww.facebook.com%2Fqtbydigia&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;share=false&amp;show_faces=true\" style=\"display: block;\"><iframe style=\"width: 30px; height: 19px; border: 0px;\"></iframe></div>\n" \
" <iframe scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" src=\"//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fqtbydigia&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21\" style=\"border:none;overflow:hidden;height:21px;\"></iframe>\n" \
" </div>\n" \
" <div class=\"twitter\">\n" \
" <iframe id=\"twitter-widget-0\" scrolling=\"no\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://platform.twitter.com/widgets/follow_button.33b190ea0cba008796487b65df7f6d8e.en.html#_=1414403615717&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=qtproject&amp;show_count=true&amp;show_screen_name=false&amp;size=m\" class=\"twitter-follow-button twitter-follow-button\" title=\"Twitter Follow Button\" data-twttr-rendered=\"true\" style=\"width: 160px; height: 20px;\"></iframe>\n" \
@ -75,8 +75,9 @@ HTML.footer += \
"<div class=\"disclaimer\">\n" \
"<div class=\"container clearfix no_discs\">\n" \
" <ul id=\"menu-footer-submenu\" class=\"right clearfix\"><li id=\"menu-item-1795\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-1795\"><a title=\"Sign into your account.\" href=\"https://account.qt.io/login\">Sign In</a></li>\n" \
" <li id=\"menu-item-1494\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1494\"><a href=\"http://qt.io/contact-us/\">Contact us</a></li>\n" \
" <li id=\"menu-item-4472\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-4472\"><a href=\"http://www.digia.com\">© 2015 Digia Oyj</a></li>\n" \
" <li id=\"menu-item-10375\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-10375\"><a href=\"mailto:feedback@theqtcompany.com?Subject=Feedback%20about%20doc.qt.io%20site\">Feedback</a></li>\n" \
" <li id=\"menu-item-1494\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1494\"><a href=\"http://qt.io/contact-us/\">Contact us</a></li>\n" \
" <li id=\"menu-item-4472\" class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-4472\"><a href=\"http://qt.io/about-us/\">© 2015 The Qt Company</a></li>\n" \
" </ul>\n" \
"</div>\n" \
"</div>\n" \

View File

@ -7,7 +7,9 @@ HTML.stylesheets = template/style/online.css \
template/style/icomoon.svg \
template/style/icomoon.ttf \
template/style/icomoon.woff \
template/style/doc_search.png
template/style/cookiebar-x.png \
template/style/doc_search.png \
template/style/theqtcompany.png
#for including files into the qch file. Relative to the outputdir of a QDoc build.
qhp.extraFiles += style/online.css \
@ -16,7 +18,10 @@ qhp.extraFiles += style/online.css \
style/icomoon.eot \
style/icomoon.svg \
style/icomoon.ttf \
style/icomoon.woff
style/icomoon.woff \
style/cookiebar-x.png \
style/doc_search.png \
style/theqtcompany.png
HTML.headerstyles = \
" <link rel=\"stylesheet\" type=\"text/css\" href=\"style/online.css\" />\n" \

View File

@ -1,13 +1,14 @@
var vOffset = 65;
$(function () {
$('a[href*=#]:not([href=#])').on('click', function () {
$('a[href*=#]:not([href=#])').on('click', function (e) {
if (e.which == 2)
return true;
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
setTimeout(function () {
$('html, body').animate({scrollTop: target.offset().top - vOffset}, 50);}, 50);
// return false;
}
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 236 B

View File

@ -153,7 +153,8 @@
}
#mainmenu {
float:left;
list-style:none
list-style:none;
margin-left:16px
}
#mainmenu li {
float:left;
@ -212,6 +213,9 @@
min-width:85px;
font-weight:100
}
#menuextras li:last-child a {
border-right:1px solid #eee;
}
#menuextras li a:before {
display:inline-block;
font-family:'Qt Icons';
@ -372,12 +376,37 @@
#menuextras li.navbar-search {
padding:5px 0
}
.container {
padding:0 2%
#footerbar .container {
padding:0
}
body .main {
margin-top:0px
}
#footerbar .footer-main .footer-nav {
padding:3.9% 0 3.9% 3%;
border-bottom:1px solid #413d3b;
float:none;
display:block;
width:auto
}
#footerbar .footer-main .theqtcompany {
clear:both;
float:left;
margin:30px 0 28px 3%
}
#footerbar .footer-main .footer-social {
float:left;
padding:30px 0px 0px 3%
}
#footerbar #menu-footer-submenu {
clear:both;
float:none;
display:block;
padding:0px 0px 3.9% 3%
}
ul#menu-footer-submenu {
margin-left: 0
}
}
.in-page-nav {
width:100%;
@ -449,8 +478,9 @@ body.qt-account #navbar .navbar-oneQt h2 {
margin-bottom:40px
}
.cookies_yum {
background-color:#006325;
background-color:#d6d6d6;
display:none;
line-height:1.625em;
width:100%
}
.cookies_yum img {
@ -462,18 +492,18 @@ body.qt-account #navbar .navbar-oneQt h2 {
}
.cookies_yum div {
margin:0 auto;
max-width:1180px;
max-width:1280px;
min-height:30px;
padding:6px 0px 6px 0px;
position:relative
}
.cookies_yum p {
color:white;
color:#585a5c;
margin:0px;
font-size:0.79em;
display:inline-block;
line-height:1.2;
padding:0 30px 0 40px
padding:0 30px 0 50px
}
.cookies_yum p a {
white-space:nowrap
@ -484,13 +514,14 @@ body.qt-account #navbar .navbar-oneQt h2 {
.cookies_yum .close {
width:15px;
height:15px;
background-image:url("../images/cookiebar-x.png");
background-image:url("cookiebar-x.png");
background-size:15px 30px;
background-position:top left;
cursor:pointer;
top:6px;
right:6px;
position:absolute
top:13px;
right:13px;
position:absolute;
transition:none;
}
.cookies_yum .close:hover {
background-position:bottom left
@ -691,7 +722,7 @@ body.qt-account #navbar .navbar-oneQt h2 {
left:0;
width:100%
}
#footerbar .footer-main .footer-nav {
#footerbar .footer-nav {
display:inline;
float:left
}
@ -734,29 +765,20 @@ body.qt-account #navbar .navbar-oneQt h2 {
#footerbar .footer-main .footer-nav .sub-menu li a:hover,#footerbar .footer-main .footer-nav .sub-menu li.current-menu-item a {
color:#eee
}
#footerbar .footer-main .footer-logo {
#footerbar .theqtcompany {
background:url("theqtcompany.png") no-repeat;
background-size:100%;
width:150px;
height:68px;
display:inline;
float:right;
padding:29px 0 28px 10px;
margin-left:30px;
width:56px
margin:29px 0 28px 30px
}
#footerbar .footer-main .footer-logo:before {
content:attr(data-icon);
font-family:'Qt Icons';
width:100%;
line-height:1.2;
display:inline-block;
font-size:1.875em;
color:#706e6d
}
#footerbar .footer-main .footer-logo:hover {
padding:31px 0 26px 10px
}
#footerbar .footer-main .footer-social {
#footerbar .footer-social {
display:inline;
float:right;
padding-top:31px
padding-top:31px;
width:164px
}
#footerbar .footer-main .footer-social>div {
margin-left:0.1em;
@ -848,6 +870,9 @@ body.qt-account #navbar .navbar-oneQt h2 {
.clearfix {
*zoom:1
}
.clearfix .right {
float:right
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
@ -1169,7 +1194,7 @@ li a.active {
position:absolute
}
.flowList.odd {
background-color:#eee
background-color:#f9f9f9
}
.context ul>li,.doc-column ul>li {
list-style-image:url("list_arrow.png");
@ -1203,7 +1228,7 @@ li a.active {
vertical-align:initial
}
table .odd {
background-color:#eee
background-color:#f9f9f9
}
table thead {
text-align:left;

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB