What's new UI Proposal & HTML, CSS code

Here is the proposal discussing a new implementation for the drawer.


Thanks for taking care of checking the contrast and meaning of the color variables :+1:
Looks good to me for the colors. You need to use colortheme variables though, see the comment on the CSS later in this post.

Wouldn’t there be an issue with the images on version 1 – small screen? As we can see on the screenshot, the pictures for version 1 are made to be viewed on a full sized screen and can be difficult to read on a small screen. If we use an alternative picture for the small screen, I have no problem with this.

I think the solution 2 would make having a clean responsive design easier, so I’d prefer it above solution 1.


About the HTML:

  • Note that an alt with value “Image” is useless, it should be more precise than that. Here is a use case where it would impact usability: “I’m on the move, in the countryside, and I can’t load pictures in a reasonable amount of time on my phone. So my browser decides to replace it with its alt, and it just shows me ‘Image’. I didn’t get any of the information conveyed by the image and there might as well not have been any alternative text.” I understand that this is a demo code but it seems important to understand that this default alt can’t stay like this.
  • See our codestyles for CSS, you should avoid inline styling (using the attribute ‘style’ in HTML). You should create a CSS class and put all style in your CSS :slight_smile: This practice makes debugging and fixing easier, since if you have a style issue later, you don’t have to read through your HTML, but just look at the CSS since it’s where all the styles are handled.

About the CSS:

  • Use colortheme variables (see code practices for CSS again): you could make it a LESS and use @headings-color and @xwiki-page-content-bg. This practices makes sure that there’s no issue when you change color theme (especially important for dark themes like ‘Darkly’).
  • For the category tag style, maybe it’d be nice to use the same style as what we have currently for page tags:

    even if it means changing the current style for page tags.

Thank you for this proposal and have a good day!
Lucas C.