You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@jspwiki.apache.org by br...@apache.org on 2017/04/22 19:40:11 UTC

[1/2] jspwiki git commit: Image %%magnify

Repository: jspwiki
Updated Branches:
  refs/heads/master c03da1c21 -> be183fc4e


Image %%magnify


Project: http://git-wip-us.apache.org/repos/asf/jspwiki/repo
Commit: http://git-wip-us.apache.org/repos/asf/jspwiki/commit/b4a67ea7
Tree: http://git-wip-us.apache.org/repos/asf/jspwiki/tree/b4a67ea7
Diff: http://git-wip-us.apache.org/repos/asf/jspwiki/diff/b4a67ea7

Branch: refs/heads/master
Commit: b4a67ea79e942792445c278ce0de1f6fb070dd55
Parents: c03da1c
Author: brushed <di...@gmail.com>
Authored: Sat Apr 22 21:38:54 2017 +0200
Committer: brushed <di...@gmail.com>
Committed: Sat Apr 22 21:38:54 2017 +0200

----------------------------------------------------------------------
 .../src/main/scripts/behaviors/Magnify.js       | 69 ++++++++++++++++++++
 .../src/main/scripts/wiki/Wiki.Behaviors.js     | 23 +++++--
 .../main/styles/haddock/default/Magnify.less    | 46 +++++++++++++
 3 files changed, 133 insertions(+), 5 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/jspwiki/blob/b4a67ea7/jspwiki-war/src/main/scripts/behaviors/Magnify.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/behaviors/Magnify.js b/jspwiki-war/src/main/scripts/behaviors/Magnify.js
new file mode 100644
index 0000000..7323bc1
--- /dev/null
+++ b/jspwiki-war/src/main/scripts/behaviors/Magnify.js
@@ -0,0 +1,69 @@
+/*
+    JSPWiki - a JSP-based WikiWiki clone.
+
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); fyou may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+*/
+/*
+Dynamic Style: Magnifier
+    Add a magnifying overlay glass to images on mouseover.
+
+Inspired by: https://github.com/marcaube/bootstrap-magnify
+
+*/
+
+function Magnify( images ){
+
+    //only one magnifier can be visible at the same time
+    var maggy = "div.magnifier".slick().inject(document.body);
+
+    function move_maggy( event ){
+
+        var img = event.target,
+            isVisible = ( event.type != "mouseleave" );
+
+        if( isVisible ){
+
+            var box = img.getCoordinates(),
+                mouseLeft = event.page.x,
+                mouseTop = event.page.y,
+                radius = maggy.offsetWidth / 2,  //maggy radius : width==height
+
+                bgX = Math.round( radius - (mouseLeft - box.left) / box.width * img.naturalWidth ),
+                bgY = Math.round( radius - (mouseTop - box.top) / box.height * img.naturalHeight );
+
+            //console.log(box.height, img.naturalWidth, img.naturalHeight, img.naturalHeight/box.height, bgX+"px "+bgY+"px" );
+
+            maggy.setStyles({
+                left: mouseLeft - radius,
+                top: mouseTop - radius,
+                backgroundImage: "url('" + img.src + "')",
+                backgroundPosition: bgX + "px " + bgY + "px"
+            });
+
+        }
+
+        maggy.ifClass( isVisible , "show" );
+
+    }
+
+    $$( images ).addEvents({
+        mousemove: move_maggy,
+        mouseleave: move_maggy
+    });
+
+}

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/b4a67ea7/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js b/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
index 35b1b37..ba7a56f 100644
--- a/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
+++ b/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
@@ -689,8 +689,20 @@ DOM Structure:
     })
 
 /*
+Behavior: Magnify
+    Add magnifying image glass
+
+Wiki-markup:
+    > %%magnify <img> /%
+    > [{Image src='...' class='magnify' }]
+
+*/
+    .once(".magnify img", Magnify)
+
+
+/*
 Behavior: DropCaps
-    Convert the first character of a paragraph to a large "DropCap"
+    Convert the first character of a paragraph to a large "DropCap" character
 
 >    %%dropcaps .. /%
 
@@ -757,7 +769,7 @@ wiki-slides
 
         elements
             .grab(divider.slick(), "top") //add one extra group-start-element at the top
-            .groupChildren("hr", "div.slide");
+            .groupChildren(divider, "div.slide");
 
     })
 
@@ -767,7 +779,7 @@ Behviour:  Background
     Move image to the background of a page.
     Also support additional image styles on background images.
 
-Case1 ??:
+Case1:
 div[this is the parent container]
     img.bg[src=<imageurl>]
     ...
@@ -835,13 +847,14 @@ div[this is the parent container]
                     element.inject(bg, "before");
 
             });
-            //bgBox.destroy();   //not realy needed as per default the .bg  element is hidden
+            //bgBox.destroy();   //not really needed as per default css the .bg  element is hidden
             //bgBox.parentNode.removeChild(bgBox);
         }
 
     })
-/*
 
+/*
+Behvior:  Image Caption
 
 DOM Structure
 

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/b4a67ea7/jspwiki-war/src/main/styles/haddock/default/Magnify.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Magnify.less b/jspwiki-war/src/main/styles/haddock/default/Magnify.less
new file mode 100644
index 0000000..d117a69
--- /dev/null
+++ b/jspwiki-war/src/main/styles/haddock/default/Magnify.less
@@ -0,0 +1,46 @@
+/*
+    JSPWiki - a JSP-based WikiWiki clone.
+
+    Licensed to the Apache Software Foundation (ASF) under one
+    or more contributor license agreements.  See the NOTICE file
+    distributed with this work for additional information
+    regarding copyright ownership.  The ASF licenses this file
+    to you under the Apache License, Version 2.0 (the
+    "License"); fyou may not use this file except in compliance
+    with the License.  You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+    Unless required by applicable law or agreed to in writing,
+    software distributed under the License is distributed on an
+    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, either express or implied.  See the License for the
+    specific language governing permissions and limitations
+    under the License.
+*/
+/*
+Style: Magnify
+
+DOM Structure:
+    (start code)
+    div.magnifier[.show][background-image="url(...)"][backgroundPosition="..."]
+    (end)
+*/
+.magnifier {
+  display: none;
+  position: absolute;
+  z-index:20;
+  border-radius: 50%;
+  width: @magnifier-size;
+  height: @magnifier-size;
+  background-repeat: no-repeat;
+  background-color: rgba(255,255,255, 0.8);
+  pointer-events: none;
+
+  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
+
+}
+
+.magnify img { cursor:move;}
+
+//.magnifier.show { display:block; }  covered by bootstrap's generic .show


[2/2] jspwiki git commit: Header Redesign

Posted by br...@apache.org.
Header Redesign

 +various small Haddock Template updates


Project: http://git-wip-us.apache.org/repos/asf/jspwiki/repo
Commit: http://git-wip-us.apache.org/repos/asf/jspwiki/commit/be183fc4
Tree: http://git-wip-us.apache.org/repos/asf/jspwiki/tree/be183fc4
Diff: http://git-wip-us.apache.org/repos/asf/jspwiki/diff/be183fc4

Branch: refs/heads/master
Commit: be183fc4eaa304fd357163d23e1d433b5f131abb
Parents: b4a67ea
Author: brushed <di...@gmail.com>
Authored: Sat Apr 22 21:39:59 2017 +0200
Committer: brushed <di...@gmail.com>
Committed: Sat Apr 22 21:39:59 2017 +0200

