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>

doc/global/html-footer-online.qdocconf

@@ -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 href=\"http://qt.io/about-us/\" target=\"_blank\" class=\"theqtcompany\"></a>\n" \
-    "    </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-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-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-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" \

doc/global/html-header-online.qdocconf

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

doc/global/template/scripts/extras.js

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

doc/global/template/style/online.css

@@ -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 {
+  #footerbar .container {
-    padding:0 2%
+    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;
+  top:13px;
-  right:6px;
+  right:13px;
-  position:absolute
+  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:29px 0 28px 30px
-  margin-left:30px;
-  width:56px
 }
-#footerbar .footer-main .footer-logo:before {
+#footerbar .footer-social {
-  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 {
   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;