Uploaded image for project: 'Airavata'
  1. Airavata
  2. AIRAVATA-3306

Wagtail: allow specifying a container for page rows

    XMLWordPrintableJSON

    Details

    • Type: Improvement
    • Status: In Progress
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Django Portal
    • Labels:
      None

      Description

      The BlankPage template assumes a container of class container-fluid for the entire page. But the max-width of Bootstrap's container class is nice to have for a lot of layouts, especially ones with text.

      Instead of rows as the top-level collection, it should instead be containers. We'll need a new Page type since this would break existing instances of BlankPage.

      Also, it's useful to be able to define a background for containers that spans the entire page even though the container itself may be fixed width. We could do the following:

      [div class="container-fluid" style="background-color: ..."]
        [div class="container"]
        [/div]
      [/div]
      

      However, that would result in twice as much padding as usual on the left and right for the doubly nested container (container-fluid and container both define padding-left and padding-right of 15px). Instead I think just having a wrapping div that can be styled will allow setting background colors and images as needed.

      New design
      • Container type is another attribute of rows
      • two types of container (optional, can be left blank): full width and max width
      • has an outer wrapping div for setting a background
      • each container has the following attributes
        • background styles - apply to container wrapper
        • background classes - apply to container wrapper
        • background image - apply to container wrapper
      Use cases

      See also

      TODO
      • [x] Make the various container options a StreamBlock with only one allowed option (max_num=1)
      • [x] add background styling attributes and test
      • [x] apply only to BlankPage template (not Cybergateway or Seagrid template)
      • [x] documentation
      Outdated info
      Old Design
      • MultiContainerPage (subclass of Page)
        • has one or more Containers
      • Container
        • has zero or more Rows
        • has an outer wrapping div for setting a background
        • attributes
          • type: "container" or "container-fluid"
          • background color: applied to wrapper div
          • banner image: applied to wrapper div. Sets background-image: ..., background-size: cover, background-repeat: no-repeat;
          • minimum height: necessary when defining a banner image with no content rows
          • background image: applied to wrapper div. Sets background-image only
          • wrapper inline styles: applied via style
          • inline styles:
          • wrapper custom classes:
          • custom classes:

        Attachments

          Activity

            People

            • Assignee:
              marcuschristie Marcus Christie
              Reporter:
              marcuschristie Marcus Christie
            • Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

              • Created:
                Updated: