small bottstrap template improvements

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

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

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.w = 100
-        self.main_div.h = 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)
+        self._sidebar = bHTML.Col(id="sidebar", col_sm=5, col_md=4, col_lg=3, col_xl=3)
-        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._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.position = bHTML.Position.STICKY_TOP
-        self._navbar.p = 2
+        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.overflow = bHTML.Overflow.HIDDEN
-        self._main_area.height = "100%"
+        #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