From b66011de5ad79d7264a58a5bcb210a54231e583b Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Mon, 21 Mar 2022 16:38:41 +0530 Subject: [PATCH 01/11] feat(website): added new templates to page builder and refactored typography to be more consistent --- frappe/public/scss/desk/avatar.scss | 4 +- frappe/public/scss/website/base.scss | 67 +++++++++-- frappe/public/scss/website/blog.scss | 4 +- frappe/public/scss/website/index.scss | 2 +- frappe/public/scss/website/markdown.scss | 112 ++---------------- frappe/public/scss/website/page_builder.scss | 102 +++++++++++----- frappe/public/scss/website/variables.scss | 2 +- frappe/templates/includes/avatar_macro.html | 16 +-- frappe/templates/includes/blog/blogger.html | 7 +- frappe/templates/includes/web_block.html | 7 +- .../website/doctype/blog_post/blog_post.json | 6 +- .../blog_post/templates/blog_post_row.html | 4 +- frappe/website/doctype/web_page/web_page.js | 2 +- .../web_page_block/web_page_block.json | 37 +++++- frappe/website/js/website.js | 13 ++ .../web_template/cover_image/__init__.py | 0 .../web_template/cover_image/cover_image.html | 5 + .../web_template/cover_image/cover_image.json | 34 ++++++ .../full_width_image/full_width_image.json | 4 +- frappe/website/web_template/hero/hero.html | 4 +- frappe/website/web_template/hero/hero.json | 3 +- .../section_with_cta/section_with_cta.html | 8 +- .../section_with_small_cta.html | 8 +- .../section_with_testimonials/__init__.py | 0 .../section_with_testimonials.html | 31 +++++ .../section_with_testimonials.json | 73 ++++++++++++ .../section_with_videos/__init__.py | 0 .../section_with_videos.html | 24 ++++ .../section_with_videos.json | 61 ++++++++++ 29 files changed, 460 insertions(+), 180 deletions(-) create mode 100644 frappe/website/web_template/cover_image/__init__.py create mode 100644 frappe/website/web_template/cover_image/cover_image.html create mode 100644 frappe/website/web_template/cover_image/cover_image.json create mode 100644 frappe/website/web_template/section_with_testimonials/__init__.py create mode 100644 frappe/website/web_template/section_with_testimonials/section_with_testimonials.html create mode 100644 frappe/website/web_template/section_with_testimonials/section_with_testimonials.json create mode 100644 frappe/website/web_template/section_with_videos/__init__.py create mode 100644 frappe/website/web_template/section_with_videos/section_with_videos.html create mode 100644 frappe/website/web_template/section_with_videos/section_with_videos.json diff --git a/frappe/public/scss/desk/avatar.scss b/frappe/public/scss/desk/avatar.scss index cc8c16ce44..638256c21d 100644 --- a/frappe/public/scss/desk/avatar.scss +++ b/frappe/public/scss/desk/avatar.scss @@ -111,8 +111,8 @@ } .avatar-large { - width: 72px; - height: 72px; + width: 64px; + height: 64px; .standard-image { font-size: var(--text-2xl); diff --git a/frappe/public/scss/website/base.scss b/frappe/public/scss/website/base.scss index 4190780ece..324397552d 100644 --- a/frappe/public/scss/website/base.scss +++ b/frappe/public/scss/website/base.scss @@ -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(xl) { + font-size: $font-size-3xl; + margin-top: 3.5rem; } - @include media-breakpoint-up(md) { +} + +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; } diff --git a/frappe/public/scss/website/blog.scss b/frappe/public/scss/website/blog.scss index 6b0acb9d83..99255df764 100644 --- a/frappe/public/scss/website/blog.scss +++ b/frappe/public/scss/website/blog.scss @@ -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%; } } } diff --git a/frappe/public/scss/website/index.scss b/frappe/public/scss/website/index.scss index e36e649eb7..4352301b4c 100644 --- a/frappe/public/scss/website/index.scss +++ b/frappe/public/scss/website/index.scss @@ -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'; diff --git a/frappe/public/scss/website/markdown.scss b/frappe/public/scss/website/markdown.scss index 6f009df393..c2592b61e9 100644 --- a/frappe/public/scss/website/markdown.scss +++ b/frappe/public/scss/website/markdown.scss @@ -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; diff --git a/frappe/public/scss/website/page_builder.scss b/frappe/public/scss/website/page_builder.scss index e7e2f8b242..f94f79df21 100644 --- a/frappe/public/scss/website/page_builder.scss +++ b/frappe/public/scss/website/page_builder.scss @@ -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; +} diff --git a/frappe/public/scss/website/variables.scss b/frappe/public/scss/website/variables.scss index 293d02b06d..ad3dbd2f8b 100644 --- a/frappe/public/scss/website/variables.scss +++ b/frappe/public/scss/website/variables.scss @@ -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; diff --git a/frappe/templates/includes/avatar_macro.html b/frappe/templates/includes/avatar_macro.html index b652b573b3..49c2dfc1bc 100644 --- a/frappe/templates/includes/avatar_macro.html +++ b/frappe/templates/includes/avatar_macro.html @@ -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) %} - - {% if user_info.image %} + + {% if image or user_info.image %} + src="{{ image or user_info.image }}" + title="{{ full_name or user_info.name }}"> {% else %} - {{ 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() }} {% endif %} -{% endmacro %} \ No newline at end of file +{% endmacro %} diff --git a/frappe/templates/includes/blog/blogger.html b/frappe/templates/includes/blog/blogger.html index 6963cc7361..bc36501ddd 100644 --- a/frappe/templates/includes/blog/blogger.html +++ b/frappe/templates/includes/blog/blogger.html @@ -1,8 +1,9 @@ -{% from "frappe/templates/includes/macros.html" import square_image_with_fallback %} +{% from "frappe/templates/includes/avatar_macro.html" import avatar %}
- {{ square_image_with_fallback(src=blogger_info.avatar, size='small', alt=blogger_info.full_name, class='align-self-start mr-4 rounded') }} -
+ {{ avatar(full_name=blogger_info.full_name, image=blogger_info.avatar, size='avatar-large') }} + +
{{ blogger_info.full_name }}
diff --git a/frappe/templates/includes/web_block.html b/frappe/templates/includes/web_block.html index 0805e743c0..c8b22b3551 100644 --- a/frappe/templates/includes/web_block.html +++ b/frappe/templates/includes/web_block.html @@ -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 -%}
+ 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 -%}
{%- endif -%} diff --git a/frappe/website/doctype/blog_post/blog_post.json b/frappe/website/doctype/blog_post/blog_post.json index 5e3cc78d70..3f8407e8e2 100644 --- a/frappe/website/doctype/blog_post/blog_post.json +++ b/frappe/website/doctype/blog_post/blog_post.json @@ -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 -} +} \ No newline at end of file diff --git a/frappe/website/doctype/blog_post/templates/blog_post_row.html b/frappe/website/doctype/blog_post/templates/blog_post_row.html index 53539c33e0..f8494d12b0 100644 --- a/frappe/website/doctype/blog_post/templates/blog_post_row.html +++ b/frappe/website/doctype/blog_post/templates/blog_post_row.html @@ -1,3 +1,5 @@ +{% from "frappe/templates/includes/avatar_macro.html" import avatar %} + {%- set post = doc -%}
@@ -26,7 +28,7 @@

