Template Updates (from earthquake-eventpages implementation)
Notes from implementation of style changes on earthquake-eventpages:
- Implement old-style.scss as part of template (see theme.scss for styles that were continued into new template)
- Table (
usa-table
)- show horizontal scrollbar always
- This is just an issue on Mac due to system configurations
// MDN does not recommend this as it's a "non-standard" feature // and could create an inconsistent experience for users // https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar usa-table { .usa-table-container--scrollable { &::-webkit-scrollbar { background-color: white; height: 0.5rem; } &::-webkit-scrollbar-thumb { background-color: rgba(50, 50, 50, 0.5); border-radius: 0.25rem; } } }
- This is just an issue on Mac due to system configurations
- table width 100%?,
- tables used to be
display: block
and would use 100% of available width. This meant that when multiple tables were on the same page they all occupied the same width. It has a more uniform look where different widths on tables create a stair-steppy look.
- tables used to be
- always indicate that scrollable table is scrollabe
- add permanent scroll bar using css
- Update table headers to be less bold?
- table font-sizes are 1.06rem? Seems like this should just be 1rem;
- table caption, displays as a "header" before the table. Add 'serif' font to
usa-table > caption
to apply the same header styles - There is a lot of bold text applied to a table. See what the USWDS recommendation is and see if we can have less distraction by removing some of the bold text (when everything is bold, nothing is bold).
- show horizontal scrollbar always
- Alerts (
usa-alert
)- add top and bottom margin?
- Accordion (
usa-accordion
)- add top and bottom margin?
- update to use
expanded: BooleanAttribute
, so that we don't have to setexpanded = true
- Text Level Semantics
- Links in header/footer do not have the proper cursor (pointer)
- pick a gray color for a "lighter" text, that way we can always use the same gray scale value when we use a lighter text
- Buttons
- set button styles for
text-transform
what is recommended? lowercase? uppercase? capital?
- set button styles for
- Figure
- center figure captions?
- Navigation
- new design pattern for differentiating between:
- site nav
- application nav
- show/hide menu button/navigation
- should this be done responsively? (currently done based on screen width at
ngOnInit
- should this be done responsively? (currently done based on screen width at
- new design pattern for differentiating between:
Edited by Edward J Hunter