jspwiki-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From brus...@apache.org
Subject [jspwiki] branch master updated: 2.10.4-git-09 Better support for mobile devices in HADDOCK
Date Sat, 28 Apr 2018 14:48:46 GMT
This is an automated email from the ASF dual-hosted git repository.

brushed pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/jspwiki.git


The following commit(s) were added to refs/heads/master by this push:
     new cba943d  2.10.4-git-09  Better support for mobile devices in HADDOCK
cba943d is described below

commit cba943d3a8d9f8df358a322a7207f4b63e2190fe
Author: brushed <dirk.frederickx@gmail.com>
AuthorDate: Sat Apr 28 16:48:32 2018 +0200

    2.10.4-git-09  Better support for mobile devices in HADDOCK
    
    2.10.4-git-09   / see JSPWIKI-835
     - Update various styles to better fit small screens.
    - Update SIDEBAR open/close behaviour for small screens.
---
 ChangeLog                                          |   9 ++
 .../src/main/java/org/apache/wiki/Release.java     |   2 +-
 jspwiki-war/src/main/scripts/wiki/Wiki.js          |  37 ++++-
 .../main/styles/haddock/default/Collapsible.less   |   1 -
 .../main/styles/haddock/default/CommentBox.less    |   1 +
 .../src/main/styles/haddock/default/TOCPlugin.less |  11 +-
 .../main/styles/haddock/default/TableX.Filter.less |   2 +
 .../haddock/default/responsive-viewport.less       | 169 +++++++++++++--------
 .../src/main/styles/haddock/default/type.less      |   1 -
 .../src/main/styles/haddock/default/variables.less |  13 +-
 .../main/webapp/templates/haddock/ViewTemplate.jsp |  10 +-
 11 files changed, 174 insertions(+), 82 deletions(-)

