Uploaded image for project: 'Sakai'
  1. Sakai
  2. SAK-40134

Lessons and Overview -- Reduce excessive white space to improve academic content real estate

    XMLWordPrintable

    Details

    • Type: Feature Request
    • Status: OPEN
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: 11.5 [Tentative], 12.2, 19.0
    • Fix Version/s: None
    • Component/s: Home, Lessons
    • Labels:
    • Test Plan:
      Hide

      Please add a Test Plan here.

      Show
      Please add a Test Plan here.

      Description

      REQUEST:

      Modify the CSS within the Lessons and Overview (formerly "Home") tools to reduce excess white space.

      BACKGROUND:

      As a learning platform, our academic content must be in the forefront. Currently, there is too much unnecessary white space (margins and padding) that steals valuable teaching real estate on the page. A certain amount of margins or padding is necessary to separate elements, such as the left tool menu or the top header. However, there is a little extra white space on the Overview tool (when you use a heading) and there is an overly excessive amount of white space in Lessons regardless of the content on the page.  This white space pushes content lower on the page, forcing users to scroll down to find information.  It can also frustrate instructional designers that want to make the most of the available screen real estate.

      OVERVIEW TOOL

      There is only a little extra white space in the Overview tool (formerly the Home tool). If the opening content on the page is a heading, additional top margin or padding is added. This is not a critical item, but some space could be gained here.

      Here is a screenshot of space that could be recovered in the student view of the Overview tool:

      For the above, the change made:

      • h1, h2, h3, h4, h5, h6: changed "margin: 0.75em 0 0.5em 0;" to "margin: 0 0 0.5em 0;" in _defaults.scss

      NOTE: I simply used the "Inspect Element" in Google Chrome to modify the CSS. A thorough review of how these changes may impact other tools should be done. If necessary, adjustments should be done to provide appropriate spacing in Overview but not negatively impact other tools.

      LESSONS TOOL

      The Lessons tool is awesome. It provides great functionality to add content, link to activities, embed media, and much more. The tool eats up screen space, however. This is especially evident in the student or access view of a page. There is unnecessary top padding or margins that produce too much white space on Lessons pages. We should eliminate as much of this wasted space as possible to maximize the content we can display for our users on desktop and mobile views.

      Here is a screenshot of space that could be recovered in the student view of Lessons:

      For the above, the changes made included:

      • .right-col: removed "padding-top: 3px;" in Simplepagetool.css?version=1528d2fe
      • .cols1: removed "padding-top: 35px;" in Simplepagetool.css?version=1528d2fe
      • .column: removed "padding: 15px 7px;" in Simplepagetool.css?version=1528d2fe
      • .column: removed "padding-top: 25px;" in Simplepagetool.css?version=1528d2fe
      • h1, h2, h3, h4, h5, h6: changed "margin: 0.75em 0 0.5em 0;" to "margin: 0 0 0.5em 0;" in _defaults.scss
      • .itemclass: changed "margin-top: 2.0em !important;" to "margin-top: 0 !important;" in Simplepagetool.css?version=1528d2fe
      • (I did not change .mainList div.textType, .mainList div.multimediaType, .mainList div.checklistType in Simplepagetool.css?version=1528d2fe. There are margins here that could also be adjusted, but they seemed to be okay or helpful so I didn't adjust them.)

      NOTE: I simply used the "Inspect Element" in Google Chrome to modify the CSS. A thorough review of how these changes may impact other tools should be done. If necessary, adjustments should be done to provide appropriate spacing in Lessons but not negatively impact other tools.

      Thank you for considering this feature request.

        Gliffy Diagrams

          Attachments

            Activity

              People

              • Assignee:
                maintenanceteam Core Team
                Reporter:
                alanregan Alan Regan
              • Votes:
                4 Vote for this issue
                Watchers:
                6 Start watching this issue

                Dates

                • Created:
                  Updated:

                  Git Source Code