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

feat(website): added new templates to page builder and refactored typography to be more consistent

Browse source
This commit is contained in:
Rushabh Mehta 2022-03-21 16:38:41 +05:30
parent 1b69b0b516
commit b66011de5a
29 changed files with 460 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frappe/public/scss/desk/avatar.scss
View file

@ -111,8 +111,8 @@
}
.avatar-large {
width: 72px;
height: 72px;
width: 64px;
height: 64px;
.standard-image {
font-size: var(--text-2xl);

69
frappe/public/scss/website/base.scss
View file

@ -1,3 +1,13 @@
$font-size-xs: 0.7rem;
$font-size-sm: 0.85rem;
$font-size-lg: 1.12rem;
$font-size-xl: 1.25rem;
$font-size-2xl: 1.5rem;
$font-size-3xl: 2rem;
$font-size-4xl: 2.5rem;
$font-size-5xl: 3rem;
$font-size-6xl: 4rem;
html {
height: 100%;
}
@ -16,43 +26,74 @@ img {
h1 {
font-size: $font-size-3xl;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.025em;
margin-bottom: 1rem;
margin-top: 3rem;
margin-bottom: 0.75rem;
@include media-breakpoint-up(sm) {
font-size: $font-size-5xl;
line-height: 2.5rem;
font-size: $font-size-4xl;
margin-top: 3.5rem;
margin-bottom: 1.25rem;
}
@include media-breakpoint-up(xl) {
font-size: $font-size-6xl;
line-height: 1;
font-size: $font-size-5xl;
margin-top: 4rem;
}
}
h2 {
font-size: $font-size-xl;
font-weight: 700;
font-size: $font-size-2xl;
margin-top: 2rem;
margin-bottom: 0.75rem;
@include media-breakpoint-up(sm) {
font-size: $font-size-2xl;
}
@include media-breakpoint-up(md) {
font-size: $font-size-3xl;
margin-top: 4rem;
margin-bottom: 1rem;
}
@include media-breakpoint-up(xl) {
font-size: $font-size-4xl;
margin-top: 4rem;
}
}
h3 {
font-size: $font-size-base;
font-weight: 600;
font-size: $font-size-xl;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
@include media-breakpoint-up(sm) {
font-size: $font-size-lg;
font-size: $font-size-2xl;
margin-top: 2.5rem;
}
@include media-breakpoint-up(md) {
font-size: $font-size-xl;
@include media-breakpoint-up(xl) {
font-size: $font-size-3xl;
margin-top: 3.5rem;
}
}
h4 {
font-size: $font-size-lg;
margin-top: 1rem;
margin-bottom: 0.5rem;
@include media-breakpoint-up(sm) {
font-size: $font-size-xl;
margin-top: 1.25rem;
}
@include media-breakpoint-up(xl) {
font-size: $font-size-2xl;
margin-top: 1.75rem;
}
a {
color: $body-color;
}
}
.btn.btn-lg {
font-size: $font-size-lg;
}

4
frappe/public/scss/website/blog.scss
View file

@ -57,12 +57,12 @@
.blog-card-footer {
display: flex;
align-items: center;
align-items: top;
margin-top: 0.5rem;
.avatar {
margin-top: 0.4rem;
margin-right: 0.5rem;
border-radius: 50%;
}
}
}

2
frappe/public/scss/website/index.scss
View file

@ -5,7 +5,6 @@
@import "../common/global";
@import "../common/icons";
@import "../common/alert";
@import 'base';
@import "../common/flex";
@import "../common/buttons";
@import "../common/modal";
@ -14,6 +13,7 @@
@import "../common/indicator";
@import "../common/controls";
@import "../common/awesomeplete";
@import 'base';
@import 'multilevel_dropdown';
@import 'website_image';
@import 'website_avatar';

110
frappe/public/scss/website/markdown.scss
View file

@ -1,30 +1,12 @@
$font-sizes-desktop: (
"sm": 0.75rem,
"base": 1rem,
"lg": 1.125rem,
"xl": 1.41rem,
"2xl": 1.6rem,
"3xl": 2rem
);
$font-sizes-mobile: (
"sm": 0.75rem,
"base": 1rem,
"lg": 1.125rem,
"xl": 1.25rem,
"2xl": 1.5rem,
"3xl": 1.75rem
);
.section-markdown > .from-markdown {
max-width: 50rem;
margin: auto;
}
.from-markdown {
color: $gray-700;
line-height: 1.7;
letter-spacing: -0.011em;
> * + * {
margin-top: 0.75rem;
margin-bottom: 0;
}
> :first-child {
margin-top: 0;
@ -47,6 +29,10 @@ $font-sizes-mobile: (
list-style: decimal;
}
p, li {
font-size: $font-size-lg;
}
li {
padding-top: 1px;
padding-bottom: 1px;
@ -87,86 +73,6 @@ $font-sizes-mobile: (
font-weight: 600;
}
h1, h2, h3, h4, h5, h6 {
color: $gray-900;
}
h2, h3, h4, h5, h6 {
font-weight: 600;
}
h1 {
font-size: map-get($font-sizes-mobile, '3xl');
line-height: 1.5;
letter-spacing: -0.021em;
font-weight: 700;
@include media-breakpoint-up(md) {
font-size: map-get($font-sizes-desktop, '3xl');
letter-spacing: -0.024em;
}
// for byline
& + p {
margin-top: 1.5rem;
font-size: map-get($font-sizes-mobile, 'xl');
letter-spacing: -0.014em;
line-height: 1.4;
@include media-breakpoint-up(md) {
font-size: map-get($font-sizes-desktop, 'xl');
letter-spacing: -0.0175em;
}
}
}
h2 {
font-size: map-get($font-sizes-mobile, '2xl');
line-height: 1.56;
letter-spacing: -0.015em;
margin-top: 4rem;
@include media-breakpoint-up(md) {
font-size: map-get($font-sizes-desktop, '2xl');
letter-spacing: -0.0195em;
}
}
h3 {
font-size: map-get($font-sizes-mobile, 'xl');
line-height: 1.56;
letter-spacing: -0.014em;
margin-top: 2.25rem;
@include media-breakpoint-up(md) {
font-size: map-get($font-sizes-desktop, 'xl');
letter-spacing: -0.0175em;
}
}
h4 {
font-size: map-get($font-sizes-mobile, 'lg');
line-height: 1.56;
letter-spacing: -0.014em;
margin-top: 2.5rem;
}
h5 {
font-size: map-get($font-sizes-mobile, 'base');
line-height: 1.5;
letter-spacing: -0.011em;
font-weight: 600;
margin-top: 2rem;
}
h6 {
font-size: map-get($font-sizes-mobile, 'sm');
line-height: 1.35;
font-weight: 600;
text-transform: uppercase;
margin-top: 1.5rem;
}
tr > td,
tr > th {
font-size: $font-size-sm;

102
frappe/public/scss/website/page_builder.scss
View file

@ -1,4 +1,7 @@
.hero-content {
margin-top: 3rem;
margin-bottom: 3rem;
.btn-primary {
margin-top: 1rem;
margin-right: 0.5rem;
@ -15,16 +18,23 @@
.hero-title, .hero-subtitle {
max-width: 42rem;
margin-top: 0rem;
margin-bottom: 0.5rem;
}
.lead {
font-weight: normal;
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.hero-subtitle {
@extend .lead;
font-weight: 400;
color: $gray-600;
font-size: 1rem;
font-size: $font-size-lg;
@include media-breakpoint-up(sm) {
font-size: 1.25rem;
font-size: $font-size-xl;
}
}
@ -42,10 +52,10 @@
.section-description {
max-width: 56rem;
margin-top: 0.5rem;
font-size: $font-size-base;
font-size: $font-size-lg;
@include media-breakpoint-up(lg) {
font-size: $font-size-lg;
@include media-breakpoint-up(media-breakpoint-up) {
font-size: $font-size-xl;
}
}
@ -226,14 +236,10 @@
}
}
.section-markdown > .from-markdown {
max-width: 42rem;
}
.section-cta {
padding: 3rem 2rem;
text-align: center;
background-color: $primary-light;
background-color: $gray-200;
border-radius: 0.75rem;
@include media-breakpoint-up(sm) {
@ -248,12 +254,7 @@
.title {
margin: 0 auto;
max-width: 36rem;
font-size: $font-size-2xl;
font-weight: 800;
line-height: 1.25;
@include media-breakpoint-up(md) {
font-size: $font-size-4xl;
}
}
.subtitle {
max-width: 36rem;
@ -270,11 +271,15 @@
margin-top: 0.5rem;
font-size: $font-size-xs;
}
.action {
margin-top: 0;
margin-bottom: 0;
}
}
.section-small-cta {
padding: 1.8rem;
background-color: lighten($primary, 42%);
background-color: var(--gray-200);
border-radius: 0.75rem;
display: flex;
flex-direction: column;
@ -294,26 +299,27 @@
}
}
.title {
max-width: 36rem;
font-size: $font-size-xl;
font-weight: 800;
line-height: 1.25;
@include media-breakpoint-up(md) {
font-size: $font-size-2xl;
}
.section-title {
line-height: 1;
margin-bottom: 0.25rem;
}
.subtitle {
max-width: 36rem;
font-size: $font-size-base;
color: $gray-900;
margin-bottom: 1.2rem;
margin-bottom: 0.5rem;
@include media-breakpoint-up(md) {
font-size: $font-size-lg;
margin-bottom: 0px;
}
}
.action {
margin-top: 0;
margin-bottom: 0;
}
}
.section-cta-container {
@ -379,6 +385,20 @@
}
}
.testimonial-author {
margin-top: 1rem;
display: flex;
align-items: center;
.avatar {
margin-right: 0.5rem;
}
p {
margin-bottom: 0;
}
}
.split-section-content.align-top {
margin-top: 2rem;
}
@ -514,12 +534,12 @@
@include media-breakpoint-up(md) {
grid-template-columns: repeat(2, 1fr);
gap: 6rem;
gap: 3rem 5rem;
}
.feature-title {
font-size: $font-size-xl;
font-weight: bold;
font-weight: 600;
@include media-breakpoint-up(md) {
font-size: $font-size-2xl;
@ -528,7 +548,7 @@
.feature-content {
font-size: $font-size-base;
margin-top: 1.75rem;
margin-top: 1.25rem;
@include media-breakpoint-up(xl) {
font-size: $font-size-lg;
@ -630,9 +650,14 @@
}
}
.section-title {
margin-top: 0;
margin-bottom: 0.5rem;
}
.section-title + .section-features, .section-description + .section-features {
&[data-columns="2"] {
margin-top: 3.75rem;
margin-top: 3rem;
}
&[data-columns="3"] {
@ -651,6 +676,10 @@
position: relative;
}
.feature-title {
margin-top: 0;
}
.feature-title, .feature-content {
margin-bottom: 0;
}
@ -666,3 +695,16 @@
.section-with-embed .embed-container {
margin-top: 2rem;
}
.section-video {
aspect-ratio: 16 / 9;
width: 100%;
cursor: pointer;
margin-bottom: 1rem;
}
.video-thumbnail {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}

2
frappe/public/scss/website/variables.scss
View file

@ -58,7 +58,7 @@ $font-size-lg: 1.125rem !default;
$font-size-xl: 1.25rem !default;
$font-size-2xl: 1.5rem !default;
$font-size-3xl: 1.875rem !default;
$font-size-4xl: 2.25rem !default;
$font-size-4xl: 2.5rem !default;
$font-size-5xl: 3rem !default;
$font-size-6xl: 4rem !default;

16
frappe/templates/includes/avatar_macro.html
View file

@ -1,18 +1,18 @@
{% macro avatar(user_id=None, css_style=None, size="avatar-small") %}
{% macro avatar(user_id=None, css_style=None, size="avatar-small", full_name=None, image=None) %}
{% set user_info = frappe.utils.get_user_info_for_avatar(user_id) %}
<span class="avatar {{ size }}" title="{{ user_info.name }}" style="{{ css_style or '' }}">
{% if user_info.image %}
<span class="avatar {{ size }}" title="{{ full_name or user_info.name }}" style="{{ css_style or '' }}">
{% if image or user_info.image %}
<img
class="avatar-frame standard-image"
src="{{ user_info.image }}"
title="{{ user_info.name }}">
src="{{ image or user_info.image }}"
title="{{ full_name or user_info.name }}">
</span>
{% else %}
<span
class="avatar-frame standard-image"
title="{{ user_info.name }}">
{{ frappe.utils.get_abbr(user_info.name).upper() }}
title="{{ full_name or user_info.name }}">
{{ frappe.utils.get_abbr(full_name or user_info.name).upper() }}
</span>
{% endif %}
</span>
{% endmacro %}
{% endmacro %}

7
frappe/templates/includes/blog/blogger.html
View file

@ -1,8 +1,9 @@
{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %}
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
<div class="media">
{{ square_image_with_fallback(src=blogger_info.avatar, size='small', alt=blogger_info.full_name, class='align-self-start mr-4 rounded') }}
<div class="media-body">
{{ avatar(full_name=blogger_info.full_name, image=blogger_info.avatar, size='avatar-large') }}
<div class="media-body ml-3">
<h5 class="mt-0">
<a href="/blog?blogger={{ blogger_info.name }}" class="text-dark">{{ blogger_info.full_name }}</a>
</h5>

7
frappe/templates/includes/web_block.html
View file

@ -3,6 +3,8 @@
'section-padding-top': web_block.add_top_padding,
'section-padding-bottom': web_block.add_bottom_padding,
'bg-light': web_block.add_shade,
'border-top': web_block.add_border_at_top,
'border-bottom': web_block.add_border_at_bottom,
},
web_block.css_class
]) -%}
@ -10,7 +12,10 @@
{%- if web_template_type == 'Section' -%}
{%- if not web_block.hide_block -%}
<section class="section {{ classes }}" data-section-idx="{{ web_block.idx | e }}"
data-section-template="{{ web_block.web_template | e }}">
data-section-template="{{ web_block.web_template | e }}"
{% if web_block.add_background_image -%}
style="background: url({{ web_block.background_image}}) no-repeat center center; background-size: cover;"
{%- endif %}>
{%- if web_block.add_container -%}
<div class="container">
{%- endif -%}

6
frappe/website/doctype/blog_post/blog_post.json
View file

@ -113,6 +113,7 @@
"depends_on": "eval:doc.content_type === 'Markdown'",
"fieldname": "content_md",
"fieldtype": "Markdown Editor",
"ignore_xss_filter": 1,
"label": "Content (Markdown)"
},
{
@ -213,7 +214,7 @@
"index_web_pages_for_search": 1,
"is_published_field": "published",
"links": [],
"modified": "2022-03-09 01:48:25.227295",
"modified": "2022-03-21 14:42:19.282612",
"modified_by": "Administrator",
"module": "Website",
"name": "Blog Post",
@ -245,6 +246,7 @@
"route": "blog",
"sort_field": "modified",
"sort_order": "ASC",
"states": [],
"title_field": "title",
"track_changes": 1
}
}

4
frappe/website/doctype/blog_post/templates/blog_post_row.html
View file

@ -1,3 +1,5 @@
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
{%- set post = doc -%}
<div class="blog-card col-sm-12 {{ 'col-md-8' if post.featured else 'col-md-4' }}">
<div class="card h-100">
@ -26,7 +28,7 @@
<p class="post-description text-muted">{{ post.intro }}</p>
</div>
<div class="blog-card-footer">
<img class="avatar website-image-extra-small" src="{{ post.avatar }}">
{{ avatar(full_name=post.full_name, image=post.avatar, size='avatar-medium') }}
<div class="text-muted">
<a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>
<div class="small">

2
frappe/website/doctype/web_page/web_page.js
View file

@ -18,7 +18,7 @@ frappe.ui.form.on('Web Page', {
frm.set_query('web_template', 'page_blocks', function() {
return {
filters: {
"type": 'Section'
"type": ['in', ['Section', 'Component']]
}
};
});

37
frappe/website/doctype/web_page_block/web_page_block.json
View file

@ -13,8 +13,12 @@
"add_container",
"add_top_padding",
"add_bottom_padding",
"add_border_at_top",
"add_border_at_bottom",
"add_shade",
"hide_block"
"hide_block",
"add_background_image",
"background_image"
],
"fields": [
{
@ -68,18 +72,42 @@
"default": "1",
"fieldname": "add_top_padding",
"fieldtype": "Check",
"label": "Add Space on Top"
"label": "Add Space at Top"
},
{
"default": "1",
"fieldname": "add_bottom_padding",
"fieldtype": "Check",
"label": "Add Space on Bottom"
"label": "Add Space at Bottom"
},
{
"default": "0",
"fieldname": "add_border_at_top",
"fieldtype": "Check",
"label": "Add Border at Top"
},
{
"default": "0",
"fieldname": "add_border_at_bottom",
"fieldtype": "Check",
"label": "Add Border at Bottom"
},
{
"default": "0",
"fieldname": "add_background_image",
"fieldtype": "Check",
"label": "Add Background Image"
},
{
"depends_on": "add_background_image",
"fieldname": "background_image",
"fieldtype": "Attach Image",
"label": "Background Image"
}
],
"istable": 1,
"links": [],
"modified": "2020-05-11 15:21:54.247652",
"modified": "2022-03-21 14:23:32.665108",
"modified_by": "Administrator",
"module": "Website",
"name": "Web Page Block",
@ -88,5 +116,6 @@
"quick_entry": 1,
"sort_field": "modified",
"sort_order": "DESC",
"states": [],
"track_changes": 1
}

13
frappe/website/js/website.js
View file

@ -423,6 +423,18 @@ $.extend(frappe, {
});
});
}
},
setup_videos: () => {
// converts video images into youtube embeds (via Page Builder)
$('.section-video').on('click', (e) => {
let $video = $(e.currentTarget);
let id = $video.data('youtubeId');
console.log(id);
$video.find(".video-thumbnail").hide();
$video.append(`
<iframe allowfullscreen="" class="section-video" frameborder="0" src="//youtube.com/embed/${id}?autoplay=1"></iframe>
`)
})
}
});
@ -647,5 +659,6 @@ $(document).on("page-change", function() {
frappe.ready(function() {
frappe.show_language_picker();
frappe.setup_videos();
frappe.socketio.init(window.socketio_port);
});

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

5
frappe/website/web_template/cover_image/cover_image.html Normal file
View file

@ -0,0 +1,5 @@
{{ frappe.render_template('templates/includes/image_with_blur.html', {
"src": url,
"alt": description,
"class": "full-width-image"
}) }}

34
frappe/website/web_template/cover_image/cover_image.json Normal file
View file

@ -0,0 +1,34 @@
{
"__islocal": true,
"__unsaved": 1,
"creation": "2022-03-15 14:17:49.482939",
"docstatus": 0,
"doctype": "Web Template",
"fields": [
{
"__islocal": 1,
"__unsaved": 1,
"fieldname": "url",
"fieldtype": "Attach Image",
"label": "Image",
"reqd": 0
},
{
"__islocal": 1,
"__unsaved": 1,
"fieldname": "description",
"fieldtype": "Data",
"label": "Description",
"reqd": 0
}
],
"idx": 0,
"modified": "2022-03-15 14:17:49.482939",
"modified_by": "Administrator",
"module": "Website",
"name": "Cover Image",
"owner": "Administrator",
"standard": 1,
"template": "",
"type": "Component"
}

4
frappe/website/web_template/full_width_image/full_width_image.json
View file

@ -1,4 +1,5 @@
{
"__unsaved": 1,
"creation": "2020-04-17 16:03:35.676241",
"docstatus": 0,
"doctype": "Web Template",
@ -17,8 +18,9 @@
}
],
"idx": 0,
"modified": "2020-09-11 15:52:40.656939",
"modified": "2022-03-15 14:17:17.563982",
"modified_by": "Administrator",
"module": "Website",
"name": "Full Width Image",
"owner": "Administrator",
"standard": 1,

4
frappe/website/web_template/hero/hero.html
View file

@ -9,12 +9,12 @@
{%- if primary_action or secondary_action -%}
<div class="hero-buttons">
{%- if primary_action -%}
<a class="btn btn-lg btn-primary" href="{{ primary_action }}">
<a class="btn btn-lg btn-dark" href="{{ primary_action }}">
{{ primary_action_label }}
</a>
{%- endif -%}
{%- if secondary_action -%}
<a class="btn btn-lg btn-primary-light" href="{{ secondary_action }}">
<a class="btn btn-lg btn-light ml-3" href="{{ secondary_action }}">
{{ secondary_action_label }}
</a>
{%- endif -%}

3
frappe/website/web_template/hero/hero.json
View file

@ -1,4 +1,5 @@
{
"__unsaved": 1,
"creation": "2020-04-19 15:26:23.140620",
"docstatus": 0,
"doctype": "Web Template",
@ -49,7 +50,7 @@
}
],
"idx": 0,
"modified": "2020-10-26 17:39:56.959008",
"modified": "2022-03-21 14:30:14.405261",
"modified_by": "Administrator",
"module": "Website",
"name": "Hero",

