diff --git a/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl b/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl index 36cf491..f28ee83 100644 Binary files a/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl and b/dist/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl differ diff --git a/examples/01_hello_world/main.py b/examples/01_hello_world/main.py index 6f3063c..f7829a8 100644 --- a/examples/01_hello_world/main.py +++ b/examples/01_hello_world/main.py @@ -13,14 +13,14 @@ div.font_size = 4 btn = bHTML.ButtonPrimary("Click me", parent=app.sidebar) btn.w = 100 -toast_container = bHTML.ToastContainer(parent=app.main_area) +toast_container = bHTML.ToastContainer(parent=app.main) toast_container.position_bottom = 0 toast_container.position_end = 0 def onclick(_): - alert = bHTML.AlertSuccess("You clicked me!", parent=app.main_area) + alert = bHTML.AlertSuccess("You clicked me!", parent=app.main) alert.w = 25 toast = bHTML.Toast("You clicked me!", parent=toast_container) toast.animation = True diff --git a/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl b/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl index 36cf491..f28ee83 100644 Binary files a/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl and b/examples/01_hello_world/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl differ diff --git a/examples/02_image_filter/main.py b/examples/02_image_filter/main.py index bc48b03..e380733 100644 --- a/examples/02_image_filter/main.py +++ b/examples/02_image_filter/main.py @@ -25,7 +25,7 @@ image_input = bInputs.InputFile(label_text="choose image file", parent=app.sideb # FIXME: add filter option to InputFile class! image_input._input.set_attribute("accept", "image/*") -toast_container = bHTML.ToastContainer(parent=app.main_area) +toast_container = bHTML.ToastContainer(parent=app.main) toast_container.position_bottom = 0 toast_container.position_end = 0 @@ -37,7 +37,7 @@ def on_image_change(f, *args): img = sobel_image(np.array(img)) - output = bHTML.Image.from_numpy_array(img, parent=app.main_area) + output = bHTML.Image.from_numpy_array(img, parent=app.main) output.rounded = True output.rounded_size = 10 output.shadow = bHTML.Shadow.LARGE diff --git a/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl b/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl index 36cf491..f28ee83 100644 Binary files a/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl and b/examples/02_image_filter/resources/pyscript_bootstrap_templates-0.1.0-py3-none-any.whl differ diff --git a/pyscript_bootstrap_templates/bootstrap_templates.py b/pyscript_bootstrap_templates/bootstrap_templates.py index ad030ef..619b817 100644 --- a/pyscript_bootstrap_templates/bootstrap_templates.py +++ b/pyscript_bootstrap_templates/bootstrap_templates.py @@ -6,14 +6,16 @@ class PyScriptBootstrapApp(object): def __init__(self, parent_element:str = "pyscript_app"): self._main_div = bHTML.ContainerFluid(id="main") - self.main_div.w = 100 - self.main_div.h = 100 + self._main_div.w = 100 + self._main_div.vh_100 = True + + self._main_div.p = 0 self._parent_element = document.getElementById(parent_element) - self._parent_element.appendChild(self.main_div.element) + self._parent_element.appendChild(self._main_div.element) @property - def main_div(self) -> HTML.Div: + def main(self) -> HTML.Div: return self._main_div class PyScriptBootstrapDashboard(PyScriptBootstrapApp): @@ -21,26 +23,24 @@ class PyScriptBootstrapDashboard(PyScriptBootstrapApp): super().__init__(parent_element) - row = bHTML.Row(parent=self.main_div) - row.height = "100%" - row.width = "100%" - row.mt = 5 - row.display_property = bHTML.DisplayProperty.INLINE_FLEX - #row.set_attribute("style", "flex-shrink: 0;") - - self._sidebar = bHTML.Col(id="sidebar", col_sm=5, col_md=4, col_lg=3, col_xl=3, parent=row) + self._sidebar = bHTML.Col(id="sidebar", col_sm=5, col_md=4, col_lg=3, col_xl=3) self._navbar = bHTML.NavbarDark( - parent=self.main_div, + parent=self._main_div, brand = brand_name, nav_fill=True, toggle_button_for_target=self.sidebar ) - self._navbar.position = bHTML.Position.FIXED_TOP - self._navbar.p = 2 + self._navbar.position = bHTML.Position.STICKY_TOP + self._navbar.w = 100 + row = bHTML.Row(parent=self._main_div) + row.h = 100 + row.w = 100 + row.display_property = bHTML.DisplayProperty.INLINE_FLEX + row.append_child(self.sidebar) self._sidebar.add_classes("sidebar") self._sidebar.background_color = bHTML.BackgroundColor.LIGHT @@ -48,19 +48,18 @@ class PyScriptBootstrapDashboard(PyScriptBootstrapApp): self._sidebar.g = 2 self._sidebar.position = bHTML.Position.STATIC self._sidebar.collapsable = True - self._sidebar.height = "100%" self._sidebar.mw = 100 self._sidebar.shadow = bHTML.Shadow.LARGE - self._sidebar.overflow = bHTML.Overflow.SCROLL + self._sidebar.overflow = bHTML.Overflow.HIDDEN - self._modal = bHTML.Modal(parent=self.main_div, title="Modal") + self._modal = bHTML.Modal(parent=self._main_div, title="Modal") self._main_area = bHTML.Col(id="main_area", parent=row, col_lg=9, col_xl=9) self._main_area.p = 4 - self._main_area.overflow = bHTML.Overflow.SCROLL - self._main_area.height = "100%" + self._main_area.overflow = bHTML.Overflow.HIDDEN + #self._main_area.vh_100 = True self._main_area.mw = 100 def show_modal(self): @@ -86,5 +85,5 @@ class PyScriptBootstrapDashboard(PyScriptBootstrapApp): return self._modal @property - def main_area(self) -> HTML.Div: + def main(self) -> HTML.Div: return self._main_area