Fullwidth picture component with 100% Viewport Height option on the sample

config/directory.py

@@ -1,7 +1,8 @@
 from core import template
 
 page = {
-    'public'    :'pages/public'
+    'public'    :'pages/public',
+    'sample'    :'pages/sample'
 }
 
 static = [

handler.py

@@ -9,7 +9,9 @@ from    bottle                  import Bottle, route
 from    config                  import directory
 
 import  templates.plain.main	as template_public
+import	templates.SBModernBiz.main	as template_sample
 import  modules.public.home     as public_home
+import  modules.sample.sbmb     as sample_sbmb
 
 app = Bottle()
 
@@ -21,3 +23,12 @@ def index():
         }
     }
     return public_home.main().html(params)
+
+@app.route('/sample/sbmb')
+def index():
+    params = {
+        "mako":{
+            "website" : template_sample.main(directory.page["sample"], "sbmb")
+        }
+    }
+    return sample_sbmb.main().html(params)

modules/sample/sbmb.py

@@ -0,0 +1,45 @@
+from    mako.template      import Template
+from    config             import globalvar
+
+class main:
+
+    def __init__(self):
+        pass
+
+    def html(self, params):
+        title       = "CostaPy"
+
+        user_roles  = ["guest"] # A roles that user have
+        active_page = "Sample"  # Current active page name
+        
+        copyright   = "Copyright (C) 2022 Dita Aji Pratama"
+        greeting    = "A prime dashboard based on bootstrap 5"
+        
+        return Template(params["mako"]["website"]['index']).render(
+            title     = title,
+            navbar    = Template(params["mako"]["website"]['navbar']).render(
+                title       = title,
+                home        = "/",
+                menu        = globalvar.menu['public']['navbar'],
+                user_roles  = user_roles,
+                active_page = active_page
+            ),
+            components = {
+                "before" : [
+                    Template(params["mako"]["website"]['fullpic']).render(
+                        title="Hello World",
+                        message="Welcome to CostaPy",
+                        image="https://picsum.photos/1600/900",
+                        height="calc(100vh - 56px)", # navbar height = 56px
+                        navbar=True
+                    )
+                ],
+                "after" : []
+            },
+            footer    = Template(params["mako"]["website"]['footer']).render(
+                copyright   = copyright,
+            ),
+            container = Template(params["mako"]["website"]['container']).render(
+                greeting    = greeting
+            )
+        )

templates/SBModernBiz/html/components/fullpic.html

@@ -1,6 +1,6 @@
-<header class="py-5 bg-image-full" style="background-image: url('https://source.unsplash.com/wfh8dDlNFOk/1600x900')">
-  <div class="text-center my-5">
-    <h1 class="text-white fs-3 fw-bolder">Full Width Pics</h1>
-    <p class="text-white-50 mb-0">Landing Page Template</p>
+<header class="py-5 d-flex align-items-center justify-content-center" style="background-image: url('${image}'); height:${height}; margin-top:${'56px' if navbar else '0'}; ">
+  <div class="text-center">
+    <h1 class="text-white h1 fw-bolder">${title}</h1>
+    <p class="text-white-50 mb-0">${message}</p>
   </div>
 </header>