8
frappe/website/web_template/section_with_cta/section_with_cta.html
View file

@ -4,8 +4,12 @@
{%- if subtitle -%}
<p class="subtitle">{{ subtitle }}</p>
{%- endif -%}
<div class="mt-6">
<a href="{{ cta_url }}" class="btn btn-lg btn-primary">{{ cta_label }}</a>
<div class="mt-3">
<h4 class="action">
<a href="{{ cta_url }}" class="no-decoration">{{ cta_label }}
<svg class="icon icon-md"><use xlink:href="#icon-right"></use></svg>
</a>
</h4>
</div>
{%- if cta_description -%}
<div class="description">

8
frappe/website/web_template/section_with_small_cta/section_with_small_cta.html
View file

@ -1,14 +1,18 @@
<div class="section-cta-container">
<div class="section-small-cta">
<div>
<h2 class="title">{{ title or '' }}</h2>
<h3 class="section-title">{{ title or '' }}</h3>
{%- if subtitle -%}
<p class="subtitle">{{ subtitle }}</p>
{%- endif -%}
</div>
<div>
{%- if cta_label and cta_url -%}
<a href="{{ cta_url }}" class="btn btn-lg btn-primary">{{ cta_label }}</a>
<h4 class="action">
<a href="{{ cta_url }}" class="no-decoration">{{ cta_label }}
<svg class="icon icon-md"><use xlink:href="#icon-right"></use></svg>
</a>
</h4>
{%- endif -%}
</div>
</div>

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

