Division between panels & main content | Issues & New looks

Development
,
#1

Hello everyone! :blush:

We are reaching conclusions to the main sub-proposals on the minimalist skin proposal, so I thought of discussing a bigger change as well.

What I wanted to discuss today was an update on the current division between the panels and the main content.

Recap of sub-proposals

Skip if you know about them. :sweat_smile:

As a recap, the proposals discussed on the forum to the moment are:

Current division

current division

The main content is divided from the panels column with what seems to be slim a borderā€¦ but is not a border, but a very small shadow. This shadow actually affects more than the main content area.

The same border-shadow problem affects docextrapanes:

image

Issues related to this division

These issues were found and documented by @lucaa and @Jsd . Solving them will improve the overall look of the XS and make the customization of the instance easier:

1. Borders of the docextrapanes focused tab are hardcoded to grey

  • Top: how it is
  • Bottom: how it was expected to be

image

2. Borders around the docextrapanes look fuzzy

  • Top: how it is
  • Bottom: how it was expected to be
    ++ The border should be equal on all sides, even in the expected side, the border does not look equal

image

3. Unify the horizontal lines separators in the skin, style and colors and make them available in the color theme

  • Solution after experimenting proposed by @lucaa : splitting the color variable xwiki-border-color (the variable that affects these elements) in 2 variables, one for the separator and one for the borders looks fine.

image

4. ā€œBorderā€ of the page content area in edit mode is not of the same color as in view mode

image

5. Main content area in view mode still has borders when the body background and the page content background are of the same color

  • Top: how it is
  • Bottom: how it was expected

image

6. Drop the panel-default-text color from the color theme and use the content colors for all panel content, to facilitate contrast

A probably not popular opinion: Personally, I believe panels shouldnā€™t have a separate background, but I understand that people may feel the need of extra customization at the expense of losing a bit of focus from the main content area. As Iā€™ve said before in another proposal, we should always try to converge the vision of the user to the this area. Thus, my opinion is not aligned with the solution presented in this issue, but I want to see what you guys think, maybe Iā€™m not keeping something in mind.

7. Panel background color from the color theme is not kept for the edit mode panels, which can break contrast

image

New look ideas

Idea 1: If it simplifies the work on the above issues in any way, Iā€™d vote to redesign the section after the main content area. Iā€™ve always found the footer & then the comments area a bit weird and like they could be more nicely structured. The redesign would include making sure thereā€™s no weird borders, no fixed colors, etc. It would also mean to encourage collaboration a bit more than it does already.

Idea 2:
The goal would be to differentiate ourselves a bit from other knowledge organization softwares that are heavily following the Notion esthetic AND to create a visual point of focus on the document.

  • No background for panels, as Iā€™ve stated above, on issue 6.
  • No borders for the main content or a much softer, more subtle shadow
  • Large rounded corners on main content (14px -20px)
  • Margin-top on main content area to isolate fully the content from the entire wiki (aligned with the headings of the panels)

No shadow:

image

Subtle shadow:

image

What do you think about all of these? :thinking:

#2

Iā€™m not a fan of moving the content further down and introducing a rounded border above the content. For me, this moves the content too much down in particular related to the panels. What we also need to consider is the responsive mode that is triggered relatively early and moves the panels below the content.

For the rest, could you please clarify what youā€™re actually proposing? From what I understand youā€™re primarily listing issues but it is not clear to me what youā€™re proposing to fix them.

Iā€™m not against removing the special background color from the panels, I think in particular in responsive mode it looks strange. One idea from me as a non-designer would be to basically apply what youā€™re proposing for the main content to the panels (and then maybe also to the main content): Make their background white with rounded corners and with a margin to the main content. Something like this:

image

Note that Iā€™ve here also separated the breadcrumbs from the main content which is optional but would make sense if we remove them from the main content area as part of XWIKI-18838. The screenshot is with white background color and 8px border radius on the panel and the breadcrumbs. Also, I took the box-shadow of the main content and applied it also to the panels but this is optional, we could also use a border or nothing at all, but in the latter case the contrast would be very low. Note that to separate the breadcrumbs you need the changes from XWIKI-18838 that remove the breadcrumbs from the main content container, this is currently causing other breakages that I prevented here by reverting some style changes so probably not so easy to reproduce.

In my opinion, this also looks much better in responsive mode (though we should make it consistent that in this case there is no gray space on the left and right of the panels and also vertical spacing could be more consistent):

image

1 Like
#3

For comparison, here a screenshot with the same modifications but without shadows:

image