Doc: implement new style

doc/api/templates/scripts/functions.js

@@ -63,11 +63,9 @@ function processNokiaData(response){
 		if(propertyTags[i].getElementsByTagName('pageType')[0].firstChild.nodeValue == 'APIPage'){
 			lookupCount++;
 
-			
 			for (var j=0; j< propertyTags[i].getElementsByTagName('pageWords').length; j++){
 				full_li_element = linkStart + propertyTags[i].getElementsByTagName('pageUrl')[j].firstChild.nodeValue;
 				full_li_element = full_li_element + "'>" + propertyTags[i].getElementsByTagName('pageTitle')[0].firstChild.nodeValue + linkEnd;
-					
 				$('#ul001').append(full_li_element);
 			$('#ul001 .defaultLink').css('display','none');
 
@@ -77,7 +75,6 @@ function processNokiaData(response){
 		if(propertyTags[i].getElementsByTagName('pageType')[0].firstChild.nodeValue == 'Article'){
 			articleCount++;
 
-				 
 			for (var j=0; j< propertyTags[i].getElementsByTagName('pageWords').length; j++){
 			    full_li_element = linkStart + propertyTags[i].getElementsByTagName('pageUrl')[j].firstChild.nodeValue;
 				full_li_element =full_li_element + "'>" + propertyTags[i].getElementsByTagName('pageTitle')[0].firstChild.nodeValue + linkEnd ;
@@ -103,10 +100,13 @@ function processNokiaData(response){
 		if(i==propertyTags.length){$('#pageType').removeClass('loading');}
 
 	}	
+	if(lookupCount > 0){$('#ul001 .menuAlert').remove();$('#ul001').prepend('<li class=\"menuAlert liveResult hit\">Found ' + lookupCount + ' hits</li>');$('#ul001 li').css('display','block');$('.sidebar .search form input').removeClass('loading');}
+    if(articleCount > 0){$('#ul002 .menuAlert').remove();$('#ul002').prepend('<li class=\"menuAlert liveResult hit\">Found ' + articleCount + ' hits</li>');$('#ul002 li').css('display','block');}
+	if(exampleCount > 0){$('#ul003 .menuAlert').remove();$('#ul003').prepend('<li class=\"menuAlert liveResult hit\">Found ' + articleCount + ' hits</li>');$('#ul003 li').css('display','block');}
 	 
-	if(lookupCount == 0){$('#ul001').prepend('<li class=\"liveResult noMatch\">Found no result</li>');$('#ul001 li').css('display','block');$('.sidebar .search form input').removeClass('loading');}
-    if(articleCount == 0){$('#ul002').prepend('<li class=\"liveResult noMatch\">Found no result</li>');$('#ul002 li').css('display','block');}
-	if(exampleCount == 0){$('#ul003').prepend('<li class=\"liveResult noMatch\">Found no result</li>');$('#ul003 li').css('display','block');}
+	if(lookupCount == 0){$('#ul001 .menuAlert').remove();$('#ul001').prepend('<li class=\"menuAlert liveResult noMatch\">Found no result</li>');$('#ul001 li').css('display','block');$('.sidebar .search form input').removeClass('loading');}
+    if(articleCount == 0){$('#ul002 .menuAlert').remove();$('#ul002').prepend('<li class=\"menuAlert liveResult noMatch\">Found no result</li>');$('#ul002 li').css('display','block');}
+	if(exampleCount == 0){$('#ul003 .menuAlert').remove();$('#ul003').prepend('<li class=\"menuAlert liveResult noMatch\">Found no result</li>');$('#ul003 li').css('display','block');}
 	// reset count variables;
 	 lookupCount=0;
 	 articleCount = 0;
@@ -121,6 +121,7 @@ function CheckEmptyAndLoadList()
 	var pageVal = $('title').html();
 	$('#feedUrl').remove();
 	$('#pageVal').remove();
+	$('.menuAlert').remove();
 	$('#feedform').append('<input id="feedUrl" name="feedUrl" value="'+pageUrl+'" style="display:none;">');
 	$('#feedform').append('<input id="pageVal" name="pageVal" value="'+pageVal+'" style="display:none;">');
 	$('.liveResult').remove();
@@ -160,7 +161,8 @@ else
           var searchString = $('#pageType').val() ;
           if ((searchString == null) || (searchString.length < 3)) {
 				$('#pageType').removeClass('loading');
-				 $('.liveResult').remove(); // replaces removeResults();
+				 $('.liveResult').remove(); 
+				 $('.searching').remove(); 
       	   		CheckEmptyAndLoadList();
 				$('.report').remove();
 				// debug$('.content').prepend('<li>too short or blank</li>'); // debug
@@ -169,9 +171,8 @@ else
             if (this.timer) clearTimeout(this.timer);
             this.timer = setTimeout(function () {
 				$('#pageType').addClass('loading');
-				// debug$('.content').prepend('<li>new search started </li>');// debug
-				// debug$('.content').prepend('<p class=\"report\">Search string ' +searchString +'</p>'); // debug
-
+				$('.searching').remove(); 
+				$('.list ul').prepend('<li class="menuAlert searching">Searching...</li>');
                $.ajax({
                 contentType: "application/x-www-form-urlencoded",
                 url: 'http://' + location.host + '/nokiasearch/GetDataServlet',
@@ -180,9 +181,10 @@ else
 				type: 'post',	 
                 success: function (response, textStatus) {
 
-				$('.liveResult').remove(); // replaces removeResults();
-								$('#pageType').removeClass('loading');
-
+				$('.liveResult').remove(); 
+				$('.searching').remove(); 
+				$('#pageType').removeClass('loading');
+				$('.list ul').prepend('<li class="menuAlert searching">Searching...</li>');
                 processNokiaData(response);
 
  }     

doc/api/templates/scripts/narrow.js

@@ -59,9 +59,20 @@ var narrowInit = function() {
 }
 
 $(document).ready(function(){
-  if ($('body').hasClass('narrow')) {
+/*   if ($('body').hasClass('narrow')) {
     narrowInit();
   }
+ */
+ if($(window).width()<600) {
+    $('body').addClass('narrow');
+
+    if ($("#narrowsearch").length == 0) {
+      narrowInit();
+    }
+  }
+  else {
+    $('body').removeClass('narrow');
+  }
 });
 
 $(window).bind('resize', function () {

doc/api/templates/style/narrow.css

@@ -15,7 +15,12 @@
     }
 
     .narrow .footer {
-      margin: 0;
+      margin: 0px;
+    }
+
+    .creator .header, .creator .header .content, .creator .footer, .creator .wrapper {
+      margin: 0px;
+      min-width: 300px;
     }
     .narrow .header
     {
@@ -49,7 +54,7 @@
 
     .narrow .header .qtref a
     {
-      color: #363534;
+      color: #00732F;
     }
 
     .narrow .header .qtref span
@@ -98,7 +103,7 @@
     }
     .narrow .header #shortCut ul li a
     {
-      color: #44a51c;
+      color: #00732F;
     }
 
     .narrow .wrapper .hd
@@ -126,6 +131,11 @@
         margin: 0 5px 0 5px;
     }
 
+    .creator .wrap
+    {
+        margin: 0px;
+		background:#FFFFFF;
+    }
     .narrow .wrap .toolbar
     {
       border-bottom: none;
@@ -135,7 +145,14 @@
     {
         padding-top: 15px;
     }
-
+    .creator .wrap .content
+    {
+        padding-top: 10px;
+    }
+    .creator .wrap .content .guide
+    {
+        padding-top: 15px;
+    }
     .narrow .wrap .feedback
     {
         display: none;
@@ -186,6 +203,9 @@
       *border: 1px solid #fff;
       *height: 17px;
       _height: 18px;
+	  /* to be fixed */
+	  display: none;
+	  /* to be fixed */
     }
 
     .narrow .indexbox .indexIcon {

doc/api/templates/style/offline.css

+@media screen
+{
+
+/* basic elements */
+    html
+    {
+        color: #000000;
+        background: #FFFFFF;
+    }
+    table
+    {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+    fieldset, img
+    {
+        border: 0;
+        max-width:100%;
+    }
+    address, caption, cite, code, dfn, em, strong, th, var, optgroup
+    {
+        font-style: inherit;
+        font-weight: inherit;
+    }
+    del, ins
+    {
+        text-decoration: none;
+    }
+    ol li
+    {
+        list-style: decimal;
+    }
+    ul li
+    {
+        list-style: none;
+    }
+    caption, th
+    {
+        text-align: left;
+    }
+    h1, h2, h3, h4, h5, h6
+    {
+        font-size: 100%;
+    }
+    q:before, q:after
+    {
+        content: '';
+    }
+    abbr, acronym
+    {
+        border: 0;
+        font-variant: normal;
+    }
+    sup, sub
+    {
+        vertical-align: baseline;
+    }
+    tt, .qmlreadonly span, .qmldefault span
+    {
+        word-spacing:0.5em;
+    }
+    legend
+    {
+        color: #000000;
+    }
+    strong
+    {
+        font-weight: bold;
+    }
+    em
+    {
+        font-style: italic;
+    }
+
+    body
+    {
+        margin-left: 0.5em;
+        margin-right: 0.5em;
+        font-family: sans-serif;
+        line-height: normal
+    }
+    a
+    {
+        color: #00732F;
+        text-decoration: none;
+    }
+    hr
+    {
+        background-color: #E6E6E6;
+        border: 1px solid #E6E6E6;
+        height: 1px;
+        width: 100%;
+        text-align: left;
+        margin: 1.5em 0 1.5em 0;
+    }
+
+    pre
+    {
+        border: 1px solid #DDDDDD;
+        -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        border-radius: 0.7em 0.7em 0.7em 0.7em;
+        margin: 0 1.5em 1em 1em;
+        padding: 1em 1em 1em 1em;
+        overflow-x: auto;
+    }
+    table, pre
+    {
+        -moz-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        -webkit-border-radius: 0.7em 0.7em 0.7em 0.7em;
+        border-radius: 0.7em 0.7em 0.7em 0.7em;
+        background-color: #F6F6F6;
+        border: 1px solid #E6E6E6;
+        border-collapse: separate;
+        margin-bottom: 2.5em;
+    }
+    pre {
+        font-size: 90%;
+        display: block;
+        overflow:hidden;
+    }
+    thead
+    {
+        margin-top: 0.5em;
+        font-weight: bold
+    }
+    th
+    {
+        padding: 0.5em 1.5em 0.5em 1em;
+        background-color: #E1E1E1;
+        border-left: 1px solid #E6E6E6;
+    }
+    td
+    {
+        padding: 0.25em 1.5em 0.25em 1em;
+    }
+
+    td.rightAlign
+    {
+        padding: 0.25em 0.5em 0.25em 1em;
+    }
+    table tr.odd
+    {
+        border-left: 1px solid #E6E6E6;
+        background-color: #F6F6F6;
+        color: #66666E;
+    }
+    table tr.even
+    {
+        border-left: 1px solid #E6E6E6;
+        background-color: #ffffff;
+        color: #66666E;
+    }
+
+    div.float-left
+    {
+        float: left; margin-right: 2em
+    }
+    div.float-right
+    {
+        float: right; margin-left: 2em
+    }
+
+    span.comment
+    {
+        color: #008B00;
+    }
+    span.string, span.char
+    {
+        color: #000084;
+    }
+    span.number
+    {
+        color: #a46200;
+    }
+    span.operator
+    {
+        color: #202020;
+    }
+    span.keyword
+    {
+        color: #840000;
+    }
+    span.name
+    {
+        color: black
+    }
+    span.type
+    {
+        font-weight: bold
+    }
+    span.type a:visited
+    {
+        color: #0F5300;
+    }
+    span.preprocessor
+    {
+        color: #404040
+    }
+/* end basic elements */
+
+/* font style elements */
+    .heading
+    {
+        font-weight: bold;
+        font-size: 125%;
+    }
+    .subtitle
+    {
+        font-size: 110%
+    }
+    .small-subtitle
+    {
+        font-size: 100%
+    }
+    .red
+    {
+        color:red;
+    }
+/* end font style elements */
+
+/* global settings*/
+    .header, .footer
+    {
+        display: block;
+        clear: both;
+        overflow: hidden;
+    }
+/* end global settings*/
+
+/* header elements */
+    .header .qtref
+    {
+        color: #00732F;
+        font-weight: bold;
+        font-size: 130%;
+    }
+
+    .header .content
+    {
+        margin-bottom: 0.5em
+    }
+
+    .header .breadcrumb
+    {
+        font-size: 90%;
+        padding: 0.5em 0 0.5em 1em;
+        margin: 0;
+        background-color: #fafafa;
+        height: 1.35em;
+        border-bottom: 1px solid #d1d1d1;
+    }
+
+    .header .breadcrumb ul
+    {
+        margin: 0;
+        padding: 0;
+    }
+
+    .header .content
+    {
+        word-wrap: break-word;
+    }
+
+    .header .breadcrumb ul li
+    {
+        float: left;
+        background: url(../images/breadcrumb.png) no-repeat 0 3px;
+        padding-left: 1.5em;
+        margin-left: 1.5em;
+    }
+
+    .header .breadcrumb ul li.last
+    {
+        font-weight: normal;
+    }
+
+    .header .breadcrumb ul li a
+    {
+        color: #00732F;
+    }
+
+    .header .breadcrumb ul li.first
+    {
+        background-image: none;
+        padding-left: 0;
+        margin-left: 0;
+    }
+
+    .header .content ol li {
+        background: none;
+        margin-bottom: 1.0em;
+        margin-left: 1.2em;
+        padding-left: 0
+    }
+
+    .header .content li
+    {
+        background: url(../images/bullet_sq.png) no-repeat 0 5px;
+        margin-bottom: 1em;
+        padding-left: 1.2em;
+    }
+
+/* end header elements */
+
+/* content elements */
+    .content h1
+    {
+        font-weight: bold;
+        font-size: 130%
+    }
+
+    .content h2
+    {
+        font-weight: bold;
+        font-size: 120%;
+        width: 100%;
+    }
+    .content h3
+    {
+        font-weight: bold;
+        font-size: 110%;
+        width: 100%;
+    }
+    .content table p
+    {
+        margin: 0
+    }
+    .content ul
+    {
+        padding-left: 2.5em;
+    }
+    .content li
+    {
+        padding-top: 0.25em;
+        padding-bottom: 0.25em;
+    }
+    .content ul img {
+        vertical-align: middle;
+    }
+
+    .content a:visited
+    {
+        color: #4c0033;
+        text-decoration: none;
+    }
+
+    .content a:visited:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+
+    a:hover
+    {
+        color: #4c0033;
+        text-decoration: underline;
+    }
+    descr p a
+    {
+        text-decoration: underline;
+    }
+
+    .descr p a:visited
+    {
+        text-decoration: underline;
+    }
+
+    .alphaChar{
+        width:95%;
+        background-color:#F6F6F6;
+        border:1px solid #E6E6E6;
+        -moz-border-radius: 7px 7px 7px 7px;
+        border-radius: 7px 7px 7px 7px;
+        -webkit-border-radius: 7px 7px 7px 7px;
+        font-size:12pt;
+        padding-left:10px;
+        margin-top:10px;
+        margin-bottom:10px;
+    }
+    .flowList{
+        /*vertical-align:top;*/
+        /*margin:20px auto;*/
+
+        column-count:3;
+        -webkit-column-count:3;
+        -moz-column-count:3;
+/*
+        column-width:100%;
+        -webkit-column-width:200px;
+        -col-column-width:200px;
+*/
+        column-gap:41px;
+        -webkit-column-gap:41px;
+        -moz-column-gap:41px;
+
+        column-rule: 1px dashed #ccc;
+        -webkit-column-rule: 1px dashed #ccc;
+        -moz-column-rule: 1px dashed #ccc;
+    }
+
+    .flowList dl{
+    }