----------------------------------------------------------------------
 ChangeLog                                       |  21 +++
 jspwiki-war/src/main/config/wro/wro-haddock.xml |   1 +
 .../src/main/java/org/apache/wiki/Release.java  |   2 +-
 .../main/java/org/apache/wiki/plugin/Image.java |  43 ++---
 .../java/org/apache/wiki/plugin/Search.java     |  73 ++++----
 .../main/scripts/moo-extend/HighlightQuery.js   |  18 +-
 .../src/main/scripts/wiki-edit/Wiki.Edit.js     |  44 +++--
 .../src/main/scripts/wiki-edit/Wiki.Snips.js    | 172 +++++++++++++------
 jspwiki-war/src/main/scripts/wiki/Wiki.js       |  89 ++++++----
 .../src/main/styles/haddock/default/Dialog.less |  26 ++-
 .../styles/haddock/default/ImagePlugin.less     |   4 +-
 .../styles/haddock/default/IndexPlugin.less     |   2 +
 .../haddock/default/Template.Content.less       |   4 +-
 .../styles/haddock/default/Template.Nav.less    |  55 ++----
 .../styles/haddock/default/Template.View.less   | 101 ++++++-----
 .../src/main/styles/haddock/default/Tips.less   |   2 +-
 .../styles/haddock/default/Viewer.Slimbox.less  |   1 +
 .../src/main/styles/haddock/default/build.less  |   3 +-
 .../src/main/styles/haddock/default/type.less   |  47 +++--
 .../main/styles/haddock/default/variables.less  |   7 +-
 .../webapp/templates/haddock/EditTemplate.jsp   |   1 -
 .../main/webapp/templates/haddock/Footer.jsp    |   2 +-
 .../main/webapp/templates/haddock/Header.jsp    |   4 +-
 .../src/main/webapp/templates/haddock/Nav.jsp   |   6 +-
 .../main/webapp/templates/haddock/Sidebar.jsp   |   4 +-
 .../webapp/templates/haddock/UploadTemplate.jsp |   1 -
 .../webapp/templates/haddock/ViewTemplate.jsp   |   3 +-
 .../templates/haddock/images/feather-small.png  | Bin 27799 -> 18970 bytes
 28 files changed, 446 insertions(+), 290 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/ChangeLog
----------------------------------------------------------------------
diff --git a/ChangeLog b/ChangeLog
index aae5712..c2b5fe1 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,24 @@
+2017-04-22  Dirk Frederickx (brushed AT apache DOT org)
+
+       * 2.10.3-git-38  Haddock Template updates
+
+       * Fixing some minor issues with the Image plugin ALIGN parameter
+
+       * %%magnify: add a magnifying glass to to reveal details of a cropped images.
+         Hover the mouse above the image to see the effect.
+
+       * Redesigned Header
+         The header (including the menu bar) now shifts up when you scroll down,
+         and reappears when scrolling back-up.  So you can quickly have access
+         to all the menu's and the quick search function.  Clicking the pagename
+         in the header get's you immediately back to the top of the page.
+         The menu bar has now become part of the (coloured) header section.
+
+       * Editor:
+         Improved the speed of the editor quick preview when editing large pages.
+         Updates to various editor auto-suggest dialogs.
+
+
 2017-03-18  Dirk Frederickx (brushed AT apache DOT org)
 
        * 2.10.3-git-37  Haddock Template

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/config/wro/wro-haddock.xml
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/config/wro/wro-haddock.xml b/jspwiki-war/src/main/config/wro/wro-haddock.xml
index add207b..7cb0ccf 100644
--- a/jspwiki-war/src/main/config/wro/wro-haddock.xml
+++ b/jspwiki-war/src/main/config/wro/wro-haddock.xml
@@ -54,6 +54,7 @@
     <js>/scripts/behaviors/GraphBar.js</js>
     <js>/scripts/behaviors/Element.Reflect.js</js>
     <js>/scripts/behaviors/Flip.js</js>
