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

Content bank visual fixes

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-73562-master
    • Hide

      Test the content bank page sizes

      1. Login as admin
      2. Navigate to a course
      3. Navigate to the course content bank
      4. Add a few h5p packages (see attachment)
      5. On the content bank page verify the course / category selector is using the same width as the secondary navigation nav-tabs and is on it's own line
      6. Click on one of the h5p packages in the content bank
      7. Verify the edit and close button are aligned left and align with the h5p package content
      8. Verify the max width for the h5p package content is 960px and that the content is centred on the screen
      9. Click the edit button
      10. Verify the max width for the h5p editor is 960px and that the content is centred on the screen

      Test the h5p activity page size

      1. Login as admin
      2. Go to a course
      3. Add a h5p activity (use one from the attachments)
      4. View the h5p activity
      5. Verify the h5p activity content uses the full browser width
      6. Click 'Edit h5p content'
      7. Verify the max width for the h5p editor is 960px and that the content is centred on the screen

      Test if the h5p activity page and content bank still use the max width in theme Classic

      1. Login as admin
      2. Change the theme to Classic
      3. Navigate to the content bank (link in the navigation block home->Site pages->contentbank)
      4. Verify the content bank uses the full main container width
      5. Click on a h5p package
      6. Verify the h5p is rendered in the full main container width
      7. Edit the h5p
      8. Verify the h5p editor is using the full main container width (up to 960px which is the maximum width for the editor)
      9. Navigate to the course used in the previous test
      10. Open the h5p activity
      11. Verify the h5p activity uses the full main container width
      12. Edit the h5p activity
      13. Verify the h5p editor is using the full main container width (up to 960px which is the maximum width for the editor)
      Show
      Test the content bank page sizes Login as admin Navigate to a course Navigate to the course content bank Add a few h5p packages (see attachment) On the content bank page verify the course / category selector is using the same width as the secondary navigation nav-tabs and is on it's own line Click on one of the h5p packages in the content bank Verify the edit and close button are aligned left and align with the h5p package content Verify the max width for the h5p package content is 960px and that the content is centred on the screen Click the edit button Verify the max width for the h5p editor is 960px and that the content is centred on the screen Test the h5p activity page size Login as admin Go to a course Add a h5p activity (use one from the attachments) View the h5p activity Verify the h5p activity content uses the full browser width Click 'Edit h5p content' Verify the max width for the h5p editor is 960px and that the content is centred on the screen Test if the h5p activity page and content bank still use the max width in theme Classic Login as admin Change the theme to Classic Navigate to the content bank (link in the navigation block home->Site pages->contentbank) Verify the content bank uses the full main container width Click on a h5p package Verify the h5p is rendered in the full main container width Edit the h5p Verify the h5p editor is using the full main container width (up to 960px which is the maximum width for the editor) Navigate to the course used in the previous test Open the h5p activity Verify the h5p activity uses the full main container width Edit the h5p activity Verify the h5p editor is using the full main container width (up to 960px which is the maximum width for the editor)

      The alignment of the content bank has some issues after the pagewidth has changed

      Buttons alignment

      Preview

      The button is currently aligned to the right when previewing a content. The new design paradigm in Moodle is to have all buttons aligned to the left.

      I see two different approaches to this:
      a) Aligning the buttons with the H5P content

      In this solution we use the same padding / margin to visually align the buttons next to the rendered content. I’m not sure if this solution is the more scalable one, since paddings and margins can change from one content to another. I can’t predict what would happen with different content.

      b) Aligning the buttons to the left of the page

       

      This solution looks more robust and future-proof to me. It looks worse in full width page layouts though.

      Edit

      We have different problems when editing a content.

      Buttons

      Being a Moodle form, the buttons have a left padding that needs to be removed. By doing this, the buttons should align to the left of the page.

      Content

      We should align the content to the center of the page. If possible, the buttons should remain aligned to the left of the content when doing so.

       

       

      The result would be something like this:

       

      Notice that the content in this example is wider than the navigation tab, so the content seems misaligned if compared with the left side of it. I’m not sure, but I think that unless we set this page to a fixed-width instead of full-width this will probably keep happening.

      Context selector

      The current context selector is too small for users to read the whole course and category names in the dropdown menu.

      As a solution, we could print this selector in a whole row below the current controls.

      It would look like this:

        1. alighment_viewh5p.png
          133 kB
          Sara Arjona (@sarjona)
        2. alignment_viewassignment.png
          124 kB
          Sara Arjona (@sarjona)
        3. dialog-cards-620.h5p
          1.02 MB
          Bas Brands
        4. drag-and-drop-712.h5p
          1.04 MB
          Bas Brands
        5. h5psize.gif
          1.56 MB
          Sara Arjona (@sarjona)
        6. image-sequencing-3-110117.h5p
          889 kB
          Bas Brands
        7. MDL-73562_classic_Step 11.png
          399 kB
          Angelia Dela Cruz
        8. MDL-73562_classic_Step 13.png
          181 kB
          Angelia Dela Cruz
        9. MDL-73562_classic_Step 4.png
          79 kB
          Angelia Dela Cruz
        10. MDL-73562_classic_Step 8.png
          191 kB
          Angelia Dela Cruz
        11. MDL-73562_content bank_Step 10.png
          160 kB
          Angelia Dela Cruz
        12. MDL-73562_content bank_Step 5.png
          42 kB
          Angelia Dela Cruz
        13. MDL-73562_content bank_Step 7, 8.png
          293 kB
          Angelia Dela Cruz
        14. MDL-73562_h5p activity_Step 5.png
          327 kB
          Angelia Dela Cruz
        15. MDL-73562_h5p activity_Step 7.png
          174 kB
          Angelia Dela Cruz
        16. Screenshot 2022-01-13 at 07.55.06.png
          71 kB
          Bas Brands
        17. Screenshot 2022-01-13 at 07.55.39.png
          70 kB
          Bas Brands
        18. Screenshot 2022-01-13 at 07.56.13.png
          102 kB
          Bas Brands
        19. Screenshot 2022-01-13 at 07.56.47.png
          106 kB
          Bas Brands
        20. Screenshot 2022-01-13 at 07.57.27.png
          106 kB
          Bas Brands
        21. Screenshot 2022-01-13 at 07.57.52.png
          132 kB
          Bas Brands
        22. Screenshot 2022-01-13 at 07.57.58.png
          266 kB
          Bas Brands
        23. Screenshot 2022-01-13 at 08.01.19.png
          126 kB
          Bas Brands
        24. viewcontentbank_course.png
          62 kB
          Sara Arjona (@sarjona)
        25. viewcontentbank_sitehome.png
          67 kB
          Sara Arjona (@sarjona)

            basbrands Bas Brands
            basbrands Bas Brands
            Glyn (Mathew) May Glyn (Mathew) May
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            0 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 5 hours, 31 minutes
                5h 31m

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.