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

Convert Afterburner theme to use percentage layout in Moodle 2.3

    Details

    • Type: Bug
    • Status: Closed
    • Priority: Minor
    • Resolution: Fixed
    • Affects Version/s: 2.4
    • Fix Version/s: 2.4
    • Component/s: Themes
    • Labels:
    • Testing Instructions:
      Hide

      Test requires you have Hebrew (RTL) or another RTL lang pack installed.

      1. First ensure that 'Languages' are enabled in Moodle 2.3 prior to testing.
      2. Select Afterburner via Theme selector in usual way (NOT by URL)
      3. Test in all areas of Moodle using LTR language (English)
      4. Select Hebrew or another RTL language and test all areas of Moodle for consistency of design and usability
      Show
      Test requires you have Hebrew (RTL) or another RTL lang pack installed. First ensure that 'Languages' are enabled in Moodle 2.3 prior to testing. Select Afterburner via Theme selector in usual way (NOT by URL) Test in all areas of Moodle using LTR language (English) Select Hebrew or another RTL language and test all areas of Moodle for consistency of design and usability
    • Affected Branches:
      MOODLE_24_STABLE
    • Fixed Branches:
      MOODLE_24_STABLE
    • Pull Master Branch:
      wip_MDL-32412_afterburner

      Description

      Based on the work done to create BASE-RTL, a theme that works well in RTL as well as LTR,
      it is proposed to convert the page layout in Afterburner to use Matthew James Taylor's Perfect Holy Grail layout, a percentage layout designed to work in all browsers including IE7. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used in conjunction with a width. Instead, this design uses percentage widths and clever relative positioning.

      All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

      Maximum column content widths: To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div.

      Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:

      800 x 600
      Left & right columns: 162 pixels
      Center page: 357 pixels
      1024 x 768
      Left & right columns: 210 pixels
      Center page: 459 pixels

      RTL Support: This layout was chosen especially for its ability to work in Moodle when RTL languages are selected. The proposed changes require few modifications from the previous layout structure, which was Matthew James Taylor's No-Quirks Mode, but it will also include the changes proposed by Nadav Kavalerchik in MDL-32481 which include additional CSS for the custommenu when in RTL mode and also the ability for the theme to 'swap' side column contents, a much needed requirement requested by the RTL communities around the world.

        Gliffy Diagrams

          Attachments

            Issue Links

              Activity

                People

                • Votes:
                  2 Vote for this issue
                  Watchers:
                  6 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved:
                    Fix Release Date:
                    3/Dec/12