Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-4913

Spreadsheet block: Fix size and add scrolling

    XporterXMLWordPrintable

    Details

    • Type: Task
    • Status: CLOSED
    • Priority: Should have
    • Resolution: Released
    • Affects Version/s: None
    • Fix Version/s: 2.30.0
    • Labels:
      None
    • Story Points:
      2
    • Sprint:
      Sprint #129, Sprint #130, Sprint #131
    • Section:
      Block: Spreadsheet
    • Track:
      Development
    • P4 Test Environment:
      deimos
    • Repositories:
      planet4-master-theme, planet4-plugin-gutenberg-blocks

      Description

      From UX recommendations:

      Problems:

      • When there is a lot of data in the spreadsheet, users have to scroll down the page for a long time before reaching another section of the page.
      • The spreadsheet width doesn't follow the grid width on some screens. On desktop screens, the spreadsheet width is too narrow. On mobile (portrait view), it takes the full width of the screen.

      Recommendations:

      • We should then fix the block height to avoid first issue above. If the data is longer than the fixed height, then users can scroll down within the spreadsheet.
      • For every screen, the spreadsheet should follow the grid width. We should add margins on the left & right-hand side, on mobile screens.

      Tasks

      • Set height as shown in attached designs
      • Set full width
      • Implement horizontal scrolling within table

        Gliffy Diagrams

          Attachments

          1. Desktop_arabic.png
            Desktop_arabic.png
            109 kB
          2. Desktop.png
            Desktop.png
            118 kB
          3. Mobile_2.png
            Mobile_2.png
            30 kB
          4. Mobile_arabic_2.png
            Mobile_arabic_2.png
            30 kB
          5. Mobile_arabic.png
            Mobile_arabic.png
            49 kB
          6. Mobile.png
            Mobile.png
            36 kB
          7. Tablet_arabic.png
            Tablet_arabic.png
            84 kB
          8. Tablet.png
            Tablet.png
            98 kB
          9. XL_arabic.png
            XL_arabic.png
            125 kB
          10. XL.png
            XL.png
            135 kB

            Issue Links

              Activity

                People

                Assignee:
                pvincent Pieter Vincent
                Reporter:
                wmorrisj William Morris-Julien
                Tester:
                William Morris-Julien
                Votes:
                0 Vote for this issue
                Watchers:
                0 Start watching this issue

                  Dates

                  Created:
                  Updated:
                  Resolved: