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 2018/04/28 14:48:46 UTC
[jspwiki] branch master updated: 2.10.4-git-09 Better support for
mobile devices in HADDOCK
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 <di...@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.