OLMIS-4026: Change Table Styles

Activity

FEOLMIS-2618 0

Keyboard shortcuts  
  • Summarize the review outcomes (optional)
     
    #permalink

    Details

    Warning: no files are visible, they have all been filtered.
    Participant Role Time Spent Comments Latest Comment
    Author      
    Total   0m 0  
    #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.
    /src/common/button.mixins.scss Changed
    Open in IDE #permalink
    /src/common/variables.scss Changed
    Open in IDE #permalink
    /src/openlmis-table/tables.scss Changed

    Review updated: Reload | Ignore | Collapse

    You cannot reload the review while writing a comment.

    Log time against