[jira] [Updated] (AIRAVATA-3306) Wagtail: allow specifying a container for page rows

["Marcus Christie (Jira)" <ji...@apache.org>]

     [ https://issues.apache.org/jira/browse/AIRAVATA-3306?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Marcus Christie updated AIRAVATA-3306:
--------------------------------------
    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:
{code:xml}
<div class="container-fluid" style="background-color: ...">
  <div class="container">
  </div>
</div>
{code}

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.


h5. 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
    - background image: applied to wrapper div. Sets background-image only
    - wrapper inline styles: applied via style
    - inline styles:
    - wrapper custom classes:
    - custom classes:


See also
* https://getbootstrap.com/docs/4.4/layout/overview/

  was:
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:
{code:xml}
<div class="container-fluid" style="background-color: ...">
  <div class="container">
  </div>
</div>
{code}

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.


See also
* https://getbootstrap.com/docs/4.4/layout/overview/


> Wagtail: allow specifying a container for page rows
> ---------------------------------------------------
>
>                 Key: AIRAVATA-3306
>                 URL: https://issues.apache.org/jira/browse/AIRAVATA-3306
>             Project: Airavata
>          Issue Type: Improvement
>          Components: Django Portal
>            Reporter: Marcus Christie
>            Assignee: Marcus Christie
>            Priority: Major
>
> 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:
> {code:xml}
> <div class="container-fluid" style="background-color: ...">
>   <div class="container">
>   </div>
> </div>
> {code}
> 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.
> h5. 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
>     - background image: applied to wrapper div. Sets background-image only
>     - wrapper inline styles: applied via style
>     - inline styles:
>     - wrapper custom classes:
>     - custom classes:
> See also
> * https://getbootstrap.com/docs/4.4/layout/overview/



--
This message was sent by Atlassian Jira
(v8.3.4#803005)