{{ post.intro }}

- + {{ avatar(full_name=post.full_name, image=post.avatar, size='avatar-medium') }}
{{ post.full_name }}
diff --git a/frappe/website/doctype/web_page/web_page.js b/frappe/website/doctype/web_page/web_page.js index 070d1b2ad5..32d8a2df32 100644 --- a/frappe/website/doctype/web_page/web_page.js +++ b/frappe/website/doctype/web_page/web_page.js @@ -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']] } }; }); diff --git a/frappe/website/doctype/web_page_block/web_page_block.json b/frappe/website/doctype/web_page_block/web_page_block.json index 4e3060a1e1..e93dcd3df2 100644 --- a/frappe/website/doctype/web_page_block/web_page_block.json +++ b/frappe/website/doctype/web_page_block/web_page_block.json @@ -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 } \ No newline at end of file diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js index 079924d014..9a01b41a91 100644 --- a/frappe/website/js/website.js +++ b/frappe/website/js/website.js @@ -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(` + + `) + }) } }); @@ -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); }); diff --git a/frappe/website/web_template/cover_image/__init__.py b/frappe/website/web_template/cover_image/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frappe/website/web_template/cover_image/cover_image.html b/frappe/website/web_template/cover_image/cover_image.html new file mode 100644 index 0000000000..e54952d80d --- /dev/null +++ b/frappe/website/web_template/cover_image/cover_image.html @@ -0,0 +1,5 @@ +{{ frappe.render_template('templates/includes/image_with_blur.html', { + "src": url, + "alt": description, + "class": "full-width-image" +}) }} diff --git a/frappe/website/web_template/cover_image/cover_image.json b/frappe/website/web_template/cover_image/cover_image.json new file mode 100644 index 0000000000..f44b797418 --- /dev/null +++ b/frappe/website/web_template/cover_image/cover_image.json @@ -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" +} \ No newline at end of file diff --git a/frappe/website/web_template/full_width_image/full_width_image.json b/frappe/website/web_template/full_width_image/full_width_image.json index 8458b6c79b..840551f791 100644 --- a/frappe/website/web_template/full_width_image/full_width_image.json +++ b/frappe/website/web_template/full_width_image/full_width_image.json @@ -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, diff --git a/frappe/website/web_template/hero/hero.html b/frappe/website/web_template/hero/hero.html index 0d2f9b008a..4f2f8d89ed 100644 --- a/frappe/website/web_template/hero/hero.html +++ b/frappe/website/web_template/hero/hero.html @@ -9,12 +9,12 @@ {%- if primary_action or secondary_action -%}
{%- if primary_action -%} - + {{ primary_action_label }} {%- endif -%} {%- if secondary_action -%} - + {{ secondary_action_label }} {%- endif -%} diff --git a/frappe/website/web_template/hero/hero.json b/frappe/website/web_template/hero/hero.json index 6a72e15434..b4344a2fc8 100644 --- a/frappe/website/web_template/hero/hero.json +++ b/frappe/website/web_template/hero/hero.json @@ -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", diff --git a/frappe/website/web_template/section_with_cta/section_with_cta.html b/frappe/website/web_template/section_with_cta/section_with_cta.html index 7a4169e0aa..4494dccecb 100644 --- a/frappe/website/web_template/section_with_cta/section_with_cta.html +++ b/frappe/website/web_template/section_with_cta/section_with_cta.html @@ -4,8 +4,12 @@ {%- if subtitle -%}

