pageColumn.ftl
1 <#--
2 Macro: pageColumn
3 Description: Generates a container element for a full-height column on a page with an optional fixed width and custom CSS classes. The container includes a nested container for page content.
4 Parameters:
5 - id (string, optional): The ID of the container element.
6 - width (string, optional): The width of the container element. Default is 100%.
7 - class (string, optional): The CSS class of the container element. Use "p-" prefix to add padding classes, e.g. "p-2" or "p-5".
8 - height (string, optional): The height of the container element. Use "full" to set the height to 100% of the viewport height.
9 - title (string, optional): The title to be displayed at the top of the container element. If provided, the container will have a fixed height and a scrollable content area.
10 - flush (boolean, optional): If true, padding will not be added to the container. Default is false.
11 - center (boolean, optional): If true, content inside the container will be vertically and horizontally centered. Default is false.
12 - responsiveMenuSize (string, optional): If provided, the container will be hidden when the viewport width is less than the value. Accepts standard breakpoints (xs, sm, md, lg, xl, xxl).
13 - responsiveMenuTitle (string, optional): The title to be displayed at the top of the container in responsiveMenu mode. If provided, it will replace the regular title when the viewport size matches the responsiveMenuSize.
14 - responsiveMenuPlacement (string, optional): The placement of the responsiveMenu offcanvas container. Can be 'start' or 'end'. Default is 'end'.
15 - responsiveMenuBodyClass (string, optional): Additional CSS classes to be applied to the offcanvas-body in responsiveMenu mode.
16 - responsiveMenuClose (boolean, optional) : If true, close by default the offcanvas menu. Default is false.
17 -->
18 <#macro pageColumn id='' width='' class='' height='' title='' flush=false center=false responsiveMenuSize='' responsiveMenuTitle=title responsiveMenuPlacement='end' responsiveMenuBodyClass='' responsiveMenuClose=false>
19 <#if responsiveMenuSize != '' || responsiveMenuClose >
20 <div class="<#if responsiveMenuClose>offcanvas<#else>offcanvas-${responsiveMenuSize}</#if> offcanvas-${responsiveMenuPlacement} w-auto border-end overflow-x-hidden" style="<#if width != ''>min-width:${width}</#if>" tabindex="-1" <#if id != ''> id="${id}"</#if>>
21 <div class="offcanvas-header border-bottom text-break px-4">
22 <h2 class="offcanvas-title fw-bolder" id="template-create-page-roleLabel">${responsiveMenuTitle}</h2>
23 <button type="button" class="ms-3 border btn btn-light btn-rounded btn-icon" data-bs-dismiss="offcanvas" data-bs-target="#<#if id != ''>${id}</#if>" aria-label="Close">
24 <i class="ti ti-x fs-5"></i>
25 </button>
26 </div>
27 <div class="offcanvas-body p-0 overflow-hidden ${responsiveMenuBodyClass}">
28 </#if>
29 <div class="<#if width = '' >w-100<#else>border-start border-end</#if> overflow-auto ${class}" style="<#if width != '' >width:${width};min-width:${width};</#if><#if height='full'>height:calc(100vh - 64px);max-height:calc(100vh - 64px)</#if>">
30 <div class="container-fluid scrollable">
31 <#if title!=''><h1 class="fw-bolder <#if responsiveMenuSize !=''>d-none d-${responsiveMenuSize}-block</#if>">${title}</h1></#if>
32 <#nested>
33 </div>
34 </div>
35 <#if responsiveMenuSize != ''>
36 </div>
37 </div>
38 </#if>
39 </#macro>