Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-75943

Add the possibility to avoid "Card view"

    XMLWordPrintable

Details

    • MOODLE_401_STABLE
    • MOODLE_402_STABLE
    • Hide

      Setup

      1. Download MDL-75943.diff patch (to add some extra attributes to system/custom reports) to your moodle root instance.
      2. Apply the patch

        git apply MDL-75943.diff
        

      3. Log in as admin
      4. Navegate to Site administration > Development > Purge caches and Purge all caches to ensure new styles are being served
      5. Navigate to Reports in user menu
      6. Create new report from Users report source, with default setup

      Test custom attributes in a system report

      1. Navigate to Reports in user menu
      2. Open the browser developer tools (usually F12 key) and find "reportbuilder-report" class element
      3. Confirm that this element has data-custom1="foo" and data-custom2="bar" attributes (see screenshot-1.png)

      Test custom attributes in a custom report (view page)

      1. Navigate to Reports in user menu
      2. Click on View report option in the report action menu
      3. Open the browser developer tools and find "reportbuilder-report" class element
      4. Confirm that this element has data-custom1="foo" and data-custom2="bar" attributes

      Test custom attributes in a custom report (edit page)

      1. Navigate to Reports in user menu
      2. Click on Edit report content option in the report action menu
      3. Open the browser developer tools and find "reportbuilder-report" class element
      4. Confirm that this element does not have data-custom1="foo" and data-custom2="bar" attributes
      5. Click on Preview button
      6. Open the browser developer tools and find "reportbuilder-report" class element
      7. Confirm that this element has data-custom1="foo" and data-custom2="bar" attributes

      Test "force card/table" in a custom report (view page)

      1. Navigate to Reports in user menu
      2. Click on View report option in the report action menu
      3. Confirm that report is displayed as a table (screenshot-3.png)
      4. Resize the browser window to a small screen size (< 576 px)
      5. Confirm that report is displayed as cards (screenshot-4.png)
      6. Resize the browser window again to a larger screen size (> 576 px)
      7. Open the browser inspector and manually add data-force-card attribute to the "reportbuilder-report" class element (see screenshot-2.png)
      8. Confirm that report is now displayed as cards
      9. Resize the browser window to a small screen size (< 576 px)
      10. Confirm that report is still displayed as cards
      11. Resize the browser window again to a larger screen size (> 576 px)
      12. Open the browser inspector and manually replace data-force-card with data-force-table attribute in the "reportbuilder-report" class element
      13. Confirm that report is displayed as a table
      14. Resize the browser window to a small screen size (< 576 px)
      15. Confirm that report is also displayed as a table

      Test "force card/table" in a custom report (edit page)

      1. Navigate to Reports in user menu
      2. Click on Edit report content option in the report action menu
      3. Open the browser inspector and manually add data-force-card attribute to the "reportbuilder-report" class element
      4. Confirm that report is still displayed as a table (card view is not available while editing the report)
      5. Click on Preview button
      6. Confirm that report is displayed as a table
      7. Resize the browser window to a small screen size (< 576 px)
      8. Confirm that report is displayed as cards
      9. Resize the browser window again to a larger screen size (> 576 px)
      10. Open the browser inspector and manually add data-force-card attribute to the "reportbuilder-report" class element
      11. Confirm that report is now displayed as cards
      12. Resize the browser window to a small screen size (< 576 px)
      13. Confirm that report is still displayed as cards
      14. Resize the browser window again to a larger screen size (> 576 px)
      15. Open the browser inspector and manually replace data-force-card with data-force-table attribute in the "reportbuilder-report" class element
      16. Confirm that report is displayed as a table
      17. Resize the browser window to a small screen size (< 576 px)
      18. Confirm that report is also displayed as a table
      Show
      Setup Download MDL-75943.diff  patch (to add some extra attributes to system/custom reports) to your moodle root instance. Apply the patch git apply MDL-75943.diff Log in as admin Navegate to Site administration > Development > Purge caches and Purge all caches to ensure new styles are being served Navigate to Reports in user menu Create new report from Users report source, with default setup Test custom attributes in a system report Navigate to Reports in user menu Open the browser developer tools (usually F12 key) and find "reportbuilder-report" class element Confirm that this element has data-custom1="foo" and data-custom2="bar" attributes (see screenshot-1.png ) Test custom attributes in a custom report (view page) Navigate to Reports in user menu Click on View report option in the report action menu Open the browser developer tools and find "reportbuilder-report" class element Confirm that this element has data-custom1="foo" and data-custom2="bar" attributes Test custom attributes in a custom report (edit page) Navigate to Reports in user menu Click on Edit report content option in the report action menu Open the browser developer tools and find "reportbuilder-report" class element Confirm that this element does not have data-custom1="foo" and data-custom2="bar" attributes Click on Preview button Open the browser developer tools and find "reportbuilder-report" class element Confirm that this element has data-custom1="foo" and data-custom2="bar" attributes Test "force card/table" in a custom report (view page) Navigate to Reports in user menu Click on View report option in the report action menu Confirm that report is displayed as a table ( screenshot-3.png ) Resize the browser window to a small screen size (< 576 px) Confirm that report is displayed as cards ( screenshot-4.png ) Resize the browser window again to a larger screen size (> 576 px) Open the browser inspector and manually add data-force-card attribute to the "reportbuilder-report" class element (see screenshot-2.png ) Confirm that report is now displayed as cards Resize the browser window to a small screen size (< 576 px) Confirm that report is still displayed as cards Resize the browser window again to a larger screen size (> 576 px) Open the browser inspector and manually replace data-force-card with data-force-table attribute in the "reportbuilder-report" class element Confirm that report is displayed as a table Resize the browser window to a small screen size (< 576 px) Confirm that report is also displayed as a table Test "force card/table" in a custom report (edit page) Navigate to Reports in user menu Click on Edit report content option in the report action menu Open the browser inspector and manually add data-force-card attribute to the "reportbuilder-report" class element Confirm that report is still displayed as a table (card view is not available while editing the report) Click on Preview button Confirm that report is displayed as a table Resize the browser window to a small screen size (< 576 px) Confirm that report is displayed as cards Resize the browser window again to a larger screen size (> 576 px) Open the browser inspector and manually add data-force-card attribute to the "reportbuilder-report" class element Confirm that report is now displayed as cards Resize the browser window to a small screen size (< 576 px) Confirm that report is still displayed as cards Resize the browser window again to a larger screen size (> 576 px) Open the browser inspector and manually replace data-force-card with data-force-table attribute in the "reportbuilder-report" class element Confirm that report is displayed as a table Resize the browser window to a small screen size (< 576 px) Confirm that report is also displayed as a table

    Description

      Reportbuilder is displaying the report as cards when the screen size is below 576 pixels.

      Would be nice to have a way to "force" report to be displayed as a table avoiding this "Card view" styling even when the screem size is below 576 pixels.

      To add even more flexibility to the reports, would be nice to have a method to add custom attributes to the report HTML.
      And with this new addition will be possible to add the following attributes to force card/table view:

      data-force-card: Force the report to be displayed always as cards
      data-force-table: Force the report to be displayed always as a table

       

      Attachments

        1. (I) 3 Passed -- MDL-75943.png
          (I) 3 Passed -- MDL-75943.png
          200 kB
        2. (II) 4 Passed -- MDL-75943.png
          (II) 4 Passed -- MDL-75943.png
          248 kB
        3. (III) 4 Passed -- MDL-75943.png
          (III) 4 Passed -- MDL-75943.png
          239 kB
        4. (III) 7 Passed -- MDL-75943.png
          (III) 7 Passed -- MDL-75943.png
          270 kB
        5. (IV) 10 Passed -- MDL-75943.png
          (IV) 10 Passed -- MDL-75943.png
          27 kB
        6. (IV) 13 Passed -- MDL-75943.png
          (IV) 13 Passed -- MDL-75943.png
          249 kB
        7. (IV) 15 Passed -- MDL-75943.png
          (IV) 15 Passed -- MDL-75943.png
          33 kB
        8. (IV) 3 Passed -- MDL-75943.png
          (IV) 3 Passed -- MDL-75943.png
          83 kB
        9. (IV) 6 Passed -- MDL-75943.png
          (IV) 6 Passed -- MDL-75943.png
          45 kB
        10. (IV) 8 Passed -- MDL-75943.png
          (IV) 8 Passed -- MDL-75943.png
          158 kB
        11. (V) 11 Passed -- MDL-75943.png
          (V) 11 Passed -- MDL-75943.png
          162 kB
        12. (V) 13 Passed -- MDL-75943.png
          (V) 13 Passed -- MDL-75943.png
          90 kB
        13. (V) 16 Passed -- MDL-75943.png
          (V) 16 Passed -- MDL-75943.png
          124 kB
        14. (V) 18 Passed -- MDL-75943.png
          (V) 18 Passed -- MDL-75943.png
          109 kB
        15. (V) 4 Passed -- MDL-75943.png
          (V) 4 Passed -- MDL-75943.png
          206 kB
        16. (V) 6 Passed -- MDL-75943.png
          (V) 6 Passed -- MDL-75943.png
          63 kB
        17. (V) 8 Passed -- MDL-75943.png
          (V) 8 Passed -- MDL-75943.png
          61 kB
        18. MDL-75943.diff
          1 kB
        19. screenshot-1.png
          screenshot-1.png
          109 kB
        20. screenshot-2.png
          screenshot-2.png
          75 kB
        21. screenshot-3.png
          screenshot-3.png
          61 kB
        22. screenshot-4.png
          screenshot-4.png
          21 kB

        Issue Links

          Activity

            People

              mikelmartíncorrales Mikel Martín Corrales
              mikelmartíncorrales Mikel Martín Corrales
              Paul Holden Paul Holden
              Sara Arjona (@sarjona) Sara Arjona (@sarjona)
              Kim Jared Lucas Kim Jared Lucas
              Carlos Castillo, David Matamoros, Mikel Martín Corrales, Paul Holden
              Votes:
              0 Vote for this issue
              Watchers:
              8 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                24/Apr/23

                Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 1 day, 46 minutes
                  1d 46m