{{ subtitle }}

{%- endif -%} -
- {{ cta_label }} +
+

+ {{ cta_label }} + + +

{%- if cta_description -%}
diff --git a/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html b/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html index 56a95bb4c9..7bd8c905ad 100644 --- a/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html +++ b/frappe/website/web_template/section_with_small_cta/section_with_small_cta.html @@ -1,14 +1,18 @@
-

{{ title or '' }}

+

{{ title or '' }}

{%- if subtitle -%}

{{ subtitle }}

{%- endif -%}
{%- if cta_label and cta_url -%} - {{ cta_label }} +

+ {{ cta_label }} + + +

{%- endif -%}
diff --git a/frappe/website/web_template/section_with_testimonials/__init__.py b/frappe/website/web_template/section_with_testimonials/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frappe/website/web_template/section_with_testimonials/section_with_testimonials.html b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.html new file mode 100644 index 0000000000..8260f96115 --- /dev/null +++ b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.html @@ -0,0 +1,31 @@ +{% from "frappe/templates/includes/avatar_macro.html" import avatar %} + +
+ {%- if title -%} +

{{ title }}

+ {%- endif -%} + {%- if subtitle -%} +

{{ subtitle }}

+ {%- endif -%} + +
+ {%- for testimonial in testimonials -%} +
+
+ {%- if testimonial.content -%} +

