FEOLMIS-2618 OLMIS-4026: Change Table Styles

draft for 5 years due 5 years ago

Author

OLMIS-4026: Change Table Styles

Activity

Details
Objectives
General Comments 0
Unresolved
Resolved
Number of files included: 3

openlmis-ui-components 0
- Folder src 0
  - Folder common 0
    - File button.mixins.scss 0 Remove
    - File variables.scss 0 Remove
  - Folder openlmis-table 0
    - File tables.scss 0 Remove

#permalink

Details

Warning: no files are visible, they have all been filtered.

Participant	Role	Time Spent	Comments	Latest Comment
Jakub Kondrat	Author
Total		0m	0

Linked issues
- OLMIS-4026

#permalink

Objectives

Our current table styles don't leave much room for color variation to meaning. The following changes are meant to improve readability and allow for more complexity in OpenLMIS tables.

Change Reasons

Zebra stripes generally aid readability on printed forms, but give OpenLMIS forms lots of visual noise because of the amount of text
- Adding a mouseover/focus highlight to a table row will help with visual styling more
Using secondary colors for semantic meaning allows for more intuitive designs
- Currently, there are implementations of tables that have "parent and child" relationships in the same table — those relationships need a stronger visual relationship
- Creating CSS classes to undo zebra striping for tables that don't need it will be harder to maintain

Acceptance Criteria

Remove zebra stripes
- Default tables are white
Add Styleguide page and Sass mixin for gray table style
Add mouse over highlight
- Highlight should be based on $brand-primary...

Branches in review

#permalink

Issues Raised From Comments

Key	Summary	State	Assignee

#permalink

General Comments

There are no general comments on this review.

Click to load diff

Notation	Description
[Crucible Review CR-1\|CR-1]	Creates a link to a Crucible review or FishEye artifact using the internal key reference for the item. Example: Crucible Review CR-1
[Atlassian Crucible\|http://atlassian.com/crucible]	Creates a link to an external resource, special characters that come after the URL and are not part of it must be separated with a space. External links are denoted with an arrow icon. Example: Atlassian Crucible
{cs:id=1\|rep=repository-key}	Render a link to the changeset Example: 1
bold	Makes text appear bold.
_italic_	Makes text appear in italics.
+underline+	Makes text appear underlined.
??citation??	Makes text appear in citation form.
-strikethrough-	Makes text appear ~~struck through~~.
^superscript^	Makes text appear in ^superscript.
~subscript~	Makes text appear in _subscript.
{{ monospaced }}	Placing double curly-brackets around text makes it appear `monospaced`.
{code} // Some comments here public String getFoo() { return foo; } {code}	The code macro displays a preformatted block for showing code with syntax highlighting. Example: // Some comments here public String getFoo() { return foo; }
bq. Block Quote	To make an entire paragraph into a block quotation, place "bq. " before it. Example: Block Quote
{quote} here is quoteable content to be quoted {quote}	Quote a block of text that's longer than one paragraph. Example: here is quoteable content to be quoted
{color:red} look ma, red text!{color}	Changes the color of a block of text. Example: look ma, red text!
* A list with bullets * Second item ** Indented item	Example: A list with bullets Second item Indented item
# A list with numbers # Second item ## Indented item	Example: A list with numbers Second item Indented item

FEOLMIS-2618

OLMIS-4026: Change Table Styles

FEOLMIS-2618 0

Details

Linked issues

Objectives

Branches in review

Issues Raised From Comments

General Comments

Log time

OLMIS-4026: Change Table Styles

FEOLMIS-2618 0

Summarize the review outcomes (optional)

Details

Linked issues

Objectives

Branches in review

Issues Raised From Comments

General Comments

Log time