task/tup-534 Adds in media query for tables

[R-Tomas-Gonzalez]

Overview

Added in mobile view for tables. Columns now go from horizontal to vertical in mobile view.
Replaces the old solution (in Core-Styles) (and any code mentioning APCD like it does) with the new solution (from APCD).

Related

• TUP-534

Changes

(Most changes were done in table--basic. Does this need to happen elsewhere? @wesleyboar)

• Added a media query to handle the table being on a smaller screen
• Removed and added styles that pertain to different tables (Header, No Header, Paragraphs, Paragraphs with Headers, Nested Tables)

Testing

1. Check for borders in correct spaces
2. Check that all data is available and able to be viewed
3. Watch for unwanted side-effects (missing data, unwanted padding, unwanted margin, borders in wrong spots)
4. This is the start to a mobile solution that WILL be iterated on, doesn't have to be perfect (yet), but should have all of the ingredients.

UI

Web	Mobile

[wesleyboar]

Pre-review review 😅.

[R-Tomas-Gonzalez]

b440a77

Makes these adjustments:

1. IMPORTANT:

• On all sizes, increase spacing e.g. --cell-pad-vert, --cell-pad-horz, line-spacing.
• On "mobile design", increase spacing even more.

2. IMPORTANT: On "mobile design" and smaller, use larger font.

• Done?

3. DOUBLE CHECK: Verify that top border and bottom border on tables mobile and desktop match their status on main branch (dev.tup) and are consistent.

• If borders are inconsistent on task/tup-534 branch, that might be a new bug. Check main.
• If borders are inconsistent on main branch, that's a main branch bug you may fix in task/tup-534.

4. NICE TO HAVE: On "mobile design" (on desktop), can hovering over column name create a tooltip (without JavaScript). I.e. use title attribute as tooltip.
   • Wes thinks, "Probably not."

Tomas: Did not try this. Will worry about "Nice To Haves" when we have working code.

[R-Tomas-Gonzalez]

396b40d

Makes the following change. Having portal not truncate was decided here

1. REMEMBER: Paragraphs should not be truncated by default. Portal may truncate them, though (Tomas: No longer the case due to commented out code).
2. Brings back the top border for paragraphs

[wesleyboar]

The result looks excellent — just as we expect while we wait for more design instruction. But I know the code to get there is a work in progress. I've left some notes to track the cleanup that can be done.

[wesleyboar]

For approval, please:

• update screenshots
• resolve merge conflicts
• review commented out @import in core-styles.docs
  ^{Just remember what it's about. I'll try to find a quick fix. Suggestions welcome.}

[wesleyboar]

Found two bugs.

If, before fixing these, you already have screenshots updated since my last review (today), no need to update again.

[wesleyboar]

Third bug found. Not a blocker. Double borders on mobile tables. I have trouble debugging it. I hope to avoid border removal bandaid solution.

Basic Table	Paragraph Table

Details

In table--basic.icss, there is a —

/* To add bottom border to rows */
tr:not(:last-of-type) > :is(td, th),
:--s-paragraph-table p:not(:last-of-type) {
  border-bottom-width: var(--global-border-width--normal);
  border-bottom-style: solid;
  border-bottom-color: var(--global-color-primary--light);
}

— and a —

@media (max-width: 767px) {
  ...

  tr > :is(td, th):not(:last-of-type),
  :--s-paragraph-table p:not(:last-of-type) {
    border-bottom-width: var(--global-border-width--normal);
    border-bottom-style: solid;
    border-bottom-color: var(--global-color-primary--light);
  }

  ...
}

Nested tables avoids double borders by selectively removing them. But maybe there is a solution (a set of selectors, and maybe a use of media queries), for basic and paragraph and nested tables, with less code that only applies the borders as needed, so they need not be removed after the fact.

[R-Tomas-Gonzalez]

Third dug found. Not a blocker. Double borders on mobile tables. I have trouble debugging it. I hope to avoid border removal bandaid solution.

Basic Table	Paragraph Table

Let me know if this is a good resolve:
(Removes the unset in nested--table, and brings it to the scope of the basic--table)

8fc5c29

[wesleyboar]

Let me know if this is a good resolve: (Removes the unset in nested--table, and brings it to the scope of the basic--table) 8fc5c29

It is good.

[wesleyboar]

GitHub trying to be smart by closing this PR for me cuz I said "fixed #275" in another PR… Do only what I say, GitHub.

[wesleyboar]

YES!

[wesleyboar]

Reverted in #313.
Restored in #317.