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

MDL-39824 missed setting correct span calculations for 768px-979px and 1200px+ displays.

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Fixed
    • Icon: Minor Minor
    • 2.5.5, 2.6.2
    • 2.5.4, 2.6.1, 2.7
    • Themes
    • MOODLE_25_STABLE, MOODLE_26_STABLE, MOODLE_27_STABLE
    • MOODLE_25_STABLE, MOODLE_26_STABLE
    • wip-MDL-44074-master_4
    • Hide
      1. Select the Clean theme.
      2. Purge all caches.
      3. Create an empty course with the 'topics' format in the 'Miscellaneous' category.
      4. On the front page which uses columns3.php, turn editing on and move all blocks from side-post to side-pre, turn editing off. Ensure that the calendar is one of the blocks.
      5. Using Chrome 32 developer tools or similar. Under 'Settings' -> 'Overrides', turn on 'Show 'Emulation' view in console drawer', then show the 'drawer' to find on the 'Emulation' tab, tick 'Emulate screen' so that you can manipulate the screen size. Tick 'Shrink to fit' if required. See 'Emulate screen' screen shots on https://developers.google.com/chrome-developer-tools/docs/mobile-emulation.
      6. Set the screen width to 767px and confirm the layout is correct.
      7. Set the screen width to 768px and confirm the layout is correct.
      8. Set the screen width to 980px and confirm the layout is correct.
      9. Set the screen width to 1200px and confirm the layout is correct.
      10. On M2.6 and M2.7 repeat the screen width tests for the following pages:
      11. Course and category management page.
      12. Still on the Course and category management, click on the 'Miscellaneous' category to see that the course you created is there.
      13. Still on the Course and category management page, click on a course such that you have the management page displayed with the 'Viewing:
        Course categories and courses' shown and a 'courseid' as a parameter in the URL, giving three boxes of 'Course categories', the selected category and the selected course.
      Show
      Select the Clean theme. Purge all caches. Create an empty course with the 'topics' format in the 'Miscellaneous' category. On the front page which uses columns3.php, turn editing on and move all blocks from side-post to side-pre, turn editing off. Ensure that the calendar is one of the blocks. Using Chrome 32 developer tools or similar. Under 'Settings' -> 'Overrides', turn on 'Show 'Emulation' view in console drawer', then show the 'drawer' to find on the 'Emulation' tab, tick 'Emulate screen' so that you can manipulate the screen size. Tick 'Shrink to fit' if required. See 'Emulate screen' screen shots on https://developers.google.com/chrome-developer-tools/docs/mobile-emulation . Set the screen width to 767px and confirm the layout is correct. Set the screen width to 768px and confirm the layout is correct. Set the screen width to 980px and confirm the layout is correct. Set the screen width to 1200px and confirm the layout is correct. On M2.6 and M2.7 repeat the screen width tests for the following pages: Course and category management page. Still on the Course and category management, click on the 'Miscellaneous' category to see that the course you created is there. Still on the Course and category management page, click on a course such that you have the management page displayed with the 'Viewing: Course categories and courses' shown and a 'courseid' as a parameter in the URL, giving three boxes of 'Course categories', the selected category and the selected course.

      In MDL-39824 in the file 'theme/bootstrapbase/less/moodle/core.less' added the following LESS:

      .fluid-span (@columns) {
      		 
          width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      		 
          *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
      		 
      }
      		 
       
      		 
      .empty-region-side-post.used-region-side-pre #region-main.span8 {
      		 
          /** increase the span size by 1 **/
      		 
          .fluid-span(9);
      		 
      }
      		 
      .empty-region-side-post.used-region-side-pre #block-region-side-pre.span4 {
      		 
          /** decrease the span size by 1 **/
      		 
          .fluid-span(3);
      		 
      }

      However if you look in 'theme/bootstrapbase/less/bootstrap/responsive-1200px-min.less' you have different defined values for the column and gutter width, i.e. in the call:

      #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200);

      This does not immediately cause an issue with the Clean theme, but the Essential theme uses a 1-2-3 layout (and conceptually any other contributed theme with the same layout) and not a 2-1-3 layout. And thus because of the miscalculation of the column widths on larger screens you get an issue where the blocks are pushed down because the margins are just a little too big. This is fully documented on CONTRIB-4857 - https://tracker.moodle.org/browse/CONTRIB-4857?focusedCommentId=270345&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-270345.

      Therefore for accuracy the correct input variables need to be used to give the correct values. I currently do not know of any visible issue in core that can test this and welcome any that are considered to be caused by the issue.

      I have a fix and will be submitting it.

        1. 2014-02-25 12_58_32-Course and category management.png
          60 kB
          Gareth J Barnard
        2. 2014-02-25 13_00_45-Course and category management.png
          65 kB
          Gareth J Barnard
        3. 2014-02-25 13_06_10-Course and category management.png
          60 kB
          Gareth J Barnard
        4. 2014-02-25 13_10_42-Course and category management.png
          60 kB
          Gareth J Barnard

            gb2048 Gareth J Barnard
            gb2048 Gareth J Barnard
            Mary Evans Mary Evans
            Damyon Wiese Damyon Wiese
            Damyon Wiese Damyon Wiese
            Votes:
            0 Vote for this issue
            Watchers:
            13 Start watching this issue

              Created:
              Updated:
              Resolved:

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