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

Boost theme - Lesson Styling

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      • Test with Boost and Clean.
      • In a course, insert a lesson and insert a few pages and questions.
      • In Lesson settings, set Appearance → Progress bar to "Yes".
      • As a student, go to the course and attempt the lesson.
      • Cross check the progress bar is correctly displayed.
      • Test with Boost and Clean.
      • As a teacher, insert a content page with title "Test content page", Page contents "Test content page" and Content 1 description "Start", jump "Test content page", Content 2 description "Previous", jump "Previous page", Content 3 description "Next", jump "Next page", Content 4 description "Last", jump "End of lesson", uncheck "Arrange content buttons horizontally?" and check "Display in menu?".
      • Preview that page.
      • Cross check the buttons are shown vertically aligned.
      Show
      Test with Boost and Clean. In a course, insert a lesson and insert a few pages and questions. In Lesson settings, set Appearance → Progress bar to "Yes". As a student, go to the course and attempt the lesson. Cross check the progress bar is correctly displayed. Test with Boost and Clean. As a teacher, insert a content page with title "Test content page", Page contents "Test content page" and Content 1 description "Start", jump "Test content page", Content 2 description "Previous", jump "Previous page", Content 3 description "Next", jump "Next page", Content 4 description "Last", jump "End of lesson", uncheck "Arrange content buttons horizontally?" and check "Display in menu?". Preview that page. Cross check the buttons are shown vertically aligned.
    • Affected Branches:
      MOODLE_34_STABLE, MOODLE_35_STABLE
    • Fixed Branches:
      MOODLE_34_STABLE, MOODLE_35_STABLE
    • Pull from Repository:
    • Pull 3.4 Branch:
    • Pull 3.5 Branch:
    • Pull Master Branch:
      MDL-61019-master

      Description

      There are a couple of issues with the styling of lessons in the boost theme up to and including 3.4.

      1. When resuming a lesson, the Yes No buttons for continuing when left off are not styles (Attachment 1).
      2. The progress bar at the bottom of a lesson is not styled (Attachment 2)
      3. Check box questions wrap the question text beneath the check box. (Attachment 2)
      4. Drop down questions need more space to the left of the actual box (Attachment 3). This is related to the problem above.
      5. Vertically aligning content buttons does nothing. (Attachments 4 & 5)\

      I have some CSS fixes that correct these problems, although I suspect hitting the underlying renderers would be more efficient:

      1. Yes no buttons:

      body#page-mod-lesson-view .lessonbutton {  
         background-color: #fff;
      {{    border-color: #ccc; }}
      {{    border-radius: 3.5px; }}
      {{    border-style: solid; }}
      {{    border-width: 1px; }}
      {{   color: #373a3c; }}
      {{    display: inline-block; }}
         font-size: 14px;
      {{    line-height: 17.5px; }}
      {{    padding: 7px 14px; }}
      {{    text-align: center; }}
         vertical-align: middle;
      }

      {{body#page-mod-lesson-view .lessonbutton:hover { }}
      {{   background-color: #e6e6e6; }}
      {{   color: #333; }}
      }

      2. Progress bar:

      {{.progress_bar_completed { }}
      {{   background: green; }}
      {{   color: white; }}
      {{   text-align: right; }}
      }

      3. Check and radio questions (this fix is almost certainly how it should not be done in the source, but it does correct the issue with custom CSS)

      {{body#page-mod-lesson-view [type="checkbox"], body#page-mod-lesson-view [type="radio"] { }}
      {{   float: left; }}
         margin-right: 1rem;
      }
      {{body#page-mod-lesson-view .answeroption label { display: initial; }}}

      4. Drop down questions. Again, this is not how it should be fixed in the renderers as I'm fooling with the bootstrap columns to fix the issue, but works in custom CSS.

      {{body#page-mod-lesson-view .answeroption .col-md-3 { width: auto; display: inline; float: none; }}}
      {{body#page-mod-lesson-view .answeroption .col-md-9 { width: auto; display: inline; float: none; }}}
      body#page-mod-lesson-view .answeroption label { width: 70%; display: inline-block !important }anchor

      5. Vertical align content buttons

      {{body#page-mod-lesson-view .vertical .singlebutton { display: block; margin-bottom: 0.1rem; }}}
      {{body#page-mod-lesson-view .vertical .singlebutton + .singlebutton { margin-left: 0; }}}
      {{body#page-mod-lesson-view .vertical .singlebutton .btn-secondary { min-width: 15em; }}}

       

        Attachments

        1. 1.PNG
          1.PNG
          28 kB
        2. 2.PNG
          2.PNG
          52 kB
        3. 3.PNG
          3.PNG
          44 kB
        4. 4.PNG
          4.PNG
          6 kB
        5. 5.PNG
          5.PNG
          40 kB
        6. MDL-61019-multichoice_question.png
          MDL-61019-multichoice_question.png
          117 kB

          Issue Links

            Activity

              People

              • Votes:
                4 Vote for this issue
                Watchers:
                7 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  10/Sep/18