{{ testimonial.content }}

+ {%- endif -%} +
+
+ {{ avatar(full_name=testimonial.full_name, image=testimonial.image, size='avatar-medium') }} +

+ {{ testimonial.full_name }} + {%- if testimonial.designation -%} +
{{ testimonial.designation }} + {%- endif -%} +

+
+
+ {%- endfor -%} +
+
diff --git a/frappe/website/web_template/section_with_testimonials/section_with_testimonials.json b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.json new file mode 100644 index 0000000000..c1ba071be2 --- /dev/null +++ b/frappe/website/web_template/section_with_testimonials/section_with_testimonials.json @@ -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" +} \ No newline at end of file diff --git a/frappe/website/web_template/section_with_videos/__init__.py b/frappe/website/web_template/section_with_videos/__init__.py new file mode 100644 index 0000000000..e69de29bb2 diff --git a/frappe/website/web_template/section_with_videos/section_with_videos.html b/frappe/website/web_template/section_with_videos/section_with_videos.html new file mode 100644 index 0000000000..f464b39db0 --- /dev/null +++ b/frappe/website/web_template/section_with_videos/section_with_videos.html @@ -0,0 +1,24 @@ +
+ {%- if title -%} +

{{ title }}

+ {%- endif -%} + {%- if subtitle -%} +

{{ subtitle }}

+ {%- endif -%} + +
+ {%- for video in videos -%} +
+
+ +
+ {%- if video.title -%} +

{{ video.title }}

+ {%- endif -%} + {%- if video.content -%} +

{{ video.content }}

