Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XWIKI-22135: Separations between Live Data entries are not visible enough on mobile` #3295

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
// headers on the left
.responsive-table-tbody-tr-tdth() {
border: none;
border-bottom: 1px solid @table-border-color;
border-bottom: 1px dotted @table-border-color;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't impact only LD, does it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it impacts all .responsive-tables.

See https://www.xwiki.org/xwiki/bin/view/Documentation/DevGuide/FrontendResources/SpecialCSSClasses/#HClassesfortheresponsiveness

However I just got a look at an example of such a table in XS, the inline history:
image
before changes in the PR on the left, after changes in the PR on the right.
IMO it's an improvement for this use case.

Making the separation between entries (one line) and different fields of the same lines more different is something that would improve the user experience for all of these responsive tables in my opinion.
What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, this class should not be mistaken for .table-responsive which comes from bootstrap 🙃

float: left;
min-height: @input-height-base;
overflow: hidden;
Expand Down