[
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)
