[C2] Page layout templates #6404
Description
We already have the possibility to create pages/blocks to show at different places in the platform.
Add the possibility to define page styles (layouts) per user profile or the Chamilo homepage.
These layouts should include the possibility to choose between different layout style (1, 2 or 3 columns), then to drag & drop pages/blocks into parts of this layout.
We have the database structure to manage pages, but we are missing a "page_layout" structure to store those layouts and a "page_layout_template" to store the templates.
As I see it, there is no way to structure this completely in a relational database model in a way that would be practical, so I think this would mean just relying on a basic JSON format to describe the structure of the template and the finalized structure of the page with all the components in it.
Components are either defined through direct links to block resources or as minimal HTML content (we still use the generic CSS layer of Chamilo to style those blocks, so no need to accept CSS customization at that level).
Work in progress, but the structure would be something like this:
CREATE TABLE page_layout (
id int,
url text, -- the URL on which this layout should be used as a layout. Still hesitating wether to make this a page id rather than a URL, but it would generate a risk of recursion if not controlled (a layout on a page cannot add the same page as a block inside the layout definition)
roles text, -- a list or roles to which this layout applies (otherwise they use the default layout)
page_layout_template_id int,
layout text, --- a JSON structure of the layout (structure to be defined)
created_at datetime,
created_by int,
updated_at int,
updated_by int
);
CREATE TABLE page_layout_template (
id int,
layout text, --- a JSON structure of the layout
);
An example of JSON format for a layout (template or not), although I'm not sure about the "width" being defined in the template (I think it should be defined in Chamilo's CSS):
{
"page": {
"id": "page_001",
"title": "Dynamic Web Page Layout",
"layout": {
"columns": [
{
"id": "column_1",
"width": "33.33%",
"blocks": [
{
"id": "block_1_1",
"type": "header",
"resource_id": "header_001",
"settings": {
"height": "100px",
"background_color": "#f0f0f0",
"text_align": "center"
}
},
{
"id": "block_1_2",
"type": "text",
"resource_id": "text_content_001",
"settings": {
"font_size": "16px",
"padding": "10px"
}
}
]
},
{
"id": "column_2",
"width": "33.33%",
"blocks": [
{
"id": "block_2_1",
"type": "image",
"resource_id": "image_001",
"settings": {
"width": "100%",
"alt_text": "Feature Image"
}
},
{
"id": "block_2_2",
"type": "button",
"resource_id": "button_001",
"settings": {
"label": "Click Me",
"url": "/action",
"style": "primary"
}
}
]
},
{
"id": "column_3",
"width": "33.33%",
"blocks": [
{
"id": "block_3_1",
"type": "list",
"resource_id": "list_001",
"settings": {
"list_style": "bullet",
"items_per_page": 5
}
}
]
}
]
}
}
}