GH-75: Data List - Styles / Component

[wesleyboar]

Overview

Create CSS component for "Data List" (borrow and improve similar Portal component).

Issues

Just the component (re-usable styles) for GH-75.

Changes

• Create new CSS component stylesheet.
• Import new stylesheet into Core site.css.

Testing

Alternative: To test with a plugin instead of a snippet—or test #308 at the same time—then checkout branch task/GH-75-styles--GH-75-plugin instead.

1. If you do not have a CMS environment, then prepare one with Wiki: Test CMS Changes.
2. Checkout this branch.
3. Add new snippet to test page.
4. Create Snippet plugin with:
   • HTML: "Markup" from c-data-list.html
5. Test that the following is rendered:

   • With page template "Fullwidth" (fullwidth.html), see

     several lists and tables with different layouts (toggle for screenshot)

     

Screenshots

Truncation Requirements Not Met By Layout

Notice: The orange and blue box descriptions are mismatched. Just notice that "Truncate Values" headings are the only sections that allow truncation of values.

Subject	Firefox	Chromium
D. Lists
Tables

Truncation Requirements (Artificially) Met by Layout

I both narrowed screen and increased html font-size to 500% and 800% to achieve this layout.

Subject	Firefox	Chromium	Notes
Horizontal			These are edge cases¹, so everything need not be legible. The vert. layouts don't need truncation at this screen width and font size. Firefox supports truncation via character (":"); Chromium does not.
Vertical			Text "_____" was appended to force truncation. Firefox supports truncation via character (":"); Chromium does not.

¹ Truncation for horizontal layout is an edge case because: (a) this layout should be used only when enough space is available; (b) when space is not available, responsive design (styles outside this component) should change the surrounding layout so space is available.

[iamthatian]

💯 💯 💯