Padding related to the navigation tree

Development
,
#1

Hellooo everyone! :blush: I want to propose some small changes related to the spacing in the navigation tree.

Current look

This is how the nav tree in the side panels looks like, currently:

image

This is how the nav tree in the breadcrumb looks like, currently:

image

Issues with the current look

In the first case (in the side panel):

  • very little space around the current page name
  • the current page name is very close to the bullet point

While being small issues, they make the UI style feel clumsy/unintentional and they consist one of the issues that bothered me since I entered my first XWiki instance :sweat_smile:

In the second case (in the breadcrumb), the spacing is enequal on the right and left side of the [icon+current page name] group.

Changes made

/* Tackling bad spacing on current page in nav tree 
from the breadcrumb*/

.breadcrumb .jstree-xwiki .jstree-clicked {
padding: 0 9px 0 0;
border-radius: @border-radius-small;
}


/* Tackling bad spacing on current page in nav tree 
from the side panel */

#leftPanels .jstree-xwiki .jstree-clicked, #rightPanels .jstree-xwiki .jstree-clicked{
border-radius: @border-radius-small;
padding:0 5px;
}

#leftPanels .jstree-xwiki .jstree-hovered, #rightPanels .jstree-xwiki .jstree-hovered {
border-radius: @border-radius-small;
padding:0 5px;
}

/* Alligning the rest of the pages in the navigation tree in the side panel
with the current page based on the latter's padding */

#leftPanels .jstree-xwiki .jstree-anchor, #rightPanels .jstree-xwiki .jstree-anchor {
padding:0 5px;
}

Updated look

In the side panel:

image

In the breadcrumb:

image

See changes live :star_struck:

You can see how these changes look live in my own public instance:

2 Likes
#2

Hello @amilica ,

Iā€™m not sure of the type of feedback you expect on this one,

but from my point of view the changes are too small to be needing a vote. They do polish a look, but they donā€™t fundamentally change itā€™s principle or anything, so, to me, they donā€™t need to be voted on the forum or anything.
The only thing that could be discussed about it is the fact that the tree uses a couple of additional pixels on the tree in the side panel on the horizontal dimension, that we may want to save because we want to be as compact as possible. To me itā€™s a very small price to pay for coherence, so itā€™s not really interesting for discussion.

I think you can definitely make a ticket and a PR with your fix proposal, and then we can discuss the code on the PR (if thereā€™s anything to discuss about it). It would definitely accelerate its implementation.

Finally, a couple of suggestion for the proposal you made above:

  • if you havenā€™t done so yet, please also check what the navigation tree looks like in compact mode / mobile (it has a different look, more compact). Also check how it looks for a page with children (with a bullet that is different from a bullet point).
  • you probably should target all the trees, not only when it appears in the #leftPanels. The navigation panel can be displayed on the right, and the tree is the same that is used by the All Docs ā†’ Tree view as well as by the {{children}} macro, and many other things; these are instantiations of the ā€œgenericā€ document tree macro, see https://extensions.xwiki.org/xwiki/bin/view/Extension/Document+Tree+Macro so the style should apply to all these trees.

Thanks,
Anca