31
frappe/website/web_template/section_with_testimonials/section_with_testimonials.html Normal file
View file

@ -0,0 +1,31 @@
{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
<div class="section-with-features">
{%- if title -%}
<h2 class="section-title">{{ title }}</h2>
{%- endif -%}
{%- if subtitle -%}
<p class="section-description">{{ subtitle }}</p>
{%- endif -%}
<div class="section-features" data-columns="{{ columns or 3 }}">
{%- for testimonial in testimonials -%}
<div class="section-feature">
<div>
{%- if testimonial.content -%}
<p class="feature-content">{{ testimonial.content }}</p>
{%- endif -%}
</div>
<div class="testimonial-author">
{{ avatar(full_name=testimonial.full_name, image=testimonial.image, size='avatar-medium') }}
<p>
{{ testimonial.full_name }}
{%- if testimonial.designation -%}
<br>{{ testimonial.designation }}
{%- endif -%}
</p>
</div>
</div>
{%- endfor -%}
</div>
</div>

73
frappe/website/web_template/section_with_testimonials/section_with_testimonials.json Normal file
View file

@ -0,0 +1,73 @@
{
"__unsaved": 1,
"creation": "2022-03-21 15:28:13.141783",
"docstatus": 0,
"doctype": "Web Template",
"fields": [
{
"fieldname": "title",
"fieldtype": "Data",
"label": "Title",
"reqd": 0
},
{
"fieldname": "subtitle",
"fieldtype": "Data",
"label": "Subtitle",
"reqd": 0
},
{
"default": "3",
"fieldname": "columns",
"fieldtype": "Select",
"label": "Columns",
"options": "2\n3\n4",
"reqd": 0
},
{
"fieldname": "testimonials",
"fieldtype": "Table Break",
"label": "Testimonials",
"reqd": 0
},
{
"fieldname": "content",
"fieldtype": "Small Text",
"label": "Content",
"reqd": 0
},
{
"fieldname": "full_name",
"fieldtype": "Data",
"label": "Full Name",
"reqd": 0
},
{
"fieldname": "designation",
"fieldtype": "Data",
"label": "Designation",
"reqd": 0
},
{
"fieldname": "image",
"fieldtype": "Attach Image",
"label": "Image",
"reqd": 0
},
{
"fieldname": "url",
"fieldtype": "Data",
"label": "URL",
"reqd": 0
}
],
"idx": 0,
"modified": "2022-03-21 15:39:39.044104",
"modified_by": "Administrator",
"module": "Website",
"name": "Section with Testimonials",
"owner": "Administrator",
"standard": 1,
"template": "",
"type": "Section"
}

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

24
frappe/website/web_template/section_with_videos/section_with_videos.html Normal file
View file

@ -0,0 +1,24 @@
<div class="section-with-features">
{%- if title -%}
<h2 class="section-title">{{ title }}</h2>
{%- endif -%}
{%- if subtitle -%}
<p class="section-description">{{ subtitle }}</p>
{%- endif -%}
<div class="section-features" data-columns="{{ columns or 3 }}">
{%- for video in videos -%}
<div class="section-feature">
<div class="section-video" data-youtube-id="{{ video.youtube_id }}">
<img class="video-thumbnail" src="https://i.ytimg.com/vi/{{ video.youtube_id }}/sddefault.jpg">
</div>
{%- if video.title -%}
<h3 class="feature-title">{{ video.title }}</h3>
{%- endif -%}
{%- if video.content -%}
<p class="feature-content">{{ video.content }}</p>
{%- endif -%}
</div>
{%- endfor -%}
</div>
</div>

61
frappe/website/web_template/section_with_videos/section_with_videos.json Normal file
View file

@ -0,0 +1,61 @@
{
"__unsaved": 1,
"creation": "2022-03-21 15:59:18.432776",
"docstatus": 0,
"doctype": "Web Template",
"fields": [
{
"fieldname": "title",
"fieldtype": "Data",
"label": "Title",
"reqd": 0
},
{
"fieldname": "subtitle",
"fieldtype": "Data",
"label": "Subtitle",
"reqd": 0
},
{
"default": "3",
"fieldname": "columns",
"fieldtype": "Select",
"label": "Columns",
"options": "2\n3\n4",
"reqd": 0
},
{
"fieldname": "videos",
"fieldtype": "Table Break",
"label": "Videos",
"reqd": 0
},
{
"fieldname": "youtube_id",
"fieldtype": "Data",
"label": "YouTube Video ID",
"reqd": 0
},
{
"fieldname": "title",
"fieldtype": "Data",
"label": "Title",
"reqd": 0
},
{
"fieldname": "content",
"fieldtype": "Small Text",
"label": "Content",
"reqd": 0
}
],
"idx": 0,
"modified": "2022-03-21 16:03:46.339279",
"modified_by": "Administrator",
"module": "Website",
"name": "Section with Videos",
"owner": "Administrator",
"standard": 1,
"template": "",
"type": "Section"
}