def __init__(self, view):
super(CommentForm, self).__init__(view, 'myform')
comment = Comment()
layout = ColumnLayout(
ColumnOptions('left', size=ResponsiveSize(lg=6)),
ColumnOptions('right', size=ResponsiveSize(lg=6)))
# .add_child() returns the added child here:
row = self.add_child(Div(view).use_layout(layout))
left_column = row.layout.columns['left']
# ... and .use_layout() returns the Widget it is called on
section = Div(view).use_layout(FormLayout())
left_column.add_child(section)
email_input = TextInput(self, comment.fields.email_address)
section.layout.add_input(email_input)
inline_section = Div(view).use_layout(InlineFormLayout())
left_column.add_child(inline_section)
text_input = TextInput(self, comment.fields.text)
inline_section.layout.add_input(text_input)
right_column = row.layout.columns['right']
right_column.add_child(
LiteralHTML.from_restructured_text(
view, '''
This form has two columns. Inputs go
into the left one and this text into the right one.
Some inputs are stacked and others are inlined.
Arbitrarily complicated layouts can be created like this.'''))
def customise_widget(self):
self.container = self.widget.add_child(Div(self.view))
self.container.use_layout(Container(fluid=False))
self.centre = self.container.add_child(Div(self.view))
column_layout = ColumnLayout(
ColumnOptions('left', ResponsiveSize(md=4)),
ColumnOptions('right', ResponsiveSize(md=8)))
self.centre.use_layout(column_layout)
def __init__(self, view, bookmarks):
super(MyCustomPage, self).__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('secondary', size=ResponsiveSize(md=3)),
ColumnOptions('main', size=ResponsiveSize(md=9))).with_slots()
self.layout.contents.use_layout(contents_layout)
menu = Nav(view).use_layout(TabLayout()).with_bookmarks(bookmarks)
self.layout.header.add_child(menu)
def test_column_layout_unspecified_size(web_fixture):
"""Specifying a size of True for a device class means that the size is automatically computed by dividing available
space equally amongst all the columns so specified."""
layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(lg=True)), ColumnOptions('column_b', size=ResponsiveSize(lg=True)))
widget = Div(web_fixture.view)
widget.use_layout(layout)
column_a, column_b = widget.children
assert 'col-lg' in column_a.get_attribute('class')
assert 'col-lg' in column_b.get_attribute('class')
def add_four(self):
layout = ColumnLayout(ColumnOptions('first', ResponsiveSize(md=6)),
ColumnOptions('second', ResponsiveSize(md=6)),
ColumnOptions('third', ResponsiveSize(md=6)),
ColumnOptions('fourth', ResponsiveSize(md=6)))
div = Div(self.view).use_layout(layout)
self.body.add_child(div)
message = '6/12ths on md and larger, else defaults to 12/12ths'
div.layout.columns['first'].add_child(P(self.view, text=message))
div.layout.columns['second'].add_child(P(self.view, text=message))
div.layout.columns['third'].add_child(P(self.view, text=message))
div.layout.columns['fourth'].add_child(P(self.view, text=message))
def __init__(self, view):
super(PageLayoutPage, self).__init__(view)
self.body.use_layout(Container())
column_layout = ColumnLayout(
ColumnOptions('left', ResponsiveSize(md=4)),
ColumnOptions('right', ResponsiveSize(md=8)))
self.use_layout(PageLayout(contents_layout=column_layout))
self.layout.header.add_child(P(view, text='The header'))
self.layout.footer.add_child(P(view, text='The footer'))
left = column_layout.columns['left']
left.add_child(P(view, text='To the left'))
right = column_layout.columns['right']
right.add_child(P(view, text='To the right'))
def __init__(self, view, main_bookmarks):
super().__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('main', ResponsiveSize(lg=6))).with_slots()
self.layout.contents.use_layout(contents_layout)
menu = Nav(view).use_layout(TabLayout()).with_bookmarks(main_bookmarks)
self.layout.header.add_child(menu)
def test_order_of_columns(web_fixture):
"""Columns are added in the order given to the ColumnLayout constructor, and the Div representing each column
can be obtained using dictionary access on Layout.columns."""
fixture = web_fixture
widget = Div(fixture.view).use_layout(
ColumnLayout(ColumnOptions('column_name_a'),
ColumnOptions('column_name_b')))
column_a = widget.layout.columns['column_name_a']
column_b = widget.layout.columns['column_name_b']
first_column, second_column = widget.children
assert first_column is column_a
assert second_column is column_b
def test_column_layout_basics(web_fixture):
"""A ColumnLayout turns its Widget into a sequence of columns, each of which is a Div laid with the given width per device class."""
layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(lg=4)),
ColumnOptions('column_b', size=ResponsiveSize(lg=8)))
widget = Div(web_fixture.view)
assert not widget.has_attribute('class')
assert not widget.children
widget.use_layout(layout)
assert widget.get_attribute('class') == 'row'
column_a, column_b = widget.children
assert 'col-lg-4' in column_a.get_attribute('class')
assert 'col-lg-8' in column_b.get_attribute('class')
def assemble(self):
page_layout = PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main', size=ResponsiveSize(lg=6))).with_slots())
self.define_page(HTML5Page).use_layout(page_layout)
find = self.define_view('/', title='Addresses')
find.set_slot('main', AddressBookPanel.factory())
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Responsive disclosure demo')
home.set_slot('main', NewInvestmentForm.factory())
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='File upload demo')
home.set_slot('main', CommentPostPanel.factory())
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Themed example')
home.set_slot('main', SomeWidget.factory())
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Basic HTML Inputs demo')
home.set_slot('main', ExampleForm.factory('myform'))
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
home = self.define_view('/', title='Dynamic content demo')
home.set_slot('main', AllocationDetailForm.factory())
def assemble(self):
contents_layout = ColumnLayout(
ColumnOptions('main', ResponsiveSize(lg=6))).with_slots()
page_layout = PageLayout(contents_layout=contents_layout,
document_layout=Container())
self.define_page(HTML5Page).use_layout(page_layout)
self.define_user_interface('/',
PageFlowExampleUI,
name='pageflow',
slot_map={'main': 'main'})
def __init__(self, view):
super().__init__(view)
self.use_layout(
PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots()))
navbar = Navbar(view).use_layout(NavbarLayout())
navbar.layout.set_brand_text('My Site')
self.layout.header.add_child(navbar)
def __init__(self, view, bookmarks):
super().__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('main', size=ResponsiveSize())).with_slots()
self.layout.contents.use_layout(contents_layout)
layout = ResponsiveLayout('md', colour_theme='dark', bg_scheme='primary')
navbar = Navbar(view, css_id='my_nav').use_layout(layout)
navbar.layout.set_brand_text('Address book')
navbar.layout.add(Nav(view).with_bookmarks(bookmarks))
self.layout.header.add_child(navbar)
def test_column_clearfix(web_fixture):
"""If a logical row spans more than one visual row for a device size, bootstrap clearfixes are
automatically inserted to ensure cells in resultant visual rows are neatly arranged.
"""
# Case: Adding a correct clearfix in the right place
wrapping_layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(md=8), offsets=ResponsiveSize(md=2)),
ColumnOptions('column_b', size=ResponsiveSize(md=2), offsets=ResponsiveSize(md=2))
)
widget = Div(web_fixture.view).use_layout(wrapping_layout)
[column_a, clearfix, column_b] = widget.children
assert [column_a, column_b] == [i for i in wrapping_layout.columns.values()]
assert 'clearfix' in clearfix.get_attribute('class')
assert 'hidden-sm' in clearfix.get_attribute('class')
# Case: When clearfix needs to take "implicit" sizes of smaller device classes into account
wrapping_layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(xs=8), offsets=ResponsiveSize(xs=2)),
ColumnOptions('column_b', size=ResponsiveSize(lg=2), offsets=ResponsiveSize(lg=2))
)
widget = Div(web_fixture.view).use_layout(wrapping_layout)
[column_a, clearfix, column_b] = widget.children
assert [column_a, column_b] == [i for i in wrapping_layout.columns.values()]
assert 'clearfix' in clearfix.get_attribute('class')
assert 'hidden-md' in clearfix.get_attribute('class')
# Case: When no clearfix must be added
non_wrapping_layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(xs=2), offsets=ResponsiveSize(xs=2)),
ColumnOptions('column_b', size=ResponsiveSize(xs=2))
)
widget = Div(web_fixture.view).use_layout(non_wrapping_layout)
[column_a, column_b] = widget.children
assert [column_a, column_b] == [i for i in non_wrapping_layout.columns.values()]
def assemble(self):
page_layout = PageLayout(
document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(lg=6))).with_slots())
self.define_page(HTML5Page).use_layout(page_layout)
account_user_interface_factory = self.define_user_interface(
'/a_ui',
AccountUI, {'main_slot': 'main'},
name='test_ui',
bookmarks=fixture.bookmarks)
fixture.account_user_interface_factory = account_user_interface_factory
def __init__(self, view, home_bookmark):
super(AddressAppPage, self).__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('main', ResponsiveSize(lg=6))).with_slots()
self.layout.contents.use_layout(contents_layout)
login_session = LoginSession.for_current_session()
if login_session.is_logged_in():
logged_in_as = login_session.account.email
else:
logged_in_as = 'Not logged in'
self.layout.header.add_child(P(view, text=logged_in_as))
self.layout.header.add_child(Nav(view).use_layout(TabLayout()).with_bookmarks([home_bookmark]))
def test_column_offsets(web_fixture):
"""You can optionally specify space to leave empty (an offset) before a column at specific device sizes."""
layout = ColumnLayout(ColumnOptions('column_a', size=ResponsiveSize(xl=2), offsets=ResponsiveSize(xs=2, sm=4, md=6, lg=3, xl=1)))
widget = Div(web_fixture.view).use_layout(layout)
[column_a] = layout.columns.values()
assert 'col-xl-2' in column_a.get_attribute('class')
assert 'offset-lg-3' in column_a.get_attribute('class')
assert 'offset-2' in column_a.get_attribute('class')
assert 'offset-sm-4' in column_a.get_attribute('class')
assert 'offset-md-6' in column_a.get_attribute('class')
assert 'offset-xl-1' in column_a.get_attribute('class')
def assemble(self):
contents_layout = ColumnLayout(ColumnOptions('main', ResponsiveSize())).with_slots()
self.define_page(HTML5Page).use_layout(PageLayout(document_layout=Container(),
contents_layout=contents_layout))
home = self.define_view('/', title='Layout demo')
home.set_slot('main', CommentForm.factory())
header_text = lots_of('This text is located in the header,'
'which is added by the PageLayout. ')
home.set_slot('header', P.factory(text=header_text))
footer_text = lots_of('The footer spans the bottom of all the '
'columns on a PageLayout ')
home.set_slot('footer', P.factory(text=footer_text))
def assemble(self):
self.define_page(HTML5Page).use_layout(
PageLayout(document_layout=Container(),
contents_layout=ColumnLayout(
ColumnOptions('main',
size=ResponsiveSize(
lg=6))).with_slots()))
accounts = self.define_user_interface(
'/accounts',
AccountUI, {'main_slot': 'main'},
name='test_ui',
bookmarks=fixture.account_bookmarks)
login_bookmark = accounts.get_bookmark(relative_path='/login')
self.define_user_interface('/inbox',
InboxUI, {'main_slot': 'main'},
name='test_ui',
login_bookmark=login_bookmark,
get_queues=get_queues)
def __init__(self, view, bookmarks):
super(FundingRequestPage, self).__init__(view)
self.head.add_css(Url('/css/pyconza2019.css'))
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(
ColumnOptions('main', size=ResponsiveSize())).with_slots()
self.layout.contents.use_layout(contents_layout)
layout = ResponsiveLayout('md',
colour_theme='dark',
bg_scheme='primary')
navbar = Navbar(view, css_id='my_nav').use_layout(layout)
navbar.layout.set_brand_text('PyConZA 2019 Financial Aid')
navbar.layout.add(Nav(view).with_bookmarks(bookmarks))
if LoginSession.for_current_session().is_logged_in():
navbar.layout.add(LogoutForm(view))
self.layout.header.add_child(navbar)
def __init__(self, view):
super(AddressBookPage, self).__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(
ColumnOptions('main', ResponsiveSize(md=4))).with_slots()
self.layout.contents.use_layout(contents_layout)
def __init__(self, view):
super().__init__(view)
self.use_layout(PageLayout(document_layout=Container()))
contents_layout = ColumnLayout(ColumnOptions('main', size=ResponsiveSize(lg=6))).with_slots()
self.layout.contents.use_layout(contents_layout)