airavata-issues mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Marcus Christie (Jira)" <j...@apache.org>
Subject [jira] [Updated] (AIRAVATA-3306) Wagtail: allow specifying a container for page rows
Date Mon, 04 May 2020 14:31:00 GMT

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



h5. Use cases
- background color for a container of rows that spans full width
-- example: red background portion of https://gateway.futurewater.indiana.edu/
- background image for a container of rows that spans responsive max-width
- banner background image that spans the full width and doesn't have any additional content
in it
-- example: banner image in https://gateway.futurewater.indiana.edu/


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


h5. TODO

- [x] Make the various container options a StreamBlock with only one allowed option ({{max_num=1}})
- [x] add background styling attributes and test
- [ ] apply only to BlankPage template (not Cybergateway or Seagrid template)
- [ ] documentation
- [ ] tests?

{panel:title=Outdated info|bgColor=#ddd}
h5. 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:
{panel}



  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.




h5. 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



h5. Use cases
- background color for a container of rows that spans full width
-- example: red background portion of https://gateway.futurewater.indiana.edu/
- background image for a container of rows that spans responsive max-width
- banner background image that spans the full width and doesn't have any additional content
in it
-- example: banner image in https://gateway.futurewater.indiana.edu/


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


h5. TODO

- [x] Make the various container options a StreamBlock with only one allowed option ({{max_num=1}})
- [x] add background styling attributes and test
- [ ] update layout of cybergateway_home_page.html too
- [ ] documentation
- [ ] tests?

{panel:title=Outdated info|bgColor=#ddd}
h5. 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:
{panel}




> 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. 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
> h5. Use cases
> - background color for a container of rows that spans full width
> -- example: red background portion of https://gateway.futurewater.indiana.edu/
> - background image for a container of rows that spans responsive max-width
> - banner background image that spans the full width and doesn't have any additional content
in it
> -- example: banner image in https://gateway.futurewater.indiana.edu/
> See also
> * https://getbootstrap.com/docs/4.4/layout/overview/
> h5. TODO
> - [x] Make the various container options a StreamBlock with only one allowed option ({{max_num=1}})
> - [x] add background styling attributes and test
> - [ ] apply only to BlankPage template (not Cybergateway or Seagrid template)
> - [ ] documentation
> - [ ] tests?
> {panel:title=Outdated info|bgColor=#ddd}
> h5. 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:
> {panel}



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

Mime
View raw message