vassili/seitime-frappe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

feat: added section with image grid

Browse source
This commit is contained in:
Shivam Mishra 2020-06-04 16:54:28 +05:30
parent 8ab6ba1384
commit 342a51920e
4 changed files with 105 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
frappe/public/scss/page-builder.scss
View file

@ -282,3 +282,40 @@
.split-section-content {
margin-top: 2rem;
}
.image-grid {
display: flex;
flex-wrap: wrap;
width: 100%;
// Offset for padding
margin-right: -2px;
margin-left: -2px;
.grid-image {
overflow: hidden;
height: 15rem;
border: 2px solid #fff;
border-radius: $border-radius;
&.wide {
max-width: 75%;
width: 75%;
img {
width: 100%;
object-fit: cover;
}
}
&.narrow {
max-width: 25%;
width: 25%;
img {
height: 100%;
object-fit: cover;
}
}
}
}

0
frappe/website/web_template/section_with_image_grid/__init__.py Normal file
View file

18
frappe/website/web_template/section_with_image_grid/section_with_image_grid.html Normal file
View file

@ -0,0 +1,18 @@
<div class="section-with-image-grid">
<h2 class="section-title">{{ title }}</h2>
<p class="section-description">{{ subtitle }}</p>
<div class="image-grid">
{%- for index in ['1', '2', '3', '4'] -%}
{%- set image = values['image_' + index ] -%}
{%- set class = "narrow" if index in ['1', '4'] else "wide" -%}
{%- if image -%}
<div class="grid-image {{ class }}">
{{ frappe.render_template('templates/includes/image_with_blur.html', {
"src": image
}) }}
</div>
{%- endif -%}
{%- endfor -%}
</div>
</div>

50
frappe/website/web_template/section_with_image_grid/section_with_image_grid.json Normal file
View file

@ -0,0 +1,50 @@
{
"creation": "2020-06-04 14:43:39.753713",
"docstatus": 0,
"doctype": "Web Template",
"fields": [
{
"fieldname": "title",
"fieldtype": "Data",
"label": "Title",
"reqd": 0
},
{
"fieldname": "subtitle",
"fieldtype": "Data",
"label": "Subtitle",
"reqd": 0
},
{
"fieldname": "image_1",
"fieldtype": "Attach Image",
"label": "Image 1",
"reqd": 0
},
{
"fieldname": "image_2",
"fieldtype": "Attach Image",
"label": "Image 2",
"reqd": 0
},
{
"fieldname": "image_3",
"fieldtype": "Attach Image",
"label": "Image 3",
"reqd": 0
},
{
"fieldname": "image_4",
"fieldtype": "Attach Image",
"label": "Image 4",
"reqd": 0
}
],
"idx": 0,
"modified": "2020-06-04 14:46:21.697200",
"modified_by": "Administrator",
"name": "Section with Image Grid",
"owner": "Administrator",
"standard": 1,
"template": ""
}