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

Gradebook floating headers are incorrectly styled

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Test in Classic and Boost.
      2. Make sure you have about 10 students enrolled in a course and about 10 grade items. You can manually create grade items if needed, or you can just create 10 activities.
      3. As a teacher, go to Gradebook -> Grader report.
      4. Reduce the browser window width and height so that you need to scroll to see all of the table contents.
      5. When not editing, scroll horizontally and verify:
        • Each of student name headers stays in place on the left of the screen
        • Each of the student name headers has the same background color as the row it's in (either white or grey)
      6. Enable editing.
        • Each of student name headers stays in place on the left of the screen
        • Each of the student name headers has the same background color as the row it's in (either white or grey)
      7. Verify the layout matches the following images:

      Show
      Test in Classic and Boost. Make sure you have about 10 students enrolled in a course and about 10 grade items. You can manually create grade items if needed, or you can just create 10 activities. As a teacher, go to Gradebook -> Grader report. Reduce the browser window width and height so that you need to scroll to see all of the table contents. When not editing, scroll horizontally and verify: Each of student name headers stays in place on the left of the screen Each of the student name headers has the same background color as the row it's in (either white or grey) Enable editing. Each of student name headers stays in place on the left of the screen Each of the student name headers has the same background color as the row it's in (either white or grey) Verify the layout matches the following images:
    • Affected Branches:
      MOODLE_28_STABLE, MOODLE_29_STABLE, MOODLE_30_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_38_STABLE
    • Pull 3.8 Branch:
      MDL-52138-38-take4
    • Pull Master Branch:
      MDL-52138-master-take4

      Description

      With the clean theme. When you go to the gradebook (i.e. /grade/report/grader/index.php) and the floating headers appear, then the backgrounds are all the same instead of matching the rows that they represent.

      Whilst attempting to solve this I also discovered that when gradebook editing is on (there is a 'edit' parameter) in the URL, that the 'odd' and 'even' rows flip over with no classes being added to the body tag etc. so that CSS can adapt.

      The solution is to have a class reacting to the code:

      $editparam = optional_param('edit', false, PARAM_BOOL); // Are we editing?
      ...
                      if ($editparam) {
                          $sectionclasses .= ' editing';                    
                      }
                      echo '<section id="region-main" class="' . $sectionclasses . '">';
      

      with the LESS:

      .path-grade-report-grader .gradeparent {
          tr:nth-of-type(odd) .cell {
              color: @themeTextColour;
              background-color: @themeColour;
              a, a:hover {
                  color: inherit;
              }
          }
          tr:nth-of-type(even) .cell {
              background-color: @bodyBackground;
          }
      }
       
      .path-grade-report-grader .gradeparent .floater {
          &.heading .cell.header {
              a {
                  color: @linkColor;
                  &:hover, &:focus {
                      color: @linkColorHover;
                  }
              }
          }
          .cell:nth-of-type(odd), &.lastrow .cell.header {
              color: @themeTextColour;
              background-color: @themeColour;
              a, a:hover, a:focus {
                  color: inherit;
              }
          }
          .cell:nth-of-type(even), &.heading .cell.header {
              background-color: @bodyBackground;
          }
      }
       
      // When editing things flip, sort of!
      .path-grade-report-grader #region-main.editing .gradeparent .floater {
          .cell:nth-of-type(even), .cell.header.controls  {
              color: @themeTextColour;
              background-color: @themeColour;
              a, a:hover, a:focus {
                  color: inherit;
              }
          }
          .cell:nth-of-type(odd), &.heading .cell.header, &.lastrow .cell.header {
              color: inherit;
              background-color: @bodyBackground;
              a {
                  color: @linkColor;
                  &:hover, &:focus {
                      color: @linkColorHover;
                  }
              }
          }
      }
      

      Where this from one of my private themes, to convert to 'bootstrapbase', '@themeColour' is the same as the navbar background and '@themeTextColour' the navbar text. The rest are standard bootstrap variables.

        Attachments

        1. 2015-11-15 22_00_13-Grades_ View.png
          2015-11-15 22_00_13-Grades_ View.png
          13 kB
        2. 2015-11-15 22_01_32-Grades_ View.png
          2015-11-15 22_01_32-Grades_ View.png
          12 kB
        3. 2015-11-15 22_02_57-Grades_ View.png
          2015-11-15 22_02_57-Grades_ View.png
          11 kB
        4. 2015-11-15 22_04_22-Grades_ View.png
          2015-11-15 22_04_22-Grades_ View.png
          13 kB
        5. boost.png
          boost.png
          159 kB
        6. classic.png
          classic.png
          166 kB
        7. Controls-cell.gif
          Controls-cell.gif
          116 kB
        8. MDL-52138-after-editing.png
          MDL-52138-after-editing.png
          266 kB
        9. MDL-52138-after-non-editing.png
          MDL-52138-after-non-editing.png
          282 kB
        10. Screenshot 2020-05-07 at 16.46.52.png
          Screenshot 2020-05-07 at 16.46.52.png
          904 kB
        11. striped-nonediting-inversed.png
          striped-nonediting-inversed.png
          92 kB

          Issue Links

            Activity

              People

              Assignee:
              lucaboesch Luca Bösch
              Reporter:
              gb2048 Gareth J Barnard
              Peer reviewer:
              Bas Brands
              Integrator:
              Jake Dallimore
              Tester:
              Janelle Barcega
              Participants:
              Component watchers:
              Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan, Bas Brands
              Votes:
              0 Vote for this issue
              Watchers:
              9 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:
                Fix Release Date:
                13/Jul/20

                  Time Tracking

                  Estimated:
                  Original Estimate - 0 minutes
                  0m
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 2 hours, 35 minutes
                  2h 35m