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

Boost theme - Lesson Styling

    XMLWordPrintable

Details

    • MOODLE_34_STABLE, MOODLE_35_STABLE
    • MOODLE_34_STABLE, MOODLE_35_STABLE
    • MDL-61019-master
    • 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.

    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

              lucaboesch Luca Bösch
              bobg Bob Gilmore
              Bas Brands Bas Brands
              David Monllaó David Monllaó
              David Mudrák (@mudrd8mz) David Mudrák (@mudrd8mz)
              Ilya Tregubov, Kevin Percy, Mathew May, Mihail Geshoski, Shamim Rezaie, Huong Nguyen, Bas Brands, Mathew May, Amaia Anabitarte, Carlos Escobedo, Laurent David, Mikel Martín Corrales, Sabina Abellan, Sara Arjona (@sarjona)
              Votes:
              4 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                10/Sep/18