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)