diff --git a/ChangeLog b/ChangeLog
index f3a17b6..a0b9a5e 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,12 @@
+2018-04-28  Dirk Frederickx (brushed AT apache DOT org)
+
+       * 2.10.4-git-09  Better support for mobile devices in the Haddock Template
+            See JSPWIKI-835
+            - Updates various styles to better fit small screens.  (tabs, accordion, columns,
...)
+            - On small screens,  the sidebar is by default closed.
+              On wider screens, the sidebar is open/closed based on the previous state
+              which is saved in a cookie.
+
 2018-04-22  Dirk Frederickx (brushed AT apache DOT org)
 
        * 2.10.4-git-08  Adding support for mobile devices to the Haddock Template
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 79d723d..34523dc 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         = "8";
+    public static final String     BUILD         = "9";
 
     /**
      *  This is the generic version string you should use when printing out the version.
 It is of
diff --git a/jspwiki-war/src/main/scripts/wiki/Wiki.js b/jspwiki-war/src/main/scripts/wiki/Wiki.js
index 1942747..7a0edeb 100644
--- a/jspwiki-war/src/main/scripts/wiki/Wiki.js
+++ b/jspwiki-war/src/main/scripts/wiki/Wiki.js
@@ -60,7 +60,7 @@ Class: Wiki
 */
 var Wiki = {
 
-    version: "haddock03",  //used to validate compatible preference cookies
+    version: "haddock04",  //used to validate compatible preference cookies
 
     initialize: function(){
 
@@ -83,8 +83,7 @@ var Wiki = {
 
                 element.onToggle( element.get("data-toggle"), function(isActive){
                     var pref = element.get("data-toggle-pref");
-                    if( pref ){
-                        //console.log(pref, isActive);
+                    if (pref) {
                         wiki.prefs.set(pref, isActive ? "active" : "");
                     }
                 });
@@ -178,8 +177,6 @@ var Wiki = {
             domready: wiki.domready.bind(wiki)
         });
 
-
-
     },
 
 
@@ -194,6 +191,7 @@ var Wiki = {
 
     },
 
+
     /*
     Function: domready
         After the DOM is fully loaded:
@@ -222,6 +220,15 @@ var Wiki = {
             wiki.prefs.set("version", wiki.version);
         }
 
+        //The initial Sidebar will be active depending on a cookie state.
+        //However, for small screen,  the default state will be hidden.
+        wiki.media("(min-width:768px)", function( screenIsLarge ){
+
+            if(!screenIsLarge){
+                $$(".content")[0].removeClass("active"); //always hide sidebar on pageload
for narrow screens
+            }
+
+        });
 
         //wiki.url = null;  //CHECK:  why this is needed?
         //console.log( wiki.prefs.get("SectionEditing") , wiki.EditPermission ,wiki.Context
);
@@ -244,6 +251,24 @@ var Wiki = {
 
     },
 
+
+    /*
+    Function: media query event handler
+        Catch media-query changes  (eg screen width,  portrait/landscape changes,  etc...
+    */
+    media: function(query, callback){
+
+        function queryChanged( event ){ callback( event.matches ); }
+
+        if( /*window.*/ matchMedia ){
+
+            var mediaQueryList = matchMedia( query );
+            mediaQueryList.addListener( queryChanged );
+            queryChanged( mediaQueryList );
+        }
+
+    },
+
     /*
     Function: yoyo ( header )
         Add a yoyo effect to the header:  hide it on scroll down, show it again on scroll
up.
@@ -272,7 +297,7 @@ var Wiki = {
 
             scrollY = window.getScroll().y;
 
-            spacer.style.paddingTop = header[height]+"px"; //could change during window resize
+            spacer.style.paddingTop = header[height]+"px"; //update after window resize
 
             // Limit scroll top to counteract iOS / OSX bounce.
             scrollY = scrollY.limit(0, window.getScrollSize().y - window.getSize().y);
diff --git a/jspwiki-war/src/main/styles/haddock/default/Collapsible.less b/jspwiki-war/src/main/styles/haddock/default/Collapsible.less
index 4ebf1e3..0c7a1dd 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Collapsible.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Collapsible.less
@@ -38,7 +38,6 @@ DOM structure:
     display:inline-block;
     outline:0;
     float:left;
-    width:2em;
     line-height:1.4; //heuristic, for vertical
 
     // triangular bullets
diff --git a/jspwiki-war/src/main/styles/haddock/default/CommentBox.less b/jspwiki-war/src/main/styles/haddock/default/CommentBox.less
index 094199a..faa92a8 100644
--- a/jspwiki-war/src/main/styles/haddock/default/CommentBox.less
+++ b/jspwiki-war/src/main/styles/haddock/default/CommentBox.less
@@ -39,6 +39,7 @@ DOM structure:
     float:right;
     //clear:right; //float subsequent boxes next to each-other
     width: @wiki-commentbox-width;
+	min-width: @wiki-small-viewport-dialog-width;
     margin:0 0 .5em .5em;
     .small;
 
diff --git a/jspwiki-war/src/main/styles/haddock/default/TOCPlugin.less b/jspwiki-war/src/main/styles/haddock/default/TOCPlugin.less
index 02c4616..1673def 100644
--- a/jspwiki-war/src/main/styles/haddock/default/TOCPlugin.less
+++ b/jspwiki-war/src/main/styles/haddock/default/TOCPlugin.less
@@ -46,7 +46,8 @@ DOM structure:
     (end)
 */
 .toc {
-    width: (100% - @wiki-commentbox-width);
+    width: @wiki-commentbox-width-inverse;
+    min-width: @wiki-small-viewport-dialog-width;
 
     //when collapsed the header bottom border doubles with the bottom panel border
     .panel-heading { border-bottom:none; }   //ugh -- for now just hide the border
@@ -58,14 +59,14 @@ DOM structure:
     }
     .toclevel-1 { padding-left:1.2em }
     .toclevel-2 { padding-left:2.4em; }
-    .toclevel-3 { padding-left:4.6em; }
+    .toclevel-3 { padding-left:3.6em; }
 }
 //in case a TOC is added to the sidebar;  it will show the TOC of the main page
 .sidebar .toc {
     width:100%;
-    .toclevel-1 { padding-left:.25em; }
-    .toclevel-2 { padding-left:.5em; }
-    .toclevel-3 { padding-left:.75em; }
+	.toclevel-1 { padding-left:.5em; }
+    .toclevel-2 { padding-left:1em; }
+    .toclevel-3 { padding-left:1.5em; }
 }
 
 //Multiple occurrences of the TOC plugin are rendered as links (a.toc)
diff --git a/jspwiki-war/src/main/styles/haddock/default/TableX.Filter.less b/jspwiki-war/src/main/styles/haddock/default/TableX.Filter.less
index 1e306ed..9d9f0bb 100644
--- a/jspwiki-war/src/main/styles/haddock/default/TableX.Filter.less
+++ b/jspwiki-war/src/main/styles/haddock/default/TableX.Filter.less
@@ -39,7 +39,9 @@ DOM structure:
 .filter-input {
 
     .form-control {
+    	display:inline-block;
         width: 40%;
+        min-width: @wiki-small-viewport-dialog-width;
         padding-right: 1.5em;
         //&:focus ~ .icon-filter { .hide; }
     }
diff --git a/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less b/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less
index ec575b7..059244c 100644
--- a/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less
+++ b/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less
@@ -22,36 +22,63 @@
 Section: Responsive styles for small viewports or screens
 	@screen-xs-min : 600px
 	Typical layout changes needed for phones, small tablets.
-	
+
 
 	TODO::
-		!Sidebar should automatically close after navigating ... !! 
+		!Sidebar should automatically close after navigating ... !!
 	        default sidebar view for userpref & login : should be HIDE !
-		
+
 	    FFS: responsive tables :  should scroll left-right on small screens
 
-		style.less : 
-			make some styles smaller (commentbox float?)
-			make tab padding smaller
-			columns should be shown vertically
-			wider content should scroll horizontally
-			...
-		
+*/
 
+/*
+very small screen-sizes,  phones in portrait mode
 */
+@media only screen and (max-width: @wiki-xsmall-viewport) {
+
+	// Columns.less
+	.columns {
+		display:block;
+		.col {
+			min-width:100%;
+			float:none;
+			padding:0;
+		}
+		&.border {
+			> .col { padding: @padding-base-vertical  @padding-base-horizontal; }
+			> .col:not(:last-child) { border-right:none; border-bottom: 1px solid @btn-default-border;
}
+		}
+
+	}
+
 
+	// CommentBox.less
+	.commentbox { width:100%; }
 
-@wiki-small-viewport: 768px;
-@wiki-small-viewport-menu-width: 280px;
+}
 
+/*
+Medium size screens,  tablets,  phones in landscape mode
+*/
 @media only screen and (max-width: @wiki-small-viewport) {
 
-	//generic
-	.input-xs { 
-		.input-sm; 
-		padding: @padding-xs-vertical @padding-xs-horizontal; 
+	//reusable class below
+	.input-xs {
+		.input-sm;
+		padding: @padding-xs-vertical @padding-xs-horizontal;
 		height:auto;
 	}
+	//make all buttons small
+	.btn { .btn-xs; }
+
+	// bootstrap  nav.less
+	.nav > li > a { padding: @nav-sm-link-padding; }
+
+	// bootstrap  panel.less
+	.panel-heading,
+	.panel-body { padding: @nav-sm-link-padding; }
+
 
 	// type.less
 	// grid.less
@@ -69,26 +96,26 @@ Section: Responsive styles for small viewports or screens
     	a,  .cursor {
         	padding:0.2em;
 	        border:1px solid transparent;
-	        
-	        > span[class] { 
+
+	        > span[class] {
 	        		position:relative;
-	        		display:inline-block; 
-	        		width:1ex; 
+	        		display:inline-block;
+	        		width:1ex;
 	        		top:0.4em;
 	        		white-space:nowrap;
 	        		font-family:@font-family-monospace;
 	        		overflow:hidden;
 	        		text-align:center;
 	        		visibility:hidden;
-	        		&:before { 
-	        			visibility:visible; 
+	        		&:before {
+	        			visibility:visible;
 	        		}
-	        } 
-	        .first:before { content:"\ab"; }
-	        .prev:before { content:"\3c"; }
-	        .next:before { content:"\3e"; }
-	        .last:before { content:"\bb"; }
-	        .all:before  { content:"\2200"; }
+	        }
+	        .first:before { content:"\ab"; } //<<
+	        .prev:before { content:"\3c"; } //<
+	        .next:before { content:"\3e"; } //>
+	        .last:before { content:"\bb"; } //>>
+	        .all:before  { content:"\2200"; } //all
 
     	}
 	}
@@ -97,18 +124,21 @@ Section: Responsive styles for small viewports or screens
 	// Magnify.less
 
 	// Viewer.less
+	.viewport {
+		max-width: @wiki-small-viewport-width;
+		overflow:hidden;
+	}
 	// Viewer.Slimbox.less
 	// Viewer.Carousel.less
 
 	// Template.View.less
-	
+
 	.header, .footer {
-	    .btn { padding: 0 4px; }
 	    .btn [class^="icon-"]:before { font-size: 1em;  }
 	}
-	
+
 	.header > *:not(.titlebox), .footer > *:not(.titlebox) { padding:0;  }
-	
+
 	.reader .pagename { font-size:1.5em; line-height:1.5;}
 	.pagename {
 		font-size: 1.5em;
@@ -121,54 +151,58 @@ Section: Responsive styles for small viewports or screens
 		width:2.5em;
 		height:1.5em;
 		border:none;
-		b:before {content:""}; 
+		b:before {content:""};
 	}
-	
+
 	.breadcrumb { display:none; }
-	
+
 	// Template.UserBox.less
-	
-	.userbox ul.dropdown-menu { 
-			max-width:@wiki-small-viewport-menu-width;
+
+	.userbox ul.dropdown-menu {
+			max-width:@wiki-small-viewport-dialog-width;
 			li:first-child a { white-space:normal; }
 	}
-	
+
 	// Template.SearchBox.less
-	.searchbox ul.dropdown-menu { max-width: @wiki-small-viewport-menu-width; }
+	.searchbox ul.dropdown-menu { max-width: @wiki-small-viewport-dialog-width; }
 
 	// Template.Nav.less
 	// Only show the menu icons
-	.header > .navigation .nav > li > a { 
-		padding: 5px 10px; 
+	.header > .navigation .nav > li > a {
+		padding: 5px 10px;
 		> *:first-child { display:initial; }
 		> *:nth-child(even) { display:none; }
 	}
 
 	// Template.Content.less
 	/* hide sidebar on extra small devices, and give it a fixed width
-	   by default  sidebar is now visible !  and will overlay the main page
-			.active : should now hide the sidebar
-			not(.active) : should overlay the sidebar over the main page content
+	   the sidebar will overlay the main page which remains fit to 100% of the screen-size
 	*/
+	.content {
+		.sidebar, &:after { width: @wiki-small-viewport-dialog-width; }
+	}
 
+	//hide sidebar
 	.content {
-		.sidebar, &:after { width: @wiki-small-viewport-menu-width; margin-left:0 }	
+		.sidebar, &:after { margin-left:-100%; }
 	}
 	.sidebar { position:absolute; }
+
+	//show sidebar
 	.content.active {
     	.page { width:100%; }  //keep full width
-    	.sidebar, &:after { margin-left: -100%; }
-	}	
+    	.sidebar, &:after { margin-left:0; }
+	}
 	.fav-right {
-    	.content {
-	    	.sidebar, &:after { margin-right:0; }
+		.content {
+	    	.sidebar, &:after { margin-right:-100%; }
     	}
-    	.sidebar { right:0; }  //positon = absolution 
-	    .content.active {
-    	    .sidebar, &:after { margin-right:-100%; }
+    	.sidebar { right:0; }  //positon = absolution
+		.content.active {
+    	    .sidebar, &:after { margin-right:0; }
 	    }
 	}
-	
+
 	.page-content input { .input-xs; }
 	.page-content .btn { .btn-xs; }
 
@@ -182,30 +216,30 @@ Section: Responsive styles for small viewports or screens
 	.snipe {
 
 		.btn { .btn-xs; }
-				
-		ul.dropdown-menu { 
-			max-width:@wiki-small-viewport-menu-width;
+
+		ul.dropdown-menu {
+			max-width:@wiki-small-viewport-dialog-width;
 		}
-		
+
 		//hack :: unclear why this is not already inline ?
 		> .form-group  > .form-group { display:inline-block; margin-bottom:0; }
-		
+
 		//remove less used button to make toolbar fit on narrow screens
-		.editor-tools [data-cmd=undo],		
+		.editor-tools [data-cmd=undo],
 		.editor-tools [data-cmd=redo] { display:none; }
 	}
-	input#changenote { max-width: @wiki-small-viewport-menu-width; }
+	input#changenote { max-width: @wiki-small-viewport-dialog-width; }
 
 
 	.modal,
 	.slmbx,
 	.dialog.find {
-		max-width:@wiki-small-viewport-menu-width;
+		max-width:@wiki-small-viewport-dialog-width;
 		.btn { .btn-xs; }
 		input.form-control { .input-xs; }
-	} 
+	}
+
 
-	
 	// Dialog.less
 	// Template.Preview.less
 
@@ -221,6 +255,13 @@ Section: Responsive styles for small viewports or screens
     // Accordion.less
     // Columns.less
     // Collapsible.less
+    .bullet {
+    	margin: @nav-sm-link-padding;
+	    &.xpand {
+    		margin: @nav-sm-link-padding-swap;
+	    }
+    }
+
     // Category.less
 
     // Flip.less
diff --git a/jspwiki-war/src/main/styles/haddock/default/type.less b/jspwiki-war/src/main/styles/haddock/default/type.less
index d2ade55..40e88e5 100644
--- a/jspwiki-war/src/main/styles/haddock/default/type.less
+++ b/jspwiki-war/src/main/styles/haddock/default/type.less
@@ -445,7 +445,6 @@ button + a.infolink {
     > img { display:none; }
 }
 
-
 /*
 Interwiki links
 */
diff --git a/jspwiki-war/src/main/styles/haddock/default/variables.less b/jspwiki-war/src/main/styles/haddock/default/variables.less
index d2b0596..1c4772e 100644
--- a/jspwiki-war/src/main/styles/haddock/default/variables.less
+++ b/jspwiki-war/src/main/styles/haddock/default/variables.less
@@ -99,7 +99,7 @@ images/feather-small.png   wxh  162x286
 //wider layout :  1 | (1*phi)   => commentbox
 @wiki-commentbox-ratio: percentage( 1 / (1 + @golden-square) ); //27.6373%
 @wiki-commentbox-width: @wiki-commentbox-ratio * 100% / (100% - @wiki-sidebar-width);
-
+@wiki-commentbox-width-inverse: (100% - @wiki-commentbox-width);
 
 //Nav bar
 @wiki-logo-font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica
Neue', Arial, Helvetica, sans-serif;
@@ -178,3 +178,14 @@ images/feather-small.png   wxh  162x286
 
 //Magnifier glass
 @magnifier-size: 300px;
+
+
+//responsive-viewport.less
+@wiki-small-viewport: 768px;
+@wiki-xsmall-viewport: 480px;
+@wiki-small-viewport-dialog-width: 280px;
+@wiki-small-viewport-width: 450px; //used by slimbox,  viewer, ...
+@nav-sm-link-padding: 2px 6px;
+@nav-sm-link-padding-swap: 6px 2px;
+
+
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp b/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
index 519f438..1a1864e 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/ViewTemplate.jsp
@@ -50,11 +50,15 @@
 
   <wiki:Include page="Header.jsp" />
 
-  <c:set var="sidebar"><wiki:Variable var="sidebar" default="${prefs.Sidebar}" /></c:set>
+  <c:set var="sidebarState"><wiki:Variable var="sidebar" default="${prefs.Sidebar}"
/></c:set>
+  <c:set var="sidebarCookie" value="Sidebar" />
   <wiki:CheckRequestContext context='login|prefs|createGroup|viewGroup|conflict'>
-    <c:set var="sidebar" value="" />
+    <c:set var="sidebarState" value="" />
+    <c:set var="sidebarCookie" value="" />
   </wiki:CheckRequestContext>
-  <div class="content ${sidebar}" data-toggle="li#menu,.sidebar>.close" data-toggle-pref="Sidebar"
>
+
+  <div class="content ${sidebarState}" data-toggle="li#menu,.sidebar>.close"
+                                       data-toggle-pref="${sidebarCookie}" >
     <div class="page">
       <wiki:Content/>
       <wiki:Include page="PageInfo.jsp"/>

-- 
To stop receiving notification emails like this one, please contact
brushed@apache.org.

Mime
View raw message