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/22 19:37:05 UTC
[jspwiki] branch master updated: 2.10.4-git-08: JSPWIKI-835,
JSPWIKI-1068
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 1336c71 2.10.4-git-08: JSPWIKI-835, JSPWIKI-1068
1336c71 is described below
commit 1336c7179b5268bd36f0ba9832ab6f1b5d5c4239
Author: brushed <di...@gmail.com>
AuthorDate: Sun Apr 22 21:36:13 2018 +0200
2.10.4-git-08: JSPWIKI-835, JSPWIKI-1068
JSPWIKI-835 Part-1 -- many style adjustment to fit smaller screens
- Sidebar now slides over the main page on mobile devices
- Header (pagename, and menu bar) are better fit for small screens
- Width of several menu's and dropdowns is restricted for small screens
- Editor toolbar resized for small screens
Other:
- Editor toolbar now remains on screen, even when scrolling down
- Small tweaks of the RecentChanges output
- JSPWIKI-1068 : fixing positioning of the TitleBox
---
ChangeLog | 16 ++
.../src/main/java/org/apache/wiki/Release.java | 2 +-
.../src/main/scripts/moo-extend/String.Extend.js | 2 +-
.../src/main/scripts/wiki/Wiki.Behaviors.js | 14 +-
jspwiki-war/src/main/scripts/wiki/Wiki.js | 60 +++---
.../main/styles/haddock/default/Collapsible.less | 11 -
.../haddock/default/RecentChangesPlugin.less | 31 ++-
.../styles/haddock/default/Template.Content.less | 102 +++------
.../main/styles/haddock/default/Template.Diff.less | 3 -
.../main/styles/haddock/default/Template.Edit.less | 34 +--
.../main/styles/haddock/default/Template.Nav.less | 27 ++-
.../styles/haddock/default/Template.Search.less | 2 +-
.../styles/haddock/default/Template.Sidebar.less | 69 ------
.../main/styles/haddock/default/Template.View.less | 16 +-
.../src/main/styles/haddock/default/build.less | 2 +-
.../src/main/styles/haddock/default/prettify.less | 2 +-
.../src/main/styles/haddock/default/print.less | 8 +
.../haddock/default/responsive-viewport.less | 233 +++++++++++++++++++++
.../src/main/styles/haddock/default/tables.less | 7 +
.../src/main/styles/haddock/fontjspwiki/icons.less | 12 ++
.../src/main/webapp/templates/haddock/Nav.jsp | 48 ++++-
.../webapp/templates/haddock/UploadTemplate.jsp | 9 +-
.../webapp/templates/haddock/editors/plain.jsp | 6 +-
23 files changed, 470 insertions(+), 246 deletions(-)
diff --git a/ChangeLog b/ChangeLog
index 4ece39f..f3a17b6 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,19 @@
+2018-04-22 Dirk Frederickx (brushed AT apache DOT org)
+
+ * 2.10.4-git-08 Adding support for mobile devices to the Haddock Template
+ See JSPWIKI-835
+ Part-1 -- many style adjustment to fit smaller screens
+ - Sidebar now slides over the main page on mobile devices
+ - Header (pagename, and menu bar) are better fit for small screens
+ - Width of several menu's and dropdowns is restricted for small screens
+ - Editor toolbar resized for small screens
+
+ Other:
+ - Editor toolbar now remains on screen, even when scrolling down
+ - Small tweaks of the RecentChanges output
+ - JSPWIKI-1068 : fixing positioning of the TitleBox
+
+
2018-04-19 Dirk Frederickx (brushed AT apache DOT org)
* 2.10.4-git-07 Adding a favicon 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 35bca38..79d723d 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 = "7";
+ public static final String BUILD = "8";
/**
* 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/moo-extend/String.Extend.js b/jspwiki-war/src/main/scripts/moo-extend/String.Extend.js
index 12f34db..aefd1ea 100644
--- a/jspwiki-war/src/main/scripts/moo-extend/String.Extend.js
+++ b/jspwiki-war/src/main/scripts/moo-extend/String.Extend.js
@@ -217,7 +217,7 @@ String.implement({
*/
sliceArgs: function(element, regexp){
- var args = element.grab /*isElement*/ ? element.className : element;
+ var args = element.className || String(element);
if( !regexp) regexp = "(?:^|\\s)("+this+"(?:-\\w+)*)(?:\\s|$)"; //default '-' separated arguments
diff --git a/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js b/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
index dcc8a48..c6b42ca 100644
--- a/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
+++ b/jspwiki-war/src/main/scripts/wiki/Wiki.Behaviors.js
@@ -70,15 +70,16 @@ var TheSlimbox, T = TableX;
Behavior: Broken images
Replace broken image browser icons
*/
-wiki.once( "img", function(imgs){
+wiki.once( "img:not(outlink)", function(imgs){
imgs.addEvent("error", function(){
var img = $(this);
[ "span.danger.img-error", {
- text: "broken.image".localize() //Broken Image!
- }, [
- "span", { text: img.alt || img.src }
+ text: "broken.image".localize()
+ },
+ [
+ "span", { text: img.alt || img.src }
]
].slick().replaces(img);
@@ -86,7 +87,6 @@ wiki.once( "img", function(imgs){
});
-
/*
Behavior: GraphBars, Progress-bars
@@ -529,7 +529,7 @@ Behavior: Table behaviors
%%zebra-pink ... /% => odd rows get backgroundcolor red
%%zebra-eee-red ... /% => odd rows: #eee, even rows: red
- %%table-striped-bordered-hover-condensed-fit-filter-sort
+ %%table-striped-bordered-hover-condensed-fit-filter-sort-noborder
%%sortable .. /%
%%table-filter .. /%
@@ -565,7 +565,7 @@ Behavior: Table behaviors
arg = args.shift();
- if( arg.test("striped|bordered|hover|condensed|fit")){
+ if( arg.test("striped|bordered|hover|condensed|fit|noborder")){
tables.addClass("table-"+arg);
diff --git a/jspwiki-war/src/main/scripts/wiki/Wiki.js b/jspwiki-war/src/main/scripts/wiki/Wiki.js
index 1352b54..1942747 100644
--- a/jspwiki-war/src/main/scripts/wiki/Wiki.js
+++ b/jspwiki-war/src/main/scripts/wiki/Wiki.js
@@ -110,7 +110,12 @@ var Wiki = {
})
//add header scroll-up/down effect
- .add( ".fixed-header > .header", wiki.yoyo)
+ .add(".fixed-header > .header", wiki.yoyo)
+
+ //sticky toolbar in the editor
+ .add(".sticky", function (element) {
+ element.onSticky();
+ })
//highlight previous search query retreived from a cookie or referrer page
.add( ".page-content", function(element){
@@ -248,43 +253,48 @@ var Wiki = {
DOM Structure:
(start code)
div[style='padding-top:nn'] => nn==height of header; push content down
- div.header.yoyo[.scroll-down] => css: position=fixed
+ div.header.yoyo[.scrolling-down] => css: position=fixed
(end)
*/
yoyo: function( header ){
- var height = header.offsetHeight,
- semaphore,
+ var height = "offsetHeight",
scrollY,
- lastScrollY = 0;
+ 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");
+ //add spacer just infront of fixed element,
+ //and adjust height == header (fixed elements do not take space in the dom)
+ spacer = "div".slick().inject(header, "before"),
+ busy;
- window.addEvent("scroll", function(){ semaphore = true; });
+ function update(){
- setInterval( function(){
+ scrollY = window.getScroll().y;
- if( semaphore ){
+ spacer.style.paddingTop = header[height]+"px"; //could change during window resize
- semaphore = false;
- scrollY = window.getScroll().y;
+ // Limit scroll top to counteract iOS / OSX bounce.
+ scrollY = scrollY.limit(0, window.getScrollSize().y - window.getSize().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 */) {
- if( Math.abs(lastScrollY - scrollY) > 5 /* minimum difference */ ){
-
- header.ifClass( scrollY > lastScrollY && scrollY > height, "scrolling-down" );
- //console.log(scrollY, lastScrollY, height);
+ header.ifClass(scrollY > lastScrollY && scrollY > header[height], "scrolling-down");
+ lastScrollY = scrollY;
+ }
+ busy = false;
+ }
- lastScrollY = scrollY;
- }
+ function handleEvent(){
+ if(!busy){
+ busy = true;
+ requestAnimationFrame( update );
}
+ }
- }, 250);
+ window.addEvents({ scroll: handleEvent, resize: handleEvent });
+ update(); //first run: set height of the spacer
},
@@ -381,9 +391,9 @@ var Wiki = {
// BasePath: if JSPWiki is installed in the root, then we have to make sure that
// the cookie-cutter works properly here.
url = wiki.BaseUrl;
- url = url ? url.slice( url.indexOf(host) + host.length, -1 ) : "";
- wiki.BasePath = ( url /*===""*/ ) ? url : "/";
- console.log(url, host, wiki.BaseUrl + " basepath: " + wiki.BasePath);
+ url = url ? url.slice(url.indexOf(host) + host.length, -1) : "";
+ wiki.BasePath = (url /*===""*/) ? url : "/";
+ //console.log(url, host, wiki.BaseUrl + " basepath: " + wiki.BasePath);
},
@@ -767,7 +777,7 @@ var Wiki = {
onSuccess: function( responseText ){
//console.log(responseText, JSON.parse( responseText ), responseText.charCodeAt(8),responseText.codePointAt(8), (encodeURIComponent(responseText)), encodeURIComponent("ä"), encodeURIComponent("Ã") );
- callback( JSON.parse( responseText ) );
+ callback(responseText == "" ? "" : JSON.parse(responseText));
//callback( responseText );
},
diff --git a/jspwiki-war/src/main/styles/haddock/default/Collapsible.less b/jspwiki-war/src/main/styles/haddock/default/Collapsible.less
index 246ef16..4ebf1e3 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Collapsible.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Collapsible.less
@@ -68,17 +68,6 @@ DOM structure:
.xpand, .clpse { overflow:hidden; }
-// CHECKME: Make sure to print collapsed items as if they were not collapsed
-//move to print.less
-@media print {
- div.clpse {
- display:block;
- height:auto !important;
- //width:auto !important;
- }
-}
-
-
/*
TODO: Experimental - css3 animation iso mootools tween.
div.xpand { .transition(all .5s ease); height:auto; }
diff --git a/jspwiki-war/src/main/styles/haddock/default/RecentChangesPlugin.less b/jspwiki-war/src/main/styles/haddock/default/RecentChangesPlugin.less
index 2faabe3..f28d198 100644
--- a/jspwiki-war/src/main/styles/haddock/default/RecentChangesPlugin.less
+++ b/jspwiki-war/src/main/styles/haddock/default/RecentChangesPlugin.less
@@ -26,15 +26,34 @@ DOM structure:
*/
.recentchanges {
+ .wikitable;
+ > thead > tr > th,
+ > tbody > tr > th,
+ > tfoot > tr > th,
+ > thead > tr > td,
+ > tbody > tr > td,
+ > tfoot > tr > td {
+ border-top: 0;
+ }
+
table-layout:fixed; // this renders faster
+ .date {
+ border-bottom:3px double @wiki-sidebar-bg;
+ padding-bottom:0;
+
+ b {
+ font-weight:normal;
+ font-family:@font-family-sans-serif;
+ letter-spacing:1px;
+ }
+ }
+
+
td {
- &:first-child:not(.date) {
- padding-left:2em;
- }
- &.date {
- border-bottom:2px solid @wiki-recentchanges-date-bg;
- padding-top:1em;
+ &:first-child {
+ width:auto;
+ padding-left:1em;
}
}
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 5e35df4..55a37a2 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Content.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Content.less
@@ -45,76 +45,42 @@ DOM Structure:
overflow:hidden; //checkme
clear:both;
.hyphens(auto);
- .transition(all .3s);
+
+ background: @wiki-page-bg; //page background color
+ position: relative; //prepare for the :after element to give the sidebar another color
+
+ &:after {
+ content: " ";
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ background: @wiki-sidebar-bg;
+ }
+ //by default, sidebar, and sidebar background color are hidden (margin-left=-100%;)
+ .sidebar, &:after {
+ width: @wiki-sidebar-width;
+ margin-left: -100%;
+ .transition (all .3s);
+ }
}
.page {
float:right;
width:100%;
+ .transition(all .3s);
}
.sidebar {
position: relative;
- // Prevent columns from collapsing when empty
- min-height: 1px;
- // Inner gutter via padding
- padding-left: (@grid-gutter-width / 2);
- padding-right: (@grid-gutter-width / 2);
float: left;
-
- @media (min-width: @screen-xs-min) { // push to bottom on extra small devices
- background: @wiki-sidebar-bg;
- bottom: 0;
- margin-left:0;
- margin-top: 10px; // give some space if page fits whole page
- position: absolute;
- width: 100%;
- }
-
- @media (min-width: @screen-md-min) {
- width: @wiki-sidebar-width;
- margin-left:-@wiki-sidebar-width;
- margin-top: 0;
- }
- padding:@padding-base-horizontal;
+ z-index: 1; //on top of the content:after element !
+ min-height: 1px; // Prevent columns from collapsing when empty
+ padding: @padding-base-horizontal (@grid-gutter-width / 2);
overflow-x:hidden;
}
-.page, .sidebar {
- //box-sizing: border-box; //width% now includes border & padding : already part of bootstrap
- .transition(all .3s);
- //& > *:last-child { padding-bottom:1em; }
-}
-
+//show the sidebar
.content.active {
- .page {
- @media (min-width: @screen-xs-min) {
- width: 100%;
- }
- @media (min-width: @screen-md-min) {
- width:100%-@wiki-sidebar-width;
- }
- }
- .sidebar { margin-left:0; }
-}
-.content {
- background: @wiki-page-bg; //page background color
- position: relative; //prepare for the :after element to give the sidebar another color
-}
-.content:after {
- content: " ";
- position: absolute; top: 0; left: 0; bottom: 0;
- background: @wiki-sidebar-bg;
- @media (min-width: @screen-xs-min) {
- width: 0;
- }
- @media (min-width: @screen-md-min) {
- width: @wiki-sidebar-width;
- }
- .transition (all .3s);
-}
-.content:not(.active):after {
- width: 0;
-}
-.sidebar {
- z-index:1; //ontop of the content:after element !
+ .page { width: 100% - @wiki-sidebar-width; }
+ .sidebar, &:after { margin-left:0; }
}
/*
@@ -122,19 +88,15 @@ Put sidebar at the right side
- FFS: also move toggle buttons to other side ?
*/
.fav-right {
- .content:after {
- right:0; left:auto;
- }
- .page {
- float:left;
- }
- .sidebar {
- float: right;
- margin-left: 0;
- margin-right: -@wiki-sidebar-width;
+ .content {
+ &:after { right:0; left:auto; }
+ .sidebar, &:after { margin-left:0; margin-right:-100%; }
}
+ .page { float:left; }
+ .sidebar { float: right; }
+
.content.active {
- .sidebar { margin-right:0; }
+ .sidebar, &:after { margin-right:0; }
}
}
/*
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.Diff.less b/jspwiki-war/src/main/styles/haddock/default/Template.Diff.less
index 82357d5..1448add 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Diff.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Diff.less
@@ -40,9 +40,6 @@ Traditional Diff provider
.diffbody {
table { margin: (@line-height-computed/2) 0; width:100%; }
- > i { /*no difference found*/
- .warning; margin-top:1em;
- }
}
/* .diffnote equals .information */
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.Edit.less b/jspwiki-war/src/main/styles/haddock/default/Template.Edit.less
index 9f522e4..dff931c 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Edit.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Edit.less
@@ -40,9 +40,22 @@ textarea { white-space: pre-wrap; }
}
-//save or post-comment button dropdown-menu : increase width of standard dropdown
-button[name=ok] + .dropdown-menu input[type=text] {
- width: 340px;
+
+.sticky {
+ //display:block;
+ + .sticky-spacer { .hide; }
+}
+
+.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; }
+
}
.editor {
@@ -164,18 +177,6 @@ VERTICAL VIEW
label { font-weight: normal; }
}
-
-.toolbar {
- padding-bottom: 1em;
- .btn-group {
- border:1px solid @link-color;
- border-radius:@border-radius-base;
- }
- .btn-link:hover { text-decoration:none; }
-
-}
-
-
/*
Horizontal Dropdown Menu (based on bootstrap)
FIXME: used a hack to fix the min-width of the default dropdown menu ; there must be a better way !
@@ -233,8 +234,7 @@ General styles to support wysiwyg editors
font-family: @font-family-monospace;
white-space: pre-wrap; //Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
border:1px solid @pre-border-color;
- word-wrap:normal;
+ overflow-wrap:normal;
}
}
-
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 0ec44fd..d0bf0b2 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Nav.less
@@ -48,8 +48,10 @@ div.row
*/
.header > .navigation {
+
background: rgba(255,255,255,.1);
- padding: 0 @padding-base-horizontal 0 0;
+ padding:0;
+ //padding: 0 @padding-base-horizontal 0 0;
.clearfix;
/* hover menu items with transparent effect - undo some of the bootstrap color settings */
@@ -59,6 +61,25 @@ div.row
background-color: rgba(255,255,255,.2);
}
.nav > li.disabled > a {
- color: #ddd; /*one tint lighter then defaul #eee */
+ color:@silver;
+ }
+ .nav > li > a {
+ border-radius:0;
+ > *:first-child { display:none; }
+ }
+ .nav-pills > li > a > .badge { margin:0; }
+ .nav > li > a > .badge {
+ background:rgba(255,255,255,.7);
+ color:@gray;
+ position:relative;
+ top:-.7em;
+ font-size:50%;
+ }
+ .nav > li.disabled > a > .badge {
+ background:rgba(255,255,255,.5);
+ color:@gray;
}
-}
+
+ .nav > li > a.slimbox-link:after { color:white; font-size:70%; top:-.7em; }
+
+}
\ No newline at end of file
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.Search.less b/jspwiki-war/src/main/styles/haddock/default/Template.Search.less
index 54922c4..60b73e9 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Search.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.Search.less
@@ -56,7 +56,7 @@ form#searchform2 + div {
color: @pre-color;
//white-space: pre;
//word-break: break-all;
- //word-wrap: break-word;
+ //overflow-wrap: break-word;
border-radius: @border-radius-base;
}
diff --git a/jspwiki-war/src/main/styles/haddock/default/Template.Sidebar.less b/jspwiki-war/src/main/styles/haddock/default/Template.Sidebar.less
deleted file mode 100644
index a81d13f..0000000
--- a/jspwiki-war/src/main/styles/haddock/default/Template.Sidebar.less
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- 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.
-*/
-//
-// Support Left and Right Orientation : fav-left, fav-right, fav-slide??
-//
-// (default) left orientation
-/*
-.page { float:right; }
-.sidebar { float:left; }
-* html .page { margin-left:-3px; } //ie6 hack -- Three Pixel Text Jog
-* html .sidebar { margin-right:-3px; }
-
-.fav-right .page { float:left; }
-.fav-right .sidebar { float:right; };
-* html .fav-right .page { margin-right:-3px; } //ie6 hack -- Three Pixel Text Jog
-* html .fav-right .sidebar { margin-left:-3px; }
-
-*/
-
-
-/*
-Section: sidebar
- See Favorites.jsp
-
-DOM Structure:
-(start code)
- div.sidebar
- div.leftmenu
- div.leftmenufooter
- div.wikiversion JSPWiki version-number
- a.feed
-
-(end)
-*/
-
-//keep top-level lists close top the left margin
-.sidebar {
- position:relative;
-
- > .close {
- position:absolute;
- right:@padding-base-horizontal/2;
- margin-top:-@padding-base-horizontal;
- }
-}
-
-//TODO: move this to the pagination bar, in search???
-.cursor {
- background-color:@gray-lighter;
-}
-
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 44c11b9..db01faa 100644
--- a/jspwiki-war/src/main/styles/haddock/default/Template.View.less
+++ b/jspwiki-war/src/main/styles/haddock/default/Template.View.less
@@ -55,6 +55,7 @@ Section: Header & Footer
DOM structure:
(start code)
div.header
+ div.titlebox
div.topline
div.pagename
div.pull-left
@@ -100,14 +101,10 @@ DOM structure:
.container-fluid {
//margin:0 1em;
- .header > * {
- padding-right:@padding-base-horizontal;
- }
-
+ .header > *:not(.titlebox),
> .row > ul.nav {
- padding-right: @padding-base-horizontal;
+ //padding-right:@padding-base-horizontal;
}
-
}
.titlebox {
@@ -130,7 +127,7 @@ DOM structure:
//background-repeat:no-repeat;
background-attachment:fixed; //default=scroll
- > * {
+ > *:not(.titlebox) {
padding: @padding-base-horizontal/4 0 @padding-base-horizontal/4 @padding-base-horizontal;
}
.btn [class^="icon-"]:before { font-size: 1.3em; }
@@ -172,15 +169,12 @@ Fixed .header with hide (on scrolldown) and show (on scrollup) effects.
z-index:5;
width:100%;
//will-change: transform;
- .transition( transform 0.2s ease-in-out);
+ .transition( transform 0.1s 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);
}
}
diff --git a/jspwiki-war/src/main/styles/haddock/default/build.less b/jspwiki-war/src/main/styles/haddock/default/build.less
index dc74e9f..c476223 100755
--- a/jspwiki-war/src/main/styles/haddock/default/build.less
+++ b/jspwiki-war/src/main/styles/haddock/default/build.less
@@ -118,7 +118,6 @@ Stylesheet: JSPWiki
@import "Template.SearchBox.less";
@import "Template.Nav.less";
@import "Template.Content.less";
-@import "Template.Sidebar.less";
@import "Template.Attach.less";
@import "Template.Diff.less";
@import "Template.Search.less";
@@ -152,6 +151,7 @@ Stylesheet: JSPWiki
@import "prettify.less";
+@import "responsive-viewport.less";
@import "print.less";
diff --git a/jspwiki-war/src/main/styles/haddock/default/prettify.less b/jspwiki-war/src/main/styles/haddock/default/prettify.less
index f200d4f..5841883 100644
--- a/jspwiki-war/src/main/styles/haddock/default/prettify.less
+++ b/jspwiki-war/src/main/styles/haddock/default/prettify.less
@@ -77,7 +77,7 @@ pre.prettylines {
clear: right; //allow left floating of .prettylines
overflow: auto;
white-space: pre; //overwrite default 'pre-wrap'
- word-wrap: normal; //overwrite default 'break-word'
+ overflow-wrap: normal; //overwrite default 'break-word'
word-spacing: normal;
word-break: normal;
diff --git a/jspwiki-war/src/main/styles/haddock/default/print.less b/jspwiki-war/src/main/styles/haddock/default/print.less
index 02d89ff..379abf7 100644
--- a/jspwiki-war/src/main/styles/haddock/default/print.less
+++ b/jspwiki-war/src/main/styles/haddock/default/print.less
@@ -244,4 +244,12 @@ div.warning { .icon-warning; }
div.danger, div.error { .icon-error; }
+// CHECKME: Make sure to print collapsed items as if they were not collapsed
+div.clpse {
+ display:block;
+ height:auto !important;
+ //width:auto !important;
+}
+
+
} /* end of @media print */
diff --git a/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less b/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less
new file mode 100644
index 0000000..ec575b7
--- /dev/null
+++ b/jspwiki-war/src/main/styles/haddock/default/responsive-viewport.less
@@ -0,0 +1,233 @@
+/*
+ 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.
+*/
+/*
+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 ... !!
+ 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
+ ...
+
+
+*/
+
+
+@wiki-small-viewport: 768px;
+@wiki-small-viewport-menu-width: 280px;
+
+@media only screen and (max-width: @wiki-small-viewport) {
+
+ //generic
+ .input-xs {
+ .input-sm;
+ padding: @padding-xs-vertical @padding-xs-horizontal;
+ height:auto;
+ }
+
+ // type.less
+ // grid.less
+ // tables.less
+ // TableX.Sort.less
+ // TableX.Filter.less
+ // forms.less
+ // modals.less
+
+ // pagination.less
+ .pagination {
+ margin: @line-height-computed 0;
+ padding: @padding-base-vertical/2 @padding-base-horizontal/2;
+
+ a, .cursor {
+ padding:0.2em;
+ border:1px solid transparent;
+
+ > span[class] {
+ position:relative;
+ 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;
+ }
+ }
+ .first:before { content:"\ab"; }
+ .prev:before { content:"\3c"; }
+ .next:before { content:"\3e"; }
+ .last:before { content:"\bb"; }
+ .all:before { content:"\2200"; }
+
+ }
+ }
+
+ // Tips.less
+ // Magnify.less
+
+ // Viewer.less
+ // 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;
+ line-height: 1.5;
+ }
+
+ a.logo {
+ text-indent:-99em;
+ margin-top:.7em;
+ width:2.5em;
+ height:1.5em;
+ border:none;
+ b:before {content:""};
+ }
+
+ .breadcrumb { display:none; }
+
+ // Template.UserBox.less
+
+ .userbox ul.dropdown-menu {
+ max-width:@wiki-small-viewport-menu-width;
+ li:first-child a { white-space:normal; }
+ }
+
+ // Template.SearchBox.less
+ .searchbox ul.dropdown-menu { max-width: @wiki-small-viewport-menu-width; }
+
+ // Template.Nav.less
+ // Only show the menu icons
+ .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
+ */
+
+ .content {
+ .sidebar, &:after { width: @wiki-small-viewport-menu-width; margin-left:0 }
+ }
+ .sidebar { position:absolute; }
+ .content.active {
+ .page { width:100%; } //keep full width
+ .sidebar, &:after { margin-left: -100%; }
+ }
+ .fav-right {
+ .content {
+ .sidebar, &:after { margin-right:0; }
+ }
+ .sidebar { right:0; } //positon = absolution
+ .content.active {
+ .sidebar, &:after { margin-right:-100%; }
+ }
+ }
+
+ .page-content input { .input-xs; }
+ .page-content .btn { .btn-xs; }
+
+
+ // Template.Attach.less
+ // Template.Diff.less
+ // Template.Search.less
+ // Template.Workflow.less
+
+ // Template.Edit.less
+ .snipe {
+
+ .btn { .btn-xs; }
+
+ ul.dropdown-menu {
+ max-width:@wiki-small-viewport-menu-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=redo] { display:none; }
+ }
+ input#changenote { max-width: @wiki-small-viewport-menu-width; }
+
+
+ .modal,
+ .slmbx,
+ .dialog.find {
+ max-width:@wiki-small-viewport-menu-width;
+ .btn { .btn-xs; }
+ input.form-control { .input-xs; }
+ }
+
+
+ // Dialog.less
+ // Template.Preview.less
+
+ // ImagePlugin.less
+ // IndexPlugin.less
+ // TOCPlugin.less
+ // WeblogPlugin.less
+ // RecentChangesPlugin.less
+
+ // CommentBox.less
+ // GraphBar.less
+ // Tabs.less
+ // Accordion.less
+ // Columns.less
+ // Collapsible.less
+ // Category.less
+
+ // Flip.less
+ // Invisibles.less
+
+ // prettify.less
+
+
+} /* end of @media */
+
diff --git a/jspwiki-war/src/main/styles/haddock/default/tables.less b/jspwiki-war/src/main/styles/haddock/default/tables.less
index 337f176..b44f1a0 100644
--- a/jspwiki-war/src/main/styles/haddock/default/tables.less
+++ b/jspwiki-war/src/main/styles/haddock/default/tables.less
@@ -64,6 +64,13 @@ table[border="1"] td { border:0; }
}
}
+.wikitable.table-noborder td,
+.wikitable.table-borderless td,
+.wikitable.table-noborder tr:first-child th,
+.wikitable.table-borderless tr:first-child th {
+ border: 0;
+}
+
.table-fit .wikitable { width:auto; }
.table-striped.wikitable {
diff --git a/jspwiki-war/src/main/styles/haddock/fontjspwiki/icons.less b/jspwiki-war/src/main/styles/haddock/fontjspwiki/icons.less
index 949d9df..03711c9 100644
--- a/jspwiki-war/src/main/styles/haddock/fontjspwiki/icons.less
+++ b/jspwiki-war/src/main/styles/haddock/fontjspwiki/icons.less
@@ -43,6 +43,18 @@
@import "FontJspwiki/variables.less";
+
+.icon-view-menu:before { content:"\21D0"; }
+.icon-help-menu:before { content:@icon-lightbulb-o; }
+
+// Note: use span.icon to grab higher specificity on this selector, to overule some .icon-all settings
+// FFS: replace by real icon?
+span.icon-info-menu {
+ font-family:@font-family-monospace;
+ &:before { content:"i"; }
+}
+
+
.icon-none:before {
content: "\a0";
}
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp b/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
index 9d01607..2e8a428 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/Nav.jsp
@@ -47,9 +47,24 @@
</c:set>
<%-- view --%>
+
+ <%-- context upload -> context view&tab=attach ... --%>
+ <%--
+ <c:if test="${param.tab eq 'attach'}">
+ <li id="view">
+ <wiki:Link page="${page}" >
+ <span class="icon-view-menu"></span>
+ <span><fmt:message key="view.tab"/></span>
+ </wiki:Link>
+ </li>
+ </c:if>
+ --%>
<wiki:CheckRequestContext context='info|diff|upload|rename|edit|comment|conflict'>
<li id="view">
- <wiki:Link page="${page}" ><fmt:message key="view.tab"/></wiki:Link>
+ <wiki:Link page="${page}" >
+ <span class="icon-view-menu"></span>
+ <span><fmt:message key="view.tab"/></span>
+ </wiki:Link>
</li>
</wiki:CheckRequestContext>
@@ -60,7 +75,8 @@
<li id="attach"
class="<wiki:Permission permission='!upload'>disabled</wiki:Permission>">
<wiki:Link page="${page}" context="upload" accessKey="a" >
- <fmt:message key='attach.tab'/>
+ <span class="icon-paper-clip"></span>
+ <span><fmt:message key='attach.tab'/></span>
<c:if test="${attachments > 0}"><span class="badge">${attachments}</span></c:if>
</wiki:Link>
</li>
@@ -73,7 +89,9 @@
<wiki:PageExists>
<li id="info">
<wiki:Link context="info" accessKey="i">
- <fmt:message key='info.tab'/><wiki:PageExists><span class="caret"></span></wiki:PageExists>
+ <span class="icon-info-menu"></span>
+ <span><fmt:message key='info.tab'/></span>
+ <wiki:PageExists><span class="caret"></span></wiki:PageExists>
</wiki:Link>
<ul class="dropdown-menu pull-right" data-hover-parent="li">
<li class="dropdown-header"><fmt:message key="info.version"/> : <span class="badge"><wiki:PageVersion /></span></li>
@@ -108,12 +126,14 @@
class="<wiki:Permission permission='!edit'>disabled</wiki:Permission>">
<wiki:PageType type="page">
<wiki:Link context="edit" accessKey="e" >
- <fmt:message key='actions.edit'/>
+ <span class="icon-pencil"></span>
+ <span><fmt:message key='actions.edit'/></span>
</wiki:Link>
</wiki:PageType>
<wiki:PageType type="attachment">
<wiki:Link context="edit" page="<wiki:ParentPageName />" accessKey="e" >
- <fmt:message key='actions.edit'/>
+ <span class="icon-pencil"></span>
+ <span><fmt:message key='actions.edit'/></span>
</wiki:Link>
</wiki:PageType>
</li>
@@ -125,14 +145,16 @@
<wiki:CheckRequestContext context='find'>
<li>
<a class="slimbox-link" href="<wiki:Link format='url' page='SearchPageHelp' ><wiki:Param name='skin' value='reader'/></wiki:Link>">
- <fmt:message key="find.tab.help" />
+ <span class="icon-help-menu"></span>
+ <span><fmt:message key="find.tab.help" /></span>
</a>
</li>
</wiki:CheckRequestContext>
<wiki:CheckRequestContext context='edit|comment'>
<li>
<a class="slimbox-link" href="<wiki:Link format='url' page='EditPageHelp' ></wiki:Link>">
- <fmt:message key="edit.tab.help" />
+ <span class="icon-help-menu"></span>
+ <span><fmt:message key="edit.tab.help" /></span>
</a>
<%--
<wiki:NoSuchPage page="EditPageHelp">
@@ -148,7 +170,8 @@
<wiki:CheckRequestContext context='login'>
<li>
<a class="slimbox-link" href="<wiki:Link format='url' page='LoginHelp' ><wiki:Param name='skin' value='reader'/></wiki:Link>">
- <fmt:message key="login.tab.help" />
+ <span class="icon-help-menu"></span>
+ <span><fmt:message key="login.tab.help" /></span>
</a>
</li>
<%--
@@ -166,7 +189,11 @@
<%-- more menu --%>
<li id="more">
- <a href="#"><fmt:message key="actions.more"/><span class="caret"></span></a>
+ <a href="#">
+ <span class="icon-ellipsis-v"></span>
+ <span><fmt:message key="actions.more"/></span>
+ <span class="caret"></span>
+ </a>
<ul class="dropdown-menu pull-right" data-hover-parent="li">
<wiki:PageExists>
<wiki:CheckRequestContext context='view|info|diff|upload|preview' >
@@ -214,8 +241,7 @@
<wiki:PageType type="page">
<li>
<wiki:Link context="comment">
- <span class="icon-plus"></span>
- <fmt:message key="actions.comment" />
+ <span class="icon-plus"></span> <fmt:message key="actions.comment" />
</wiki:Link>
</li>
</wiki:PageType>
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp b/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
index 0f4d34d..515b7b9 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/UploadTemplate.jsp
@@ -39,13 +39,12 @@
<wiki:Include page="Header.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' }" />
- <wiki:CheckRequestContext context='login|prefs|createGroup|viewGroup'>
- <c:set var="sidebar">off</c:set>
+ <c:set var="sidebar"><wiki:Variable var="sidebar" default="${prefs.Sidebar}" /></c:set>
+ <wiki:CheckRequestContext context='login|prefs|createGroup|viewGroup|conflict'>
+ <c:set var="sidebar" value="" />
</wiki:CheckRequestContext>
- <div class="content <c:if test='${sidebar != "off"}'>active</c:if>" data-toggle="li#menu,.sidebar>.close">
+ <div class="content ${sidebar}" data-toggle="li#menu,.sidebar>.close" data-toggle-pref="Sidebar" >
<div class="page">
<wiki:PageExists>
<wiki:Include page="AttachmentTab.jsp"/>
diff --git a/jspwiki-war/src/main/webapp/templates/haddock/editors/plain.jsp b/jspwiki-war/src/main/webapp/templates/haddock/editors/plain.jsp
index 20d4c40..c9d65a5 100644
--- a/jspwiki-war/src/main/webapp/templates/haddock/editors/plain.jsp
+++ b/jspwiki-war/src/main/webapp/templates/haddock/editors/plain.jsp
@@ -93,7 +93,9 @@
<div class="snipe">
<div class="form-inline form-group">
- <div class="form-group dropdown">
+ <div class="form-inline form-group sticky">
+
+ <div class="form-inline form-group dropdown">
<button class="btn btn-success" type="submit" name="ok" accesskey="s">
<fmt:message key='editor.plain.save.submit${ context == "edit" ? "" : ".comment" }'/>
<span class="caret"></span>
@@ -173,8 +175,6 @@
</li>
<li class="divider"></li>
-
-
<li>
<a>
<label for="autosuggest">
--
To stop receiving notification emails like this one, please contact
brushed@apache.org.