There are 4 comments.
 
 
XWiki Platform / cid:jira-generated-image-avatar-0b7f21ca-5375-4332-99ed-c46afdade2b5 XWIKI-22135 Open

Separations between Live Data entries are not visible enough on mobile

 
View issue   ยท   Add comment
 

4 comments

 
cid:jira-generated-image-avatar-918fe9fe-987f-4567-b2cd-fa2c75523e9f Charpentier Lucas on 23/Jul/24 13:54
 

Both of those borders use the color theme variable 

@table-border-color

which is even editable directly via the UI for the color theme edition.

If I had to change one of those two styles not to use the color, I'd make the separation between the fields lighter, because on this kind of media, it does not look like table cells, but just a list (ul).

 

However I figured out that we can reduce the contrast on those field separators significantly by making the border `dotted` instead of `solid`. Objectively, this change makes it more difficult to separate fields, but also simpler to figure out where are the delimitation between entries.

 

IMO it's still not that difficult to distinguish between field, because spacing and layout are clear enough.

 

 

 

 
cid:jira-generated-image-avatar-918fe9fe-987f-4567-b2cd-fa2c75523e9f Charpentier Lucas on 23/Jul/24 13:58
 
Both of those borders use the color theme variable 
{code:java}
@table-border-color{code}
which is even editable directly via the UI for the color theme edition.

If I had to change one of those two styles not to use the color, I'd make the separation between the fields lighter, because on this kind of media, it does not look like table cells, but just a list (ul).



 

However I figured out that we can reduce the contrast on those field separators significantly by making the border `dotted` instead of `solid`. Objectively, this change makes it more difficult to separate fields, but also simpler to figure out where are the delimitation between entries.

 

IMO it's still not that difficult to distinguish between field, because spacing and layout are clear enough.

 

 

 
!image-2024-07-23-13-58-30-484.png!
 
cid:jira-generated-image-avatar-918fe9fe-987f-4567-b2cd-fa2c75523e9f Charpentier Lucas on 23/Jul/24 13:58
 
Both of those borders use the color theme variable 
{code:java}
@table-border-color{code}
which is even editable directly via the UI for the color theme edition.

If I had to change one of those two styles not to use the color, I'd make the separation between the fields lighter, because on this kind of media, it does not look like table cells, but just a list (ul).

 

However I figured out that we can reduce the contrast on those field separators significantly by making the border `dotted` instead of `solid`. Objectively, this change makes it more difficult to separate fields, but also simpler to figure out where are the delimitation between entries.

 

IMO it's still not that difficult to distinguish between field, because spacing and layout are clear enough.

!image-2024-07-23-13-58-30-484.png
|thumbnail !
 
cid:jira-generated-image-avatar-918fe9fe-987f-4567-b2cd-fa2c75523e9f Charpentier Lucas on 23/Jul/24 13:59
 
Both of those borders use the color theme variable 
{code:java}
@table-border-color{code}
which is even editable directly via the UI for the color theme edition.

If I had to change one of those two styles not to use the color, I'd make the separation between the fields lighter, because on this kind of media, it does not look like table cells, but just a list (ul).

 

However I figured out that we can reduce the contrast on those field separators significantly by making the border `dotted` instead of `solid`. Objectively, this change makes it more difficult to separate fields, but also simpler to figure out where are the delimitation between entries.

 

IMO it's still not that difficult to distinguish between field, because spacing and layout are clear enough.

On the left is the interface as it was before the changes proposed. On the right it's the same UI with the dotted border in between fields.

!image-2024-07-23-13-58-30-484.png|thumbnail!