+ {%- endif -%} +
+ {%- endfor -%} +
+
diff --git a/frappe/website/web_template/section_with_videos/section_with_videos.json b/frappe/website/web_template/section_with_videos/section_with_videos.json new file mode 100644 index 0000000000..161830546c --- /dev/null +++ b/frappe/website/web_template/section_with_videos/section_with_videos.json @@ -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" +} \ No newline at end of file From 72e7ed508e373ba20f4f841c4f8eda1339e97273 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Mon, 21 Mar 2022 17:21:43 +0530 Subject: [PATCH 02/11] fix(minor): bolder headings --- frappe/public/scss/website/base.scss | 4 ++++ frappe/public/scss/website/page_builder.scss | 6 +++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/frappe/public/scss/website/base.scss b/frappe/public/scss/website/base.scss index 324397552d..7e5d9b5b66 100644 --- a/frappe/public/scss/website/base.scss +++ b/frappe/public/scss/website/base.scss @@ -24,6 +24,10 @@ img { height: auto; } +h1, h2, h3, h4 { + font-weight: 600; +} + h1 { font-size: $font-size-3xl; line-height: 1.25; diff --git a/frappe/public/scss/website/page_builder.scss b/frappe/public/scss/website/page_builder.scss index f94f79df21..5166e65394 100644 --- a/frappe/public/scss/website/page_builder.scss +++ b/frappe/public/scss/website/page_builder.scss @@ -538,7 +538,7 @@ } .feature-title { - font-size: $font-size-xl; + font-size: $font-size-lg; font-weight: 600; @include media-breakpoint-up(md) { @@ -680,6 +680,10 @@ margin-top: 0; } +.feature-content { + line-height: 1.7; +} + .feature-title, .feature-content { margin-bottom: 0; } From eddca47216d05f1c8bf6d06ff490661c87316214 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Mon, 21 Mar 2022 18:03:26 +0530 Subject: [PATCH 03/11] fix(minor): video styles --- frappe/public/scss/website/page_builder.scss | 5 ++++- frappe/website/js/website.js | 2 +- .../section_with_videos/section_with_videos.html | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/frappe/public/scss/website/page_builder.scss b/frappe/public/scss/website/page_builder.scss index 5166e65394..a2fea33765 100644 --- a/frappe/public/scss/website/page_builder.scss +++ b/frappe/public/scss/website/page_builder.scss @@ -700,11 +700,14 @@ margin-top: 2rem; } +.section-video-wrapper { + margin-bottom: 1rem; +} + .section-video { aspect-ratio: 16 / 9; width: 100%; cursor: pointer; - margin-bottom: 1rem; } .video-thumbnail { diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js index 9a01b41a91..27d5277fdd 100644 --- a/frappe/website/js/website.js +++ b/frappe/website/js/website.js @@ -426,7 +426,7 @@ $.extend(frappe, { }, setup_videos: () => { // converts video images into youtube embeds (via Page Builder) - $('.section-video').on('click', (e) => { + $('.section-video-wrapper').on('click', (e) => { let $video = $(e.currentTarget); let id = $video.data('youtubeId'); console.log(id); diff --git a/frappe/website/web_template/section_with_videos/section_with_videos.html b/frappe/website/web_template/section_with_videos/section_with_videos.html index f464b39db0..369d469e87 100644 --- a/frappe/website/web_template/section_with_videos/section_with_videos.html +++ b/frappe/website/web_template/section_with_videos/section_with_videos.html @@ -9,7 +9,7 @@
{%- for video in videos -%}
-
+
{%- if video.title -%} From e034072bac20a78e73a1912616a37ca4f0d00293 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Tue, 22 Mar 2022 12:37:24 +0530 Subject: [PATCH 04/11] fix(minor): linting in website.js --- frappe/website/js/website.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frappe/website/js/website.js b/frappe/website/js/website.js index 27d5277fdd..7d2326442c 100644 --- a/frappe/website/js/website.js +++ b/frappe/website/js/website.js @@ -432,9 +432,9 @@ $.extend(frappe, { console.log(id); $video.find(".video-thumbnail").hide(); $video.append(` - - `) - }) + + `); + }); } }); From dffef1285d3c5ce4f1212fe02725374270983e10 Mon Sep 17 00:00:00 2001 From: Rushabh Mehta Date: Tue, 22 Mar 2022 15:36:25 +0530 Subject: [PATCH 05/11] fix(styles): fix styles for my account and web forms --- .../web_form/edit_profile/edit_profile.json | 252 ++++++++++-------- frappe/public/js/frappe/web_form/web_form.js | 9 +- frappe/public/scss/website/footer.scss | 8 +- frappe/public/scss/website/my_account.scss | 29 +- frappe/public/scss/website/web_form.scss | 6 +- frappe/www/me.html | 18 +- frappe/www/me.py | 1 - frappe/www/third_party_apps.html | 58 ++-- frappe/www/third_party_apps.py | 3 +- frappe/www/update-password.html | 8 +- 10 files changed, 211 insertions(+), 181 deletions(-) diff --git a/frappe/core/web_form/edit_profile/edit_profile.json b/frappe/core/web_form/edit_profile/edit_profile.json index 7072584670..c04e705820 100644 --- a/frappe/core/web_form/edit_profile/edit_profile.json +++ b/frappe/core/web_form/edit_profile/edit_profile.json @@ -1,133 +1,159 @@ { - "accept_payment": 0, - "allow_comments": 0, - "allow_delete": 0, - "allow_edit": 1, - "allow_incomplete": 0, - "allow_multiple": 0, - "allow_print": 0, - "amount": 0.0, - "amount_based_on_field": 0, - "breadcrumbs": "[{\"title\": _(\"My Account\"), \"route\": \"me\"}]", - "creation": "2016-09-19 05:16:59.242754", - "doc_type": "User", - "docstatus": 0, - "doctype": "Web Form", - "idx": 0, - "introduction_text": "", - "is_standard": 1, - "login_required": 1, - "max_attachment_size": 0, - "modified": "2019-01-28 12:45:17.158069", - "modified_by": "Administrator", - "module": "Core", - "name": "edit-profile", - "owner": "Administrator", - "published": 1, - "route": "update-profile", - "show_in_grid": 0, - "show_sidebar": 1, - "sidebar_items": [], - "success_message": "Profile updated successfully.", - "success_url": "/me", - "title": "Update Profile", + "accept_payment": 0, + "allow_comments": 0, + "allow_delete": 0, + "allow_edit": 1, + "allow_incomplete": 0, + "allow_multiple": 0, + "allow_print": 0, + "amount": 0.0, + "amount_based_on_field": 0, + "apply_document_permissions": 0, + "breadcrumbs": "[{\"title\": _(\"My Account\"), \"route\": \"me\"}]", + "creation": "2016-09-19 05:16:59.242754", + "doc_type": "User", + "docstatus": 0, + "doctype": "Web Form", + "idx": 0, + "introduction_text": "", + "is_multi_step_form": 0, + "is_standard": 1, + "login_required": 1, + "max_attachment_size": 0, + "modified": "2022-03-22 15:00:43.456738", + "modified_by": "Administrator", + "module": "Core", + "name": "edit-profile", + "owner": "Administrator", + "published": 1, + "route": "update-profile", + "route_to_success_link": 0, + "show_attachments": 0, + "show_in_grid": 0, + "show_sidebar": 0, + "sidebar_items": [], + "success_message": "Profile updated successfully.", + "success_url": "/me", + "title": "Update Profile", "web_form_fields": [ { - "allow_read_on_all_link_options": 0, - "fieldname": "first_name", - "fieldtype": "Data", - "hidden": 0, - "label": "First Name", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 1, + "allow_read_on_all_link_options": 0, + "fieldname": "first_name", + "fieldtype": "Data", + "hidden": 0, + "label": "First Name", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 1, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "middle_name", - "fieldtype": "Data", - "hidden": 0, - "label": "Middle Name (Optional)", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "middle_name", + "fieldtype": "Data", + "hidden": 0, + "label": "Middle Name (Optional)", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "last_name", - "fieldtype": "Data", - "hidden": 0, - "label": "Last Name", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "last_name", + "fieldtype": "Data", + "hidden": 0, + "label": "Last Name", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "description": "", - "fieldname": "user_image", - "fieldtype": "Attach Image", - "hidden": 0, - "label": "User Image", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "", + "fieldtype": "Column Break", + "hidden": 0, + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldtype": "Section Break", - "hidden": 0, - "label": "More Information", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "description": "", + "fieldname": "user_image", + "fieldtype": "Attach Image", + "hidden": 0, + "label": "Profile Picture", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "phone", - "fieldtype": "Data", - "hidden": 0, - "label": "Phone", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldtype": "Section Break", + "hidden": 0, + "label": "More Information", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "fieldname": "mobile_no", - "fieldtype": "Data", - "hidden": 0, - "label": "Mobile Number", - "max_length": 0, - "max_value": 0, - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "phone", + "fieldtype": "Data", + "hidden": 0, + "label": "Phone", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, "show_in_filter": 0 - }, + }, { - "allow_read_on_all_link_options": 0, - "description": "", - "fieldname": "language", - "fieldtype": "Link", - "hidden": 0, - "label": "Language", - "max_length": 0, - "max_value": 0, - "options": "Language", - "read_only": 0, - "reqd": 0, + "allow_read_on_all_link_options": 0, + "fieldname": "mobile_no", + "fieldtype": "Data", + "hidden": 0, + "label": "Mobile Number", + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, + "show_in_filter": 0 + }, + { + "allow_read_on_all_link_options": 0, + "fieldname": "", + "fieldtype": "Column Break", + "hidden": 0, + "max_length": 0, + "max_value": 0, + "read_only": 0, + "reqd": 0, + "show_in_filter": 0 + }, + { + "allow_read_on_all_link_options": 0, + "description": "", + "fieldname": "language", + "fieldtype": "Link", + "hidden": 0, + "label": "Language", + "max_length": 0, + "max_value": 0, + "options": "Language", + "read_only": 0, + "reqd": 0, "show_in_filter": 0 } ] diff --git a/frappe/public/js/frappe/web_form/web_form.js b/frappe/public/js/frappe/web_form/web_form.js index a45fc941d3..6ec995efde 100644 --- a/frappe/public/js/frappe/web_form/web_form.js +++ b/frappe/public/js/frappe/web_form/web_form.js @@ -164,9 +164,12 @@ export default class WebForm extends frappe.ui.FieldGroup { this.save() ); - this.add_button_to_footer(this.button_label || __("Save", null, "Button in web form"), "primary", () => - this.save() - ); + if ($('main').height() > 600) { + // add button on footer if page is long + this.add_button_to_footer(this.button_label || __("Save", null, "Button in web form"), "primary", () => + this.save() + ); + } } setup_cancel_button() { diff --git a/frappe/public/scss/website/footer.scss b/frappe/public/scss/website/footer.scss index f3bdfed07f..e5dae72808 100644 --- a/frappe/public/scss/website/footer.scss +++ b/frappe/public/scss/website/footer.scss @@ -1,6 +1,8 @@ .web-footer { - padding: 5rem 0; + margin: 5rem 0; min-height: 140px; + background-color: var(--fg-color); + border-top: 1px solid $border-color; } .footer-logo { @@ -76,8 +78,6 @@ } .footer-info { - margin-top: 1rem; - border-top: 1px solid $border-color; color: $text-muted; font-size: $font-size-sm; } @@ -98,4 +98,4 @@ font-size: $font-size-sm; } } -} \ No newline at end of file +} diff --git a/frappe/public/scss/website/my_account.scss b/frappe/public/scss/website/my_account.scss index 22b29cc3ec..58075580a2 100644 --- a/frappe/public/scss/website/my_account.scss +++ b/frappe/public/scss/website/my_account.scss @@ -27,15 +27,16 @@ } } +.my-account-container { + max-width: 800px; + margin: auto; +} + .account-info { background-color: var(--fg-color); + box-shadow: var(--card-shadow); border-radius: var(--border-radius-md); padding: var(--padding-sm) 25px; - max-width: 850px; - - @include media-breakpoint-up(sm) { - margin-left: 0; - } @include media-breakpoint-down(sm) { padding: 0; @@ -97,21 +98,3 @@ border: 0; } } - -//styles for third party apps page -//center wrt to outer most container and not immediate parent -.empty-apps-state { - position: relative; - padding-top: 10rem; - margin-left: -250px; - text-align: center; - - @include media-breakpoint-down(sm) { - margin: auto; - padding-top: 5rem; - } - - @include media-breakpoint-down(md) { - margin-left: 0; - } -} \ No newline at end of file diff --git a/frappe/public/scss/website/web_form.scss b/frappe/public/scss/website/web_form.scss index b7df649f59..97e5820194 100644 --- a/frappe/public/scss/website/web_form.scss +++ b/frappe/public/scss/website/web_form.scss @@ -2,6 +2,10 @@ [data-doctype="Web Form"] { + .page-header h3 { + margin-top: 0; + margin-bottom: 0; + } .page-content-wrapper { .breadcrumb-container.container { @@ -75,4 +79,4 @@ } } } -} \ No newline at end of file +} diff --git a/frappe/www/me.html b/frappe/www/me.html index ca4d4a4e5a..8b706afd6a 100644 --- a/frappe/www/me.html +++ b/frappe/www/me.html @@ -3,10 +3,9 @@ {% block title %} {{ _("My Account") }} {% endblock %} -{% block header %} - -{% endblock %} {% block page_content %} +