Details

    • Type: Task
    • Status: Done
    • Priority: Major
    • Resolution: Done
    • Affects Version/s: None
    • Fix Version/s: 3.3
    • Component/s: UI
    • Labels:
    • Sprint:
      ILL Sprint 47, Parrot Sprint 49
    • Story Points:
      3

      Description

      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 color

      Examples
      Requisition Screen

      Local Fulfillment Screen

        Attachments

        1. Capture.PNG
          31 kB
        2. Chrome.jpg
          426 kB
        3. FF-After-Code-Change.jpg
          376 kB
        4. FF-After-Code-Change (a1d68e69-92a9-44f7-af1b-64240b0f859c).jpg
          376 kB
        5. FF-Before-Code-Change.jpg
          372 kB
        6. image-2018-01-25-12-25-20-585.png
          63 kB
        7. screenshot-1.png
          48 kB
        8. screenshot-2.png
          25 kB
        9. screenshot-3.png
          190 kB
        10. screenshot-4.png
          181 kB
        11. screenshot-5.png
          135 kB
        12. screenshot-6.png
          63 kB

          Issue links

            Activity

              People

              • Assignee:
                kpalkowska Klaudia Pałkowska
                Reporter:
                nick.reid Nick Reid (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Time Tracking

                  Estimated:
                  Original Estimate - 2 days
                  2d
                  Remaining:
                  Time Spent - 1 day, 6 hours Remaining Estimate - 2 hours
                  2h
                  Logged:
                  Time Spent - 1 day, 6 hours Remaining Estimate - 2 hours
                  1d 6h