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) 3 Passed -- (Main)MDL-80383.png
          (1) 3 Passed -- (Main)MDL-80383.png
          127 kB
        2. (1) 6 Passed -- (Main)MDL-80383.png
          (1) 6 Passed -- (Main)MDL-80383.png
          185 kB
        3. (1) 7 Passed -- (Main)MDL-80383.png
          (1) 7 Passed -- (Main)MDL-80383.png
          137 kB
        4. (1) 8 Passed -- (Main)MDL-80383.png
          (1) 8 Passed -- (Main)MDL-80383.png
          173 kB
        5. 1.png
          1.png
          23 kB
        6. 1-1.png
          1-1.png
          14 kB
        7. 2.png
          2.png
          26 kB
        8. 2-1.png
          2-1.png
          15 kB
        9. 3.png
          3.png
          18 kB
        10. 3-1.png
          3-1.png
          79 kB
        11. book-1.png
          book-1.png
          73 kB
        12. book-2.png
          book-2.png
          71 kB

            rjnl Rajneel Totaram
            tumeraltas Tümer ALTAŞ
            Mathew May 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.