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 class?contains("p-")>
20 <#assign classValue = class>
21 <#else>
22 <#if flush>
23 <#assign classValue = class>
24 <#else>
25 <#assign classValue = class + "p-2 p-md-5">
26 </#if>
27 </#if>
28 <#if responsiveMenuSize != '' || responsiveMenuClose >
29 <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>>
30 <div class="offcanvas-header border-bottom text-break px-4">
31 <h2 class="offcanvas-title fw-bolder" id="template-create-page-roleLabel">${responsiveMenuTitle}</h2>
32 <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">
33 <i class="ti ti-x fs-5"></i>
34 </button>
35 </div>
36 <div class="offcanvas-body ${responsiveMenuBodyClass} overflow-hidden p-0">
37 </#if>
38 <div <#if id != '' && responsiveMenuSize=''>id="${id}"</#if> class="lutece-column <#if width = '' >w-100<#else>border-start border-end</#if> overflow-auto ${classValue}" style="<#if width != '' >width:${width};min-width:${width};</#if>">
39 <div class="<#if center>d-flex flex-column justify-content-center align-items-center h-100<#else> container-fluid scrollable</#if><#if flush> p-0 m-0</#if>">
40 <#if title!=''><h1 class="fw-bolder mb-4 <#if responsiveMenuSize !=''>d-none d-${responsiveMenuSize}-block</#if>">${title}</h1></#if>
41 <#nested>
42 </div>
43 </div>
44 <#if responsiveMenuSize != ''>
45 </div>
46 </div>
47 </#if>
48 </#macro>