+    <js>/scripts/behaviors/Magnify.js</js>
     <js>/scripts/behaviors/TableX.js</js>
     <js>/scripts/behaviors/TableX.Sort.js</js>
     <js>/scripts/behaviors/TableX.Filter.js</js>

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/java/org/apache/wiki/Release.java
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/java/org/apache/wiki/Release.java b/jspwiki-war/src/main/java/org/apache/wiki/Release.java
index 0a6b763..d00b688 100644
--- a/jspwiki-war/src/main/java/org/apache/wiki/Release.java
+++ b/jspwiki-war/src/main/java/org/apache/wiki/Release.java
@@ -72,7 +72,7 @@ public final class Release {
      *  <p>
      *  If the build identifier is empty, it is not added.
      */
-    public static final String     BUILD         = "37";
+    public static final String     BUILD         = "38";
 
     /**
      *  This is the generic version string you should use when printing out the version.  It is of

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/java/org/apache/wiki/plugin/Image.java
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/java/org/apache/wiki/plugin/Image.java b/jspwiki-war/src/main/java/org/apache/wiki/plugin/Image.java
index f12f1da..26142c9 100644
--- a/jspwiki-war/src/main/java/org/apache/wiki/plugin/Image.java
+++ b/jspwiki-war/src/main/java/org/apache/wiki/plugin/Image.java
@@ -143,40 +143,23 @@ public class Image
         StringBuilder result = new StringBuilder();
 
         result.append( "<table border=\"0\" class=\"imageplugin\"" );
-        //if( align != null ) result.append(" align=\""+align+"\"");
-        //if( style != null ) result.append(" style=\""+style+"\"");
 
-        //
-        //  Do some magic to make sure centering also work on FireFox
-        //
-        if( align != null && align.equals("center") )
+        if( title != null )
         {
-            result.append(" style=\"margin-left: auto; margin-right: auto;\"");
+            result.append(" title=\""+title+"\"");
         }
-/*
-        if( style != null )
-        {
-            result.append(" style=\""+style);
-
-            // Make sure that we add a ";" to the end of the style string
-            if( result.charAt( result.length()-1 ) != ';' ) result.append(";");
 
-            if( align != null && align.equals("center") )
+        if( align != null )
+        {
+            if( align.equals("center") )
             {
-                result.append(" margin-left: auto; margin-right: auto;");
+                result.append(" style=\"margin-left: auto; margin-right: auto; text-align:center; vertical-align:middle;\"");
+            }
+            else
+            {
+                result.append(" style=\"float:" + align + ";\"");
             }
-
-            result.append("\"");
-        }
-        else
-        {
-            if( align != null && align.equals("center") ) result.append(" style=\"margin-left: auto; margin-right: auto;\"");
         }
-*/
-
-        if( title != null ) result.append(" title=\""+title+"\"");
-
-        if( align != null && !(align.equals("center")) ) result.append(" align=\""+align+"\"");
 
         result.append( ">\n" );
 
@@ -189,7 +172,11 @@ public class Image
         //so it doesn't affect the caption
         result.append( "<tr><td" );
 
-        if( cssclass != null ) result.append(" class=\""+cssclass+"\"");
+        if( cssclass != null )
+        {
+            result.append(" class=\""+cssclass+"\"");
+        }
+
         if( style != null )
         {
             result.append(" style=\""+style);

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/java/org/apache/wiki/plugin/Search.java
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/java/org/apache/wiki/plugin/Search.java b/jspwiki-war/src/main/java/org/apache/wiki/plugin/Search.java
index 981b39c..1186819 100644
--- a/jspwiki-war/src/main/java/org/apache/wiki/plugin/Search.java
+++ b/jspwiki-war/src/main/java/org/apache/wiki/plugin/Search.java
@@ -1,4 +1,4 @@
-/* 
+/*
     Licensed to the Apache Software Foundation (ASF) under one
     or more contributor license agreements.  See the NOTICE file
     distributed with this work for additional information
@@ -14,7 +14,7 @@
     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
     specific language governing permissions and limitations
-    under the License.  
+    under the License.
 */
 package org.apache.wiki.plugin;
 
@@ -35,37 +35,37 @@ import java.util.Iterator;
 import java.util.Map;
 
 /**
- *  The "Search" plugin allows you to access the JSPWiki search routines and show the displays in an array on your page. 
- *  
+ *  The "Search" plugin allows you to access the JSPWiki search routines and show the displays in an array on your page.
+ *
  *  <p>Parameters : </p>
  *  <ul>
  *  <li><b>query</b> - String. A standard JSPWiki search query.</li>
  *  <li><b>set</b> - String. The JSPWiki context variable that will hold the results of the query. This allows you to pass your queries to other plugins on the same page as well. </li>
- *  <li><b>max</b> - Integer. How many search results are shown at maximum.</li> 
+ *  <li><b>max</b> - Integer. How many search results are shown at maximum.</li>
  *  </ul>
- *  
- *  @since 
+ *
+ *  @since
  */
 public class Search implements WikiPlugin
 {
     static Logger log = Logger.getLogger(Search.class);
-    
+
     /** Parameter name for setting the query string.  Value is <tt>{@value}</tt>. */
     public static final String PARAM_QUERY = "query";
 
-    /** Parameter name for setting the name of the set where the results are stored.  
-     *  Value is <tt>{@value}</tt>. 
+    /** Parameter name for setting the name of the set where the results are stored.
+     *  Value is <tt>{@value}</tt>.
      */
     public static final String PARAM_SET   = "set";
-    
+
     /** The default name of the result set. */
     public static final String DEFAULT_SETNAME = "_defaultSet";
-    
+
     /** The parameter name for setting the how many results will be fetched.
      *  Value is <tt>{@value}</tt>.
      */
     public static final String PARAM_MAX   = "max";
-    
+
     /**
      * {@inheritDoc}
      */
@@ -74,14 +74,14 @@ public class Search implements WikiPlugin
     {
         int maxItems = Integer.MAX_VALUE;
         Collection<SearchResult> results = null;
-        
+
         String queryString = params.get( PARAM_QUERY );
         String set         = params.get( PARAM_SET );
         String max         = params.get( PARAM_MAX );
-        
+
         if ( set == null ) set = DEFAULT_SETNAME;
         if ( max != null ) maxItems = Integer.parseInt( max );
-        
+
         if ( queryString == null )
         {
             results = (Collection<SearchResult>)context.getVariable( set );
@@ -98,17 +98,17 @@ public class Search implements WikiPlugin
                 return "<div class='error'>"+e.getMessage()+"</div>\n";
             }
         }
-        
+
         String res = "";
-        
+
         if ( results != null )
         {
             res = renderResults(results,context,maxItems);
         }
-        
+
         return res;
     }
-    
+
     private Collection<SearchResult> doBasicQuery( WikiContext context, String query )
         throws ProviderException, IOException
     {
@@ -119,27 +119,28 @@ public class Search implements WikiPlugin
 
         return list;
     }
-    
+
     private String renderResults( Collection<SearchResult> results, WikiContext context, int maxItems )
     {
         WikiEngine engine = context.getEngine();
-        
+
         Element table = XhtmlUtil.element(XHTML.table);
-        table.setAttribute(XHTML.ATTR_border,"0");
-        table.setAttribute(XHTML.ATTR_cellpadding,"4");
-        
+        //table.setAttribute(XHTML.ATTR_border,"0");
+        //table.setAttribute(XHTML.ATTR_cellpadding,"4");
+        table.setAttribute(XHTML.ATTR_class,"wikitable search-result");
+
         Element row = XhtmlUtil.element(XHTML.tr);
         table.addContent(row);
-        
+
         Element th1 = XhtmlUtil.element(XHTML.th,"Page");
         th1.setAttribute(XHTML.ATTR_width,"30%");
         th1.setAttribute(XHTML.ATTR_align,"left");
         row.addContent(th1);
-        
+
         Element th2 = XhtmlUtil.element(XHTML.th,"Score");
         th2.setAttribute(XHTML.ATTR_align,"left");
         row.addContent(th2);
-        
+
         int idx = 0;
         for ( Iterator<SearchResult> i = results.iterator(); i.hasNext() && idx++ <= maxItems; )
         {
@@ -148,31 +149,31 @@ public class Search implements WikiPlugin
 
             Element name = XhtmlUtil.element(XHTML.td);
             name.setAttribute(XHTML.ATTR_width,"30%");
-            
+
             name.addContent( XhtmlUtil.link(context.getURL( WikiContext.VIEW, sr.getPage().getName()),
                     engine.beautifyTitle(sr.getPage().getName())) );
- 
+
             row.addContent(name);
-            
+
             row.addContent(XhtmlUtil.element(XHTML.td,""+sr.getScore()));
-            
+
             table.addContent(row);
         }
-        
+
         if ( results.isEmpty() )
         {
             row = XhtmlUtil.element(XHTML.tr);
-            
+
             Element td = XhtmlUtil.element(XHTML.td);
             td.setAttribute(XHTML.ATTR_colspan,"2");
             Element b = XhtmlUtil.element(XHTML.b,"No results");
             td.addContent(b);
-            
+
             row.addContent(td);
 
             table.addContent(row);
         }
-        
+
         return XhtmlUtil.serialize(table);
     }
 }

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/scripts/moo-extend/HighlightQuery.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/moo-extend/HighlightQuery.js b/jspwiki-war/src/main/scripts/moo-extend/HighlightQuery.js
index 58ba87d..97bc679 100644
--- a/jspwiki-war/src/main/scripts/moo-extend/HighlightQuery.js
+++ b/jspwiki-war/src/main/scripts/moo-extend/HighlightQuery.js
@@ -40,15 +40,23 @@ function HighlightQuery( node, query, template ){
 
     if( query || (query = (document.referrer.match(/(?:\?|&)(?:q|query)=([^&]*)/)||[,''])[1]) ){
 
+
+    try {
+
         var words = decodeURIComponent(query)
-                    .stripScripts() //xss vulnerability
-                    .replace( /\+/g, " " )
-                    .replace( /\s+-\S+/g, "" )
-                    .replace( /([\(\[\{\\\^\$\|\)\?\*\.\+])/g, "\\$1" ) //escape metachars
-                    .trim().replace(/\s+/g,'|'),
+                .stripScripts() //xss vulnerability
+                .replace( /\+/g, " " )
+                .replace( /\s+-\S+/g, "" )
+                .replace( /([\(\[\{\\\^\$\|\)\?\*\.\+])/g, "\\$1" ) //escape metachars
+                .trim().replace(/\s+/g,'|'),
 
             hasWords = RegExp( "(" + words + ")" , "gi");
 
+    } catch(e) {
+        console.error(e);
+        return;
+    }
+
         //console.log("highlight word : ",query, words);
 
         node.mapTextNodes( function(s){

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Edit.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Edit.js b/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Edit.js
index 671c3f8..147bff7 100644
--- a/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Edit.js
+++ b/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Edit.js
@@ -31,6 +31,7 @@ Class: Wiki.Edit
 
 !(function( wiki ){
 
+var PreviewSemaphore;  //global semaphore to avoid double running the XHR preview
 
 wiki.add("textarea#editorarea", function( main ){
 
@@ -58,10 +59,20 @@ wiki.add("textarea#editorarea", function( main ){
 
         if( preview = getFormElem(".ajaxpreview") ){
 
-            snipe.addEvent("change", livepreview.pass([
-                preview,
-                getFormElem("[data-cmd=livepreview]") || {}
-            ], snipe));
+            var snipeHasChanged = false;
+
+            setInterval( function(){
+
+                if( snipeHasChanged && !PreviewSemaphore ){
+
+                    snipeHasChanged = false;
+                    livepreview( snipe, preview, getFormElem("[data-cmd=livepreview]") );
+
+                }
+
+            }, 250);
+
+            snipe.addEvent("change", function(){ snipeHasChanged = true; });
 
         }
 
@@ -103,25 +114,31 @@ function onbeforeunload( window, main ){
 }
 
 
-   /*
+/*
 Function: livepreview
     Linked as onChange handler to Snipe.
     Make AJAX call to the wiki server to convert the contents of the textarea
     (wiki markup) to HTML.
 */
 
-function livepreview(preview, previewToggle){
+function livepreview(snipe, preview, previewToggle){
 
-    var content = this.get("value").trim(),
+    var content = snipe.get("value").trim(),
         isEmpty = content == "",
         name, link;
 
     //console.log("**** change event", new Date().getSeconds() );
 
-    function updateWiki( hasBeenUpdated ){
+    function previewDone(){  PreviewSemaphore = false;  } //semaphore OFF!
+
+    function renderPreview( completed ){
 
-        preview.ifClass(!hasBeenUpdated, "loading");
-        if( hasBeenUpdated ){ wiki.update(); }
+        preview.ifClass(!completed, "loading");
+
+        if( completed ){
+            wiki.update();  //render the preview area
+            previewDone();
+        }
 
     }
 
@@ -157,6 +174,8 @@ function livepreview(preview, previewToggle){
 
         }
 
+        PreviewSemaphore = true;  //here we go:  semaphore ON!
+
         //return preview.set("html",preview.get("html")+" Lorem ipsum"); //test code
 
         //console.log("**** invoke Request.HTML ",previewcache, wiki.XHRPreview)
@@ -167,8 +186,9 @@ function livepreview(preview, previewToggle){
                 wikimarkup: content
             },
             update: preview,
-            onRequest: updateWiki,
-            onComplete: updateWiki.pass(true)
+            onRequest: renderPreview,
+            onComplete: renderPreview.pass(true),
+            onError: previewDone
 
         }).send();
 

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js b/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
index 0c7e97f..b66ea8b 100644
--- a/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
+++ b/jspwiki-war/src/main/scripts/wiki-edit/Wiki.Snips.js
@@ -104,9 +104,9 @@ Wiki.Snips = {
     tabs: {
         nScope: {
         "%%(":")",
-        "%%tabbedSection":"/%"
+        "%%tabs":"/%"
         },
-        snippet:"%%tabbedSection \n%%tab-{tabTitle1}\ntab content 1\n/%\n%%tab-tabTitle2\ntab content 2\n/%\n/%\n "
+        snippet:"%%tabs\n!tab-1\ntab-1 content 1\n!tab-2\ntab-2 content \n/%\n "
     },
 
     img: "\n[{Image src='{img.jpg}' width='400px' height='300px' align='left' }]\n ",
@@ -151,8 +151,8 @@ Wiki.Snips = {
 
     charsDlg: {
         suggest: {
-        lback: /&\w*;?$/,
-        match: /^&\w*;?/
+            lback: /&\w*;?$/,
+            match: /^&\w*;?/
         },
         dialog: [ Dialog.Chars, {
             caption:"dialog.character.entities".localize()
@@ -164,65 +164,63 @@ Wiki.Snips = {
         scope: { "%%":"/%" },
         suggest: "icon-\\S*",
         iconDlg: [Dialog.Selection, {
-        cssClass:".dialog-horizontal",
-        body:{
-            "icon-search":"<div class='icon-search'></div>",
-            "icon-user":"<div class='icon-user'></div>",
-            "icon-home":"<div class='icon-home'></div>",
-            "icon-refresh":"<div class='icon-refresh'></div>",
-            "icon-repeat":"<div class='icon-repeat'></div>",
-            "icon-bookmark":"<div class='icon-bookmark'></div>",
-            "icon-tint":"<div class='icon-tint'></div>",
-            "icon-plus":"<div class='icon-plus'></div>",
-            "icon-external-link":"<div class='icon-external-link'></div>",
-
-            "icon-signin":"<div class='icon-signin'></div>",
-            "icon-signout":"<div class='icon-signout'></div>",
-            "icon-rss":"<div class='icon-rss'></div>",
-            "icon-wrench":"<div class='icon-wrench'></div>",
-            "icon-filter":"<div class='icon-filter'></div>",
-            "icon-link":"<div class='icon-link'></div>",
-            "icon-paper-clip":"<div class='icon-paper-clip'></div>",
-            "icon-undo":"<div class='icon-undo'></div>",
-            "icon-euro":"<div class='icon-euro'></div>",
-            "icon-slimbox":"<div class='icon-slimbox'></div>",
-            "icon-picture":"<div class='icon-picture'></div>",
-            "icon-columns":"<div class='icon-columns'></div>"
-        }
+        cssClass:".dialog-horizontal.icons",
+        body: ( function(icons){
+                    var obj = {};
+                    icons.split(",").forEach( function(item){
+                        item = "icon-"+item;
+                        obj[item]="<div class='"+item+"'></div>";
+                    })
+                    return obj;
+                }
+              )( "search,user,home,refresh,repeat,bookmark,tint,plus,external-link,signin,signout,rss,wrench,filter,link,paper-clip,undo,euro,tag,star,star-o,heart,trash-o,ellipsis-v,pie-chart,location,info,warning,error,flash,smile,frown,meh,slimbox,picture,columns"
+              )
         }]
     },
 
-    contextText: {
-        scope: { "%%":"/%" },
+    textDlg: {
+        scope: { "%%":" " },
         suggest: {
-        lback: /%%text-(\w*)$/,
-        //match: "^default|success|info|warning|danger|capitalize|lowercase|uppercase|smallcaps"
-        match: /^\w*/
+            lback: /(:?%%|\.)text-(\w*)$/,
+            //match: "^default|success|info|warning|danger|capitalize|lowercase|uppercase|smallcaps"
+            match: /^\w*/
         },
-        contextText: [Dialog.Selection, {
-        cssClass:".dialog-horizontal",
+        textDlg: [Dialog.Selection, {
+        cssClass:".dialog-horizontal.text-styles",
         body:{
             primary:"<span class='text-primary'>primary</span>",
             success:"<span class='text-success'>success</span>",
             info:"<span class='text-info'>info</span>",
             warning:"<span class='text-warning'>warning</span>",
             danger:"<span class='text-danger'>danger</span>",
-            "":"",
-            capitalize:"<span class='text-capitalize'>capitalize</span>",
-            lowercase:"<span class='text-lowercase'>lowercase</span>",
-            uppercase:"<span class='text-uppercase'>uppercase</span>",
-            smallcaps:"<span class='text-smallcaps'>Small Caps</span>"
+
+            white:"<span class='text-white'>white</span>",
+            //"white.shadow":"<span class='bg-black'><span class='text-white shadow'>shadow</span></span>",
+            black:"<span class='text-black'>black</span>",
+            //"black.shadow":"<span class='text-black shadow'>shadow</span>",
+
+            divider2:"",
+            left:"<span class='icon-align-left'></span>",
+            center:"<span class='icon-align-center'></span>",
+            right:"<span class='icon-align-right'></span>",
+            justify:"<span class='icon-align-justify'></span>",
+
+            capitalize:"<span class='text-capitalize'>Aa</span>",
+            lowercase:"<span class='text-lowercase'>aa</span>",
+            uppercase:"<span class='text-uppercase'>AA</span>",
+            smallcaps:"<span class='text-smallcaps'>Aa</span>"
+
         }
         }]
     },
 
     contextBG: {
-        scope: { "%%":"/%" },
+        scope: { "%%":" " },
         suggest: {
-        //lback: /%%(default|success|info|warning|error)$/,
-        //match: /^\w+/
-        lback: /%%(\w*)$/,
-        match: /^(default|success|info|warning|error)/
+            //lback: /%%(default|success|info|warning|error)$/,
+            //match: /^\w+/
+            lback: /%%(\w*)$/,
+            match: /^(default|success|info|warning|error)/
         },
         contextBG: [Dialog.Selection, {
         cssClass:".dialog-horizontal",
@@ -236,6 +234,71 @@ Wiki.Snips = {
         }]
     },
 
+    bgColorDlg: {
+        scope: { "%%":" " },
+        suggest: {
+        lback: /(:?%%|\.)bg-(\w*)$/,
+        match: /^\w*/
+        },
+        bgColorDlg: [Dialog.Selection, {
+        cssClass:".dialog-horizontal.bg-colors",
+        body:{
+            primary:"<span class='bg-primary' title='primary'>&para;</span>",
+            success:"<span class='bg-success' titlte='success'>&para;</span>",
+            info:"<span class='bg-info' title='info'>&para;</span>",
+            warning:"<span class='bg-warning' title='warning'>&para;</span>",
+            danger:"<span class='bg-danger' title='danger'>&para;</span>",
+
+            aqua:"<span class='bg-aqua' title='aqua'>&para;</span>",
+            blue:"<span class='bg-blue' title='blue'>&para;</span>",
+            navy:"<span class='bg-navy' title='navy'>&para;</span>",
+            teal:"<span class='bg-teal' title='teal'>&para;</span>",
+            green:"<span class='bg-green' title='green'>&para;</span>",
+            olive:"<span class='bg-olive' title='olive'>&para;</span>",
+            lime:"<span class='bg-lime' title='lime'>&para;</span>",
+
+            yellow:"<span class='bg-yellow' title='yellow'>&para;</span>",
+            orange:"<span class='bg-orange' title='orange'>&para;</span>",
+            red:"<span class='bg-red' title='red'>&para;</span>",
+            fuchsia:"<span class='bg-fuchsia' title='fuchsia'>&para;</span>",
+            purple:"<span class='bg-purple' title='purple'>&para;</span>",
+            maroon:"<span class='bg-maroon' title='maroon'>&para;</span>",
+
+            white:"<span class='bg-white' title='white'>&para;</span>",
+            silver:"<span class='bg-silver' title='silver'>&para;</span>",
+            gray:"<span class='bg-gray' title='gray'>&para;</span>",
+            black:"<span class='bg-black' title='black'>&para;</span>"
+        }
+        }]
+    },
+
+    bgDlg: {
+        scope: { "%%bg.":" " },
+        suggest: {
+        lback: /(:%%bg\.|\.?)(\w*)$/,
+        //match: "^default|success|info|warning|danger"
+        match: /^\w*/
+        },
+        bgDlg: [Dialog.Selection, {
+        //caption:"Background Image",
+        cssClass:".dialog-horizontal",
+        body:{
+            "top":"&uarr;",
+            "right":"&rarr;",
+            "bottom":"&darr;",
+            "left":"&larr;",
+            "divider1":"",
+            "contain": "Contain",
+            "cover": "Cover",
+            "fixed":"Fixed",
+            "divider2":"",
+            "dark":"Dark",
+            "light":"Light",
+            "kenburns":"Animated"
+        }
+        }]
+    },
+
     labelDlg: {
         scope: { "%%":"/%" },
         suggest: {
@@ -275,19 +338,20 @@ Wiki.Snips = {
     },
 
     cssDlg: {
-        scope: { "%%":"/%" },
-        suggest: {lback:"%%([\\da-zA-Z-_]*)$", match:"^[\\da-zA-Z-_]+"},
+        scope: { "%%":" " },
+        suggest: {lback:"(:?%%|\\.)([\\da-zA-Z-_]*)$", match:"^[\\da-zA-Z-_]*"},
         cssDlg: [Dialog.Selection, {
         caption: "dialog.styles".localize(),
         cssClass: ".dialog-filtered",
         body: {
         "(css:value;)":"any css definitions",
-        "default":"Contextual <span class='info'>backgrounds</span>",
-        "text-{default}":"Contextual colors and other text styles",
-        "label-{default}":"<span class='label label-success'>Contextual labels</span>",
+        "bg-":"Background colors",
+        "text-{default}":"Text colors and other styles",
+        "default":"<span class='default'>Contextual boxes</span>",
+        "label-{default}":"<span class='label label-default'>Contextual labels</span>",
         "badge":"Badges <span class='badge'>007</span>",
         //"btn-default":"<span class='btn btn-xs btn-default'>Buttons</span>",
-        "collapse":"<b class='bullet'></b>Collapsible lists",
+        "collapse":"Collapsible lists <b class='bullet'></b>",
         "list-{nostyle}":"List styles",
         "table-{fit}":"Table styles",
         "":"",
@@ -522,8 +586,8 @@ Wiki.Snips = {
             Object.append(body, {
                 "__{bold}__": "<span style='font-family:serif;'><b>B</b></span>",
                 "''{italic}''": "<span style='font-family:serif;'><i>I</i></span>",
-                "{{{monospaced}}} ": "<tt>&lt;/&gt;</tt>",
-                "{{{{code}}}}": "<span class='small' style='font-family:monospace;'>code</span>",
+                "{{{monospaced}}} ": "<tt title='inline monospaced'>&lt;&gt;</tt>",
+                "{{{{code}}}}": "<span title='code' class='small' style='font-family:monospace;'>code</span>",
                 "divider1": "",
                 "[{link}]": "<span class='icon-link' title='Insert a link'/>",
                 //"[description|{link}|options]": "<span class='icon-link'/>",

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/scripts/wiki/Wiki.js
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/scripts/wiki/Wiki.js b/jspwiki-war/src/main/scripts/wiki/Wiki.js
index 4c58724..1352b54 100644
--- a/jspwiki-war/src/main/scripts/wiki/Wiki.js
+++ b/jspwiki-war/src/main/scripts/wiki/Wiki.js
@@ -109,11 +109,8 @@ var Wiki = {
                 wiki.resizer(element, $$(element.get("data-resize")) );
             })
 
-            //make navigation bar sticky (simulate position:sticky; )
-            //.add(".sticky", "onSticky" )
-            .add( ".sticky", function(element){
-                element.onSticky();
-            })
+            //add header scroll-up/down effect
+            .add( ".fixed-header > .header", wiki.yoyo)
 
             //highlight previous search query retreived from a cookie or referrer page
             .add( ".page-content", function(element){
@@ -180,10 +177,10 @@ var Wiki = {
 
     },
 
+
     caniuse: function( body ){
 
-        //support for flexbox is broken in IE, let's do it the hard-way
-        //console.log(navigator.appVersion);
+        //support for flexbox is broken in IE, do it the hard-way - ugh.
 
         var isIE11 = !(window.ActiveXObject) && "ActiveXObject" in window;
         var isIE9or10 = "ActiveXObject" in window;
@@ -243,6 +240,56 @@ var Wiki = {
     },
 
     /*
+    Function: yoyo ( header )
+        Add a yoyo effect to the header:  hide it on scroll down, show it again on scroll up.
+
+    Inspired by: https://github.com/WickyNilliams/headroom.js
+
+    DOM Structure:
+    (start code)
+        div[style='padding-top:nn']    => nn==height of header;  push content down
+        div.header.yoyo[.scroll-down]  => css: position=fixed
+    (end)
+
+    */
+    yoyo: function( header ){
+
+        var height = header.offsetHeight,
+            semaphore,
+            scrollY,
+            lastScrollY = 0;
+
+        //add spacer just infront of fixed element, adjust height == header (fixed elements do not take space in the dom)
+        "div".slick({styles: { paddingTop: height } }).inject(header,"before");
+
+        window.addEvent("scroll", function(){ semaphore = true; });
+
+        setInterval( function(){
+
+            if( semaphore ){
+
+                semaphore = false;
+                scrollY = window.getScroll().y;
+
+                // Limit scroll top to counteract iOS / OSX bounce.
+        		scrollY = scrollY.limit(0, window.getScrollSize().y - window.getSize().y);
+
+                if( Math.abs(lastScrollY - scrollY) > 5 /* minimum difference */ ){
+
+                    header.ifClass( scrollY > lastScrollY && scrollY > height, "scrolling-down" );
+                    //console.log(scrollY, lastScrollY, height);
+
+
+                    lastScrollY = scrollY;
+                }
+            }
+
+        }, 250);
+
+    },
+
+
+    /*
     Function: popstate
         When pressing the back-button, the "popstate" event is fired.
         This popstate function will fire a internal 'popstate' event
@@ -732,34 +779,6 @@ var Wiki = {
 
             }).send( "params=" + params );
 
-            /* obsolete
-            new Request.JSON({
-                //url: this.JsonUrl,
-                url: this.JsonUrl + method,
-                data: JSON.encode({     //FFS ECMASCript5; JSON.stringify() ok >IE8
-                    //jsonrpc:'2.0', //CHECK
-                    id: this.jsonid++,
-                    method: method,
-                    params: params
-                }),
-                method: "post",
-                onSuccess: function( response ){
-                    if( response.error ){
-                        throw new Error("Wiki servier rpc error: " + response.error);
-                        callback(null);
-                    } else {
-                        callback( response.result );
-                    }
-                },
-                onError: function(error){
-                    //console.log(error);
-                    throw new Error("Wiki rpc error: "+error);
-                    callback(null);
-
-                }
-            }).send();
-            */
-
         }
 
     }

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/Dialog.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Dialog.less b/jspwiki-war/src/main/styles/haddock/default/Dialog.less
index a6e5bf3..cb0abe6 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Dialog.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Dialog.less
@@ -141,6 +141,7 @@ DOM structure:
         .selected {
             //inherit from .dropdown-menu > .active > a
             color: @dropdown-link-active-color;
+            [class*=text-] { color: @dropdown-link-active-color; }
             text-decoration: none;
             outline: 0;
             background-color: @dropdown-link-active-bg;
@@ -164,12 +165,15 @@ DOM structure:
         .divider {
             float: left;
             margin: 0 0.5em;
-            padding: 1.5em 1px 1em 0;  //1px is the width of the divider
+            padding: 20px 1px 18px 0;  //1px is the width of the divider,  FIXME padding top/bottom
         }
     }
 
 }
-.dialog.chars .item { text-align:center; }
+.dialog.chars .item {
+        text-align:center;
+        position:relative;
+}
 .dialog.chars .body { max-height:200px; overflow:auto;  }
 
 /*
@@ -268,3 +272,21 @@ Style: .dialog.color
     .btn-group { padding:0; }  //reset default bootstrap padding to alling with input elements
 
 }
+
+.dialog.selection.dialog-horizontal.icons {
+    .close { .hide;}
+    .body { padding:0; }
+    .item { width:32px; text-align:center; }
+    .item:nth-child(6n+1){ clear:both; }
+}
+
+.dialog.selection.dialog-horizontal.bg-colors {
+    .item { padding: 0; }
+    .item span { display:inline-block; }
+}
+
+.dialog.selection.dialog-horizontal.text-styles {
+    .divider { display:none;  }
+    .divider + * { clear:both;  }
+    .item[title=white] { background-color: @gray; }
+}

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less b/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
index 46b1bc6..e01ae2b 100644
--- a/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
+++ b/jspwiki-war/src/main/styles/haddock/default/ImagePlugin.less
@@ -23,7 +23,7 @@ Style: ImagePlugin
 
 DOM Structure:
     (start code)
-    table.imageplugin[border="0"][align="left|right|center"][style="..."]
+    table.imageplugin[style="..."]
         caption[align="bottom"]  caption-text
         tbody
             tr
@@ -40,7 +40,7 @@ DOM Structure:
 }
 
 figure {
-  display:table;
+  display: table;
   position: relative;
   break-inside: avoid;
 }

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/IndexPlugin.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/IndexPlugin.less b/jspwiki-war/src/main/styles/haddock/default/IndexPlugin.less
index eb88222..0f4d617 100644
--- a/jspwiki-war/src/main/styles/haddock/default/IndexPlugin.less
+++ b/jspwiki-war/src/main/styles/haddock/default/IndexPlugin.less
@@ -41,7 +41,9 @@ DOM structure:
 
     .header {
         .btn; .btn-primary;
+        display: block;
         border: none;
+        text-align: center;
         font-size: 0; /*hide the " - " separators of the plugin! */
         overflow: scroll;
         a {

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/Template.Content.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.Content.less b/jspwiki-war/src/main/styles/haddock/default/Template.Content.less
index 5699c77..e1dadd6 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Content.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Content.less
@@ -41,7 +41,7 @@ DOM Structure:
 
 .content {
     /* position:relative;  => dont, otherwise suggestion dialogs are clipped */
-    padding:0;
+    padding: 0;
     overflow:hidden; //checkme
     clear:both;
     .hyphens(auto);
@@ -119,7 +119,7 @@ We may just hide the on/off toggle in css
 	//& > h2, & > h3, & > h4,  { margin-top:0; }
 }
 .page-content {
-    padding: @padding-base-vertical @padding-base-horizontal;
+    padding: @padding-base-horizontal;
 }
 
 

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less b/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less
index 3152bd5..0ec44fd 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less
@@ -47,49 +47,18 @@ div.row
 (end)
 */
 
-// ref. http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
-/*
-Note: avoid page-bump when sticky become 'fixed', by adding a spacer with its height
-
-(start code)
-    div.sticky(.stickyOn)
-        .. content ..
-        div.sticky-spacer[style="height:.."] //height calculated by js - same as content
-(end)
-
-*/
-.sticky {
-    display:block;
-
-    + .sticky-spacer { .hide; }
+.header > .navigation {
+    background: rgba(255,255,255,.1);
+    padding: 0 @padding-base-horizontal 0 0;
+    .clearfix;
 
-    .pagename {
-        font-family:@font-family-sans-serif;
-        font-size: @wiki-logo-font-size;
-        line-height: 1;
-        .opacity(0);
-        .transition(all .5s ease);
+    /* hover menu items with transparent effect  - undo some of the bootstrap color settings */
+    .nav .open > a,
+    .nav > li > a:hover,
+    .nav > li > a:focus {
+        background-color: rgba(255,255,255,.2);
+    }
+    .nav > li.disabled > a {
+        color: #ddd;  /*one tint lighter then defaul #eee */
     }
-}
-
-.stickyOn {
-    top: 0;
-    z-index: 5;
-    position: fixed;
-    background: @dropdown-bg;
-    .opacity(.9);
-    .box-shadow(0 9px 12px -9px rgba(0,0,0,.175));
-
-    + .sticky-spacer { .show; }
-
-    .pagename { .opacity(1); }
-}
-
-/* make sure the anchors remains visible, even below the fixed header elements */
-.page-content > [id^="section-"]:not(#section-TOC):before {
-  display: block;
-  content: " ";
-  margin-top: -50px; //approximate size of the fixed navigation block
-  height: 50px;
-  visibility: hidden;
 }

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/Template.View.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.View.less b/jspwiki-war/src/main/styles/haddock/default/Template.View.less
index 4709eb7..8af14c7 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.View.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.View.less
@@ -108,7 +108,6 @@ DOM structure:
         padding-right: @padding-base-horizontal;
     }
 
-
 }
 
 .titlebox.alert { margin:0; }
@@ -131,11 +130,6 @@ DOM structure:
 	> * {
 	    padding: @padding-base-horizontal/4 0 @padding-base-horizontal/4 @padding-base-horizontal;
 	}
-}
-
-.topline {
-    .clearfix();
-    border-bottom: 1px solid rgba(255,255,255,0.1);
     .btn [class^="icon-"]:before { font-size: 1.3em; }
 }
 
@@ -166,6 +160,27 @@ a.logo {
 
 }
 
+/*
+Fixed .header with hide (on scrolldown)  and show (on scrollup) effects.
+*/
+.fixed-header > .header {
+    position: fixed;
+    top:0;
+    z-index:5;
+    width:100%;
+    //will-change: transform;
+    .transition( transform 0.2s ease-in-out);
+    .translate( 0; 0 ); //transform: translateY(0);
+    //transform-origin: top;
+    //transform: perspective(400px) rotateX(0deg);
+
+    //when scrolling-down,  hide the fixed header
+    &.scrolling-down {
+        .translate(0;-100%); //transform: translateY(-100%); /*hide the header*/
+        //transform: perspective(400px) rotateX(-90deg);
+    }
+}
+
 
 .header .pagename,
 .header .breadcrumb {
@@ -178,41 +193,40 @@ a.logo {
     text-align: center;
     a { text-decoration:none; }
 
-    line-height: 1;
-    padding: 0.1em .5em;
+    line-height: 1.2;
+    padding: 0 .5em;
 }
 .reader .pagename {
     font-size: 6em;
 }
 
-//JSPWiki-s breadcrumb - do not inherit bootstraps breadcrumbs
+/*
+JSPWiki-s breadcrumb - do not inherit bootstraps breadcrumbs
+Only show breadcrumb on mouse hover
+*/
 .breadcrumb {
     .small;
     .transition(all .5s ease);
     color:transparent;
+    &:hover { color:inherit; }
 
     .divider:before {
         content:"\2022";   //&bull;
         padding:0 .25em;
     }
 }
-.header:hover .breadcrumb {
-    color:inherit;
-    //background:rgba(255,255,255,0.05);
-}
 
 
 .footer {
     //background: @wiki-footer-bg; //reuse header background
     padding: @padding-base-horizontal;
 	text-align: center;
-
 }
 
 
 /*
 Section: Sticky Footer
-This seciontCSS add-on will ensure to stick the footer to the bottom of the window
+This add-on will ensure to stick the footer to the bottom of the window
 even when there\u2019s not enough content to fill the page.
 
 .can-flex :  present when the browser supports flexbox
@@ -221,37 +235,36 @@ Credits: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
 */
 
 body.can-flex {
-  //hack for IE-bug :  see https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
-  display: flex;
-  min-height: 100vh;
-  flex-flow: column;
-}
-
-body.can-flex > .container-fluid,
-body.can-flex > .container {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-
-  min-height: 100vh;
-
-  -webkit-flex-flow: column;
-  -moz-flex-flow: column;
-  -ms-flex-flow: column;
-  flex-flow: column;
-}
-body.can-flex .content {
-  -webkit-box-flex: 1;
-  -moz-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
+    //hack for IE-bug :  see https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
+    display: flex;
+    min-height: 100vh;
+    flex-flow: column;
+
+    & > .container-fluid,
+    & > .container {
+        display: -webkit-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+
+        min-height: 100vh;
+
+        -webkit-flex-flow: column;
+        -moz-flex-flow: column;
+        -ms-flex-flow: column;
+        flex-flow: column;
+    }
+    & .content {
+        -webkit-box-flex: 1;
+        -moz-box-flex: 1;
+        -webkit-flex: 1;
+        -ms-flex: 1;
+        flex: 1;
+    }
 }
 
-
-.copyright, .wiki-version { .small; }
+.wiki-version { .small; }
 
 .reader .copyright {
     margin: 2em 0;

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/Tips.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Tips.less b/jspwiki-war/src/main/styles/haddock/default/Tips.less
index 6f91fc9..e67a048 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Tips.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Tips.less
@@ -51,5 +51,5 @@ Bootstrap
     &:hover { text-decoration:none; }
 }
 .tooltip-inner {
-
+    a { color:inherit; }
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/Viewer.Slimbox.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/Viewer.Slimbox.less b/jspwiki-war/src/main/styles/haddock/default/Viewer.Slimbox.less
index 2a7268a..a3ec5b0 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Viewer.Slimbox.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Viewer.Slimbox.less
@@ -109,6 +109,7 @@ DOM Structure:
         // default background setting, the actual background-image is set by slimbox.js
         //background:transparent no-repeat center center;
         background:rgba(255,255,255,.3) no-repeat center center;
+        background-size:contain;
 
         .box-shadow (@slimbox-viewport-corona);
 

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/build.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/build.less b/jspwiki-war/src/main/styles/haddock/default/build.less
index d7e2e8d..dc74e9f 100755
--- a/jspwiki-war/src/main/styles/haddock/default/build.less
+++ b/jspwiki-war/src/main/styles/haddock/default/build.less
@@ -33,7 +33,7 @@ Stylesheet: JSPWiki
 */
 
 // Core variables and mixins
-@import "../bootstrap/variables.less"; 
+@import "../bootstrap/variables.less";
 @import "../bootstrap/mixins.less";
 
 // Reset
@@ -105,6 +105,7 @@ Stylesheet: JSPWiki
 @import "pagination.less";
 //JSPWiki Components: Popovers
 @import "Tips.less";
+@import "Magnify.less";
 //JSPWiki Components: Misc
 @import "Viewer.less";
 @import "Viewer.Slimbox.less";

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/type.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/type.less b/jspwiki-war/src/main/styles/haddock/default/type.less
index b194269..1bc0844 100644
--- a/jspwiki-war/src/main/styles/haddock/default/type.less
+++ b/jspwiki-war/src/main/styles/haddock/default/type.less
@@ -24,6 +24,11 @@ p, .p {
   margin: 0 0 (@line-height-computed / 2);
 }
 
+ul:last-child,
+ol:last-child {
+    margin:0;
+}
+
 /*
 Headings:
     The headings h2, h3 and h4 get a {{clear:left}} so they can appear
@@ -70,6 +75,8 @@ h2,h3,h4 {
 .lead {
     font-family:@wiki-logo-font-family;
 }
+
+
 //mimicing .quote in a dialog dropdown
 .dialog .lead-item {
     .lead;
@@ -212,6 +219,7 @@ dl dd { margin-left: 2em; }   //reset flat style of bootstrap/type
 .size-20 { width: 20% !important; }
 
 //make sure images obey the size of their container
+[class*=size-],
 .imageplugin td[class*=size-] { display:inline-block; }
 [class*=size-] > img { width:100% !important; }
 
@@ -230,6 +238,7 @@ span.text-black, div.text-black, .bg.light + .bg-overlay { color:@black; }
     padding: @padding-base-vertical  @padding-base-horizontal;
     a {  color:inherit; }
 }
+
 .bg-success { background-color: @state-success-bg; }
 .bg-info    { background-color: @state-info-bg; }
 .bg-warning { background-color: @state-warning-bg; }
@@ -351,6 +360,26 @@ tt {
 }
 .list-nostyle { list-style: none; }
 
+.list-group.raised li { border:none; }
+
+
+//.list-group, .list-hover, .list-unstyled, .list-nostyle
+ul[class*=list-] > li > [class*="bg-"]:only-child {
+    margin: -10px -15px;  //undo the margin of the li(.list-item-group)
+    display:block;
+}
+
+.list-group-item:first-child > [class*="bg-"] {
+    border-top-left-radius: @list-group-border-radius;
+    border-top-right-radius: @list-group-border-radius;
+}
+.list-group-item:last-child > [class*="bg-"] {
+    border-bottom-left-radius: @list-group-border-radius;
+    border-bottom-right-radius: @list-group-border-radius;
+}
+
+
+
 .indent-1 { margin-left: 40px !important; }
 .indent-2 { margin-left: 80px !important; }
 .indent-3 { margin-left: 120px !important; }
@@ -374,7 +403,9 @@ Links:
 
 
 //generic behavior -- why not part of bootstrap ??
-a:hover { cursor:pointer; }
+a:hover {
+    cursor:pointer;
+}
 
 //mimic :hover, for old ie cases which may not yet support :hover
 .hover { background-color:@wiki-hover; }
@@ -526,8 +557,10 @@ Section: Reusable Styles
 }
 .sub { top: 0.4em; }
 
-
-.caps { font-variant: small-caps; }
+.text-smallcaps, .caps {
+    font-variant: small-caps;
+    letter-spacing:0.1em;
+}
 
 .strike { text-decoration:line-through; }
 
@@ -605,9 +638,6 @@ blockquote:last-child { margin-bottom:0; }
 //TODO: why not use .panel iso .alert as base for these communication boxes
 .default, .success, .information, .info,  .warning, .error, .danger {
     .alert;
-    //clear:both;
-    //display:block;
-    //.clearfix;
 }
 //support inline information blocks
 span.default, span.success, span.information, span.info,  span.warning, span.error, span.danger {
@@ -616,7 +646,7 @@ span.default, span.success, span.information, span.info,  span.warning, span.err
 }
 
 .default {
-    .alert-variant(@btn-default-bg; @btn-default-border;@btn-default-color);
+    .alert-variant(@btn-default-bg; @btn-default-border; @btn-default-color);
 }
 .success            { .alert-success; }
 .info, .information { .alert-info; }
@@ -628,9 +658,6 @@ td .success, td .information, td .warning, td .error { margin:0; }
 //BETTER:  td > .alert { margin:0; }
 
 
-.text-smallcaps { font-variant: small-caps; }
-
-
 
 /*
 Style: CAPTCHA tables and images

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/styles/haddock/default/variables.less
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/styles/haddock/default/variables.less b/jspwiki-war/src/main/styles/haddock/default/variables.less
index 412da0a..0da424a 100644
--- a/jspwiki-war/src/main/styles/haddock/default/variables.less
+++ b/jspwiki-war/src/main/styles/haddock/default/variables.less
@@ -161,7 +161,7 @@ images/feather-small.png   wxh  162x286
 @carousel-progress-size:  2px;
 
 // Category
-@wiki-category-link-color: @state-info-bg; //#545454;
+@wiki-category-link-color: @gray; //#545454;
 
 //Editor
 @wiki-editor-bg : @white;
@@ -173,4 +173,7 @@ images/feather-small.png   wxh  162x286
 //Tip
 //overwrite bootstrap default style
 @tooltip-bg: rgba(0,0,0,.7);
-@tooltip-arrow-color: rgba(0,0,0,.7);
\ No newline at end of file
+@tooltip-arrow-color: rgba(0,0,0,.7);
+
+//Magnifier glass
+@magnifier-size: 300px;

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/EditTemplate.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/EditTemplate.jsp b/jspwiki-war/src/main/webapp/templates/haddock/EditTemplate.jsp
index 1a1f1ad..1e839da 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/EditTemplate.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/EditTemplate.jsp
@@ -48,7 +48,6 @@
 <div class="container${prefs.Layout=='fluid' ? '-fluid' : ''} ${prefs.Orientation}">
 
   <wiki:Include page="Header.jsp" />
-  <wiki:Include page="Nav.jsp" />
   <div class="content" data-toggle="li#menu,.sidebar>.close" >
     <div class="page">
       <wiki:Content/>

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/Footer.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/Footer.jsp b/jspwiki-war/src/main/webapp/templates/haddock/Footer.jsp
index bf02f05..2179fca 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/Footer.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/Footer.jsp
@@ -25,7 +25,7 @@
 <fmt:setBundle basename="templates.default"/>
 <div class="footer">
 
-  <div class="copyright"><wiki:InsertPage page="CopyrightNotice"/></div>
+  <wiki:InsertPage page="CopyrightNotice"/>
 
   <div class="wiki-version"><%=Release.APPNAME%> v<%=Release.getVersionString()%>
     <wiki:RSSImageLink title="Aggregate the RSS feed" />

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/Header.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/Header.jsp b/jspwiki-war/src/main/webapp/templates/haddock/Header.jsp
index 5a2b164..2abc58e 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/Header.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/Header.jsp
@@ -58,7 +58,7 @@
         <c:choose>
         <c:when test="${not empty fn:substringBefore(param.page,'_blogentry_')}">${fn:replace(fn:replace(param.page,'_blogentry_',' ['),'_','#')}]</c:when>
         <c:when test="${not empty fn:substringBefore(param.page,'_comments_')}">${fn:replace(fn:replace(param.page,'_comments_',' ['),'_','#')}]</c:when>
-        <c:otherwise><wiki:PageName/></c:otherwise>
+        <c:otherwise><a href="#top"><wiki:PageName /></a></c:otherwise>
         </c:choose>
       </wiki:Link>
     </div>
@@ -68,4 +68,6 @@
     <fmt:message key="header.yourtrail"/><wiki:Breadcrumbs separator="<span class='divider'></span>" />
   </div>
 
+  <wiki:Include page="Nav.jsp" />
+
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp b/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
index 8d9de58..8492081 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
@@ -32,15 +32,11 @@
 <c:set var="attachments" value="<%= c.getEngine().getAttachmentManager().listAttachments( c.getPage() ).size() %>" />
 
 <%-- navigation bar --%>
-<div class="row sticky">
+<div class="navigation">
 
 <ul class="nav nav-pills pull-left">
   <%-- toggle sidebar --%>
   <li id="menu"><a href="#"><!--&#x2261;-->&#9776;</a></li>
-  <li class="pagename">
-    <wiki:CheckRequestContext context='view'><a href="#top"><wiki:PageName /></a></wiki:CheckRequestContext>
-    <wiki:CheckRequestContext context='!view'><wiki:Link><wiki:PageName/></wiki:Link></wiki:CheckRequestContext>
-  </li>
 </ul>
 
 <ul class="nav nav-pills pull-right">

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/Sidebar.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/Sidebar.jsp b/jspwiki-war/src/main/webapp/templates/haddock/Sidebar.jsp
index a5f5a9f..369105c 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/Sidebar.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/Sidebar.jsp
@@ -59,6 +59,8 @@
 
   </wiki:Permission>
 
-  <div class="wikiversion"><%=Release.APPNAME%> v<wiki:Variable var="jspwikiversion" /> <wiki:RSSImageLink title='<%=LocaleSupport.getLocalizedMessage(pageContext,"fav.aggregatewiki.title")%>' /></div>
+  <%--
+  <div class="wikiversion text-center"><%=Release.APPNAME%> v<wiki:Variable var="jspwikiversion" /> <wiki:RSSImageLink title='<%=LocaleSupport.getLocalizedMessage(pageContext,"fav.aggregatewiki.title")%>' /></div>
+  --%>
 
 </div>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp b/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
index 1c8a87b..0f4d34d 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
@@ -38,7 +38,6 @@
 <div class="container${prefs.Layout=='fluid' ? '-fluid' : ''}  ${prefs.Orientation}">
 
   <wiki:Include page="Header.jsp" />
-  <wiki:Include page="Nav.jsp" />
 
   <c:set var="sidebar"><wiki:Variable var='sidebar' default="${prefs.Sidebar}" /></c:set>
   <c:set var="sidebar" value="${ (sidebar!='off') and (prefs.Orientation!='fav-hidden') ? 'on' : 'off' }" />

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp b/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
index b3deff6..519f438 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
@@ -46,10 +46,9 @@
 
 <body class="context-<wiki:Variable var='requestcontext' default='' />">
 
-<div class="container${prefs.Layout=='fixed' ? '' : '-fluid' } ${prefs.Orientation}">
+<div class="container${prefs.Layout=='fixed' ? '' : '-fluid' } ${prefs.Orientation} fixed-header">
 
   <wiki:Include page="Header.jsp" />
-  <wiki:Include page="Nav.jsp" />
 
   <c:set var="sidebar"><wiki:Variable var="sidebar" default="${prefs.Sidebar}" /></c:set>
   <wiki:CheckRequestContext context='login|prefs|createGroup|viewGroup|conflict'>

http://git-wip-us.apache.org/repos/asf/jspwiki/blob/be183fc4/jspwiki-war/src/main/webapp/templates/haddock/images/feather-small.png
----------------------------------------------------------------------
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/images/feather-small.png b/jspwiki-war/src/main/webapp/templates/haddock/images/feather-small.png
old mode 100644
new mode 100755
index 9a4d7c3..fb42177
Binary files a/jspwiki-war/src/main/webapp/templates/haddock/images/feather-small.png and b/jspwiki-war/src/main/webapp/templates/haddock/images/feather-small.png differ