New design of boxes

Development
1

Hi.

Yesterday we got an update to XWiki 16.7.1 and i noticed changes within the boxes (bold border on the left side and pictographs).

I like that a lot but the handling of bigger content within those boxes is kind of wonky.

image
image1634×324 49.2 KB

The pictograph is squeezed on the top of the box, the text wrapping is suboptimal.

Maybe working with tables within the boxes is an option? An optional text within the header might help with accessability (i´m not an expert in this topic)?

image
image1630×400 60.4 KB

Just an idea, i wanted to share ;).

Thanks for the great work.

Greetings
Roland

1 Like
2

Hi!
We had complications when implementing the message boxes, which ended up in a small change from our design goal (which had similar lining up for the icon and text boxes).

It’s reported at XWIKI-22458 :+1:

Thank you!
Lucas C.

1 Like
3

I´m excited to see the final results.

4

The PR is merged and the fix should be available in the next release of XWiki Standard: 16.9.0-rc-1 :slight_smile:

5

Hello and a happy, healthy, peaceful new year to all of you.

Here are the results! And they almost look fine ;).

image
image1943×123 9.89 KB

The text is divided by “enter”, which is represented in a table-view (horizontal ). Is it possible to divide text-passages in paragraphs (vertical)?

== 12.3 Infobox ==

{{info}}
**Dieses Feld ("Infobox") wird genutzt, um Beispiele zu beschreiben.**

Damit ist es möglich Sachverhalte zu illustrieren indem konkrete Beispiele für Listen, Quellcode,... angezeigt werden.
{{/info}}

Thanks in advance.

Roland

6

Indeed I can reproduce the bug on 16.10.2. This is an important regression. Sorry about it, we’ll fix it quickly in a bug fix release…

1 Like
7

Thanks for your report!

I looked a bit further into it.

image
image1543×463 19.1 KB

Generated from

{{info}}
There should be
  
two lines.
{{/info}}


{{info}}
There should be

two lines.
{{/info}}

{{info}}
There should be
two lines.
{{/info}}

(the second one has nothing on the empty line, while the first one has a couple of spaces.)

It seems like this does not apply on every single way to write down paragraphs at least ^^`.
Looking for a solution, will update on here asap :slight_smile:

8

if the second example has spaces then it’s all normal and there’s nothing to fix :slight_smile:

9

Not really, no. It should still show up as several lines. The content of the info macro should looks the same as outside the macro basically.

10

They all have a new line inside of them, so there’s something to fix.

Edit: It’s the first one that has a couple of spaces on the empty line, not the second one.

When there’s just an empty line, the renderer already considers that there’s two different paragraphs (which is correct) , and they are not wrapped inside a common <p> (during manual testing, I did not cover usage of the macro in these conditions - which is a mistake). Those paragraphs are positioned with the same flex used to position the icon, title and image, which means -on the same line-.

11

yes you’re right, there’s at least a new line so indeed there’s a bug.

12

I setup a testing page with a bit more variety in conditions.
It seems like this issue cannot be reproduced either when there’s a title or a picture for the info box.

I opened XRENDERING-768: Multiple paragraphs in the info macro do not result in multiple lines to track the progress of this issue.

EDIT: After looking for a solution, it ended up being mostly on the xwiki-rendering side, I moved the ticket and updated the link here.

13

I opened a Pull Request with a fix to this issue at XRENDERING-768: Multiple paragraphs in the info macro do not result in multiple lines by Sereza7 · Pull Request #321 · xwiki/xwiki-rendering · GitHub .

@Roland In order to fix this, you have three solutions (from easiest to most difficult):

  • Get the patch in a migration of your wiki (could take some time, but it should be in the next 16.10 release)
  • Use only one HTML paragraph in your info messasge content. The second one is created only when there’s a fully empty line (hard to scale or migrate if you already have a bunch of those).
  • Build the xwiki-rendering-macros-message JAR with the changes I proposed in the PR and deploy it to your wiki. (not the most safe but quite fast if you know what you’re doing and will apply to every macro at once)

Thanks again for the report Roland :slight_smile:
Let me know if you find any other regression!

2 Likes