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

The floating previous/next buttons for navigating book chapters pose usability issues on narrow screens

XMLWordPrintable

    • MOODLE_403_STABLE
    • MOODLE_403_STABLE
    • MDL-80383-403
    • MDL-80383-main
    • Hide

      Note:

      • These tests need to be done on both the Boost and Classic themes.
      • These tests need to be done on different screen widths - large, medium and small.
      • You can use an existing book or create a book with atleast 3 chapters.

       

      1. Access the book.
      2. Navigate to next and previous chapters using the next and previous buttons.
      3. Check that the next/previous buttons are outside the book content area and do not overlap the content.
      4. Resize the browser to a narrow width.
      5. Navigate chapters using the next and previous buttons.
      6. Check that the book content is using the full width of the browser and the next/previous buttons are floating over the chapter content.
      7. You should still be able to read the chapter content, scroll up/down and navigate between chapters without issues.

       

      Show
      Note: These tests need to be done on both the Boost and Classic themes. These tests need to be done on different screen widths - large, medium and small. You can use an existing book or create a book with atleast 3 chapters.   Access the book. Navigate to next and previous chapters using the next and previous buttons. Check that the next/previous buttons are outside the book content area and do not overlap the content. Resize the browser to a narrow width. Navigate chapters using the next and previous buttons. Check that the book content is using the full width of the browser and the next/previous buttons are floating over the chapter content. You should still be able to read the chapter content, scroll up/down and navigate between chapters without issues.  

      It is a good improvement for the purpose it is intended. However, in my case, on mobile devices (not mobile app; mobile view of webpage), the two buttons narrow the space for content. I have h5p content in my book chapters and the content of h5p don't look neat now; even, crossword puzzle h5p activity does not autosize, and many grids are not visible. It would be good to make these floating buttons optional to be selected on the admin side; maybe you can add it in the following update.
      For a faster solution for me now, is there are way to add couple lines of statement to the css of the theme to fix the issue, and disable the floating next/previous buttons while expanding the width of the page to full size? I have tried to add

      #mod_book-chaptersnavigation

      { display: none; }

      to the theme css and it hid the buttons, but didn't expand the width to full width. If you could tell me a quick solution to fix it (before any possibel update you may add later), I would really appreciate.

      P.S. Please see the attached mobile view screenshots.

      Thank you in advance.
      Tumer

        1. 1.png
          23 kB
          Tümer ALTAŞ
        2. 2.png
          26 kB
          Tümer ALTAŞ
        3. 3.png
          18 kB
          Tümer ALTAŞ
        4. book-1.png
          73 kB
          Rajneel Totaram
        5. 1-1.png
          14 kB
          Tümer ALTAŞ
        6. 2-1.png
          15 kB
          Tümer ALTAŞ
        7. 3-1.png
          79 kB
          Tümer ALTAŞ
        8. book-2.png
          71 kB
          Rajneel Totaram
        9. (1) 3 Passed -- (Main)MDL-80383.png
          127 kB
          Kim Jared Lucas
        10. (1) 6 Passed -- (Main)MDL-80383.png
          185 kB
          Kim Jared Lucas
        11. (1) 7 Passed -- (Main)MDL-80383.png
          137 kB
          Kim Jared Lucas
        12. (1) 8 Passed -- (Main)MDL-80383.png
          173 kB
          Kim Jared Lucas

            rjnl Rajneel Totaram
            tumeraltas Tümer ALTAŞ
            Glyn (Mathew) May Glyn (Mathew) May
            Mihail Geshoski Mihail Geshoski
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 50 minutes
                1h 50m

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