Commit f193ad9f authored by lauriii's avatar lauriii

Issue #3085534 by kjay, shaal, lauriii, webchick, markconroy: Configure Umami...

Issue #3085534 by kjay, shaal, lauriii, webchick, markconroy: Configure Umami to use Layout Builder to deliver original recipe content type designs
parent 816be32b
......@@ -21,6 +21,8 @@ dependencies:
- options
- text
- user
theme:
- umami
third_party_settings:
layout_builder:
sections:
......@@ -29,21 +31,22 @@ third_party_settings:
layout_settings:
label: ''
components:
44801518-fe93-421a-bdcb-550493c7925d:
uuid: 44801518-fe93-421a-bdcb-550493c7925d
eadd557c-6414-40e5-9a95-355720385477:
uuid: eadd557c-6414-40e5-9a95-355720385477
region: content
configuration:
label_display: '0'
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_summary'
id: 'field_block:node:recipe:field_tags'
formatter:
label: hidden
settings: { }
label: inline
settings:
link: true
third_party_settings: { }
type: text_default
type: entity_reference_label
additional: { }
weight: 0
weight: 3
0eff9e1d-4e73-4748-b910-e5568df1d5aa:
uuid: 0eff9e1d-4e73-4748-b910-e5568df1d5aa
region: content
......@@ -59,43 +62,82 @@ third_party_settings:
third_party_settings: { }
type: entity_reference_label
additional: { }
weight: 1
eadd557c-6414-40e5-9a95-355720385477:
uuid: eadd557c-6414-40e5-9a95-355720385477
weight: 2
44801518-fe93-421a-bdcb-550493c7925d:
uuid: 44801518-fe93-421a-bdcb-550493c7925d
region: content
configuration:
label_display: '0'
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_tags'
id: 'field_block:node:recipe:field_summary'
formatter:
label: inline
settings:
link: true
label: hidden
settings: { }
third_party_settings: { }
type: entity_reference_label
type: text_default
additional: { }
weight: 2
00488840-db50-4afe-9c30-a123e6707fa9:
uuid: 00488840-db50-4afe-9c30-a123e6707fa9
weight: 4
third_party_settings: { }
-
layout_id: layout_oneplusfourgrid_section
layout_settings:
label: ''
components:
cc87463d-bb75-4eca-a2d0-42f0b643f8a7:
uuid: cc87463d-bb75-4eca-a2d0-42f0b643f8a7
region: content
configuration:
id: 'field_block:node:recipe:field_media_image'
label: 'Media Image'
provider: layout_builder
label_display: '0'
formatter:
label: hidden
type: entity_reference_entity_view
settings:
view_mode: responsive_3x2
third_party_settings: { }
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_preparation_time'
view_mode: view_mode
additional: { }
weight: 4
df8bfafc-210c-4d86-9745-e47081ab0fd4:
uuid: df8bfafc-210c-4d86-9745-e47081ab0fd4
region: fifth
configuration:
label_display: '0'
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_difficulty'
formatter:
label: inline
settings: { }
third_party_settings: { }
type: list_default
additional: { }
weight: 0
a2d450d0-08ce-4123-bca0-411bfa1da132:
uuid: a2d450d0-08ce-4123-bca0-411bfa1da132
region: fourth
configuration:
label_display: '0'
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_number_of_servings'
formatter:
label: inline
settings:
thousand_separator: ''
prefix_suffix: true
prefix_suffix: false
third_party_settings: { }
type: number_integer
additional: { }
weight: 5
weight: 0
f91febc6-d924-47a2-8ffd-b71d3b2597c7:
uuid: f91febc6-d924-47a2-8ffd-b71d3b2597c7
region: content
region: third
configuration:
label_display: '0'
context_mapping:
......@@ -109,42 +151,53 @@ third_party_settings:
third_party_settings: { }
type: number_integer
additional: { }
weight: 6
a2d450d0-08ce-4123-bca0-411bfa1da132:
uuid: a2d450d0-08ce-4123-bca0-411bfa1da132
region: content
weight: 0
00488840-db50-4afe-9c30-a123e6707fa9:
uuid: 00488840-db50-4afe-9c30-a123e6707fa9
region: second
configuration:
label_display: '0'
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_number_of_servings'
id: 'field_block:node:recipe:field_preparation_time'
formatter:
label: inline
settings:
thousand_separator: ''
prefix_suffix: false
prefix_suffix: true
third_party_settings: { }
type: number_integer
additional: { }
weight: 7
df8bfafc-210c-4d86-9745-e47081ab0fd4:
uuid: df8bfafc-210c-4d86-9745-e47081ab0fd4
region: content
weight: 0
69d8bce1-28ae-4287-a05b-a2166679f867:
uuid: 69d8bce1-28ae-4287-a05b-a2166679f867
region: first
configuration:
id: 'field_block:node:recipe:field_media_image'
label: 'Media Image'
provider: layout_builder
label_display: '0'
context_mapping:
entity: layout_builder.entity
id: 'field_block:node:recipe:field_difficulty'
formatter:
label: inline
settings: { }
label: hidden
type: entity_reference_entity_view
settings:
view_mode: responsive_3x2
third_party_settings: { }
type: list_default
context_mapping:
entity: layout_builder.entity
view_mode: view_mode
additional: { }
weight: 8
weight: 0
third_party_settings: { }
-
layout_id: layout_twocol_section
layout_settings:
label: ''
column_widths: 33-67
components:
6924bf2e-8baa-4081-803a-7a2d3b7d8e14:
uuid: 6924bf2e-8baa-4081-803a-7a2d3b7d8e14
region: content
region: first
configuration:
label_display: '0'
context_mapping:
......@@ -157,10 +210,10 @@ third_party_settings:
third_party_settings: { }
type: string
additional: { }
weight: 9
weight: 0
f61cae40-5865-4c4c-98fa-14b8234e7b98:
uuid: f61cae40-5865-4c4c-98fa-14b8234e7b98
region: content
region: second
configuration:
label_display: '0'
context_mapping:
......@@ -172,7 +225,13 @@ third_party_settings:
third_party_settings: { }
type: text_default
additional: { }
weight: 10
weight: 0
third_party_settings: { }
-
layout_id: layout_onecol
layout_settings:
label: ''
components:
d4b753a7-e1b1-4062-a1d0-a2666362693e:
uuid: d4b753a7-e1b1-4062-a1d0-a2666362693e
region: content
......@@ -182,26 +241,7 @@ third_party_settings:
entity: layout_builder.entity
id: 'extra_field_block:node:recipe:content_moderation_control'
additional: { }
weight: 11
cc87463d-bb75-4eca-a2d0-42f0b643f8a7:
uuid: cc87463d-bb75-4eca-a2d0-42f0b643f8a7
region: content
configuration:
id: 'field_block:node:recipe:field_media_image'
label: 'Media Image'
provider: layout_builder
label_display: '0'
formatter:
label: hidden
type: entity_reference_entity_view
settings:
view_mode: responsive_3x2
third_party_settings: { }
context_mapping:
entity: layout_builder.entity
view_mode: view_mode
additional: { }
weight: 4
weight: 0
third_party_settings: { }
allow_custom: true
enabled: true
......
......@@ -3,31 +3,6 @@
* This file is used to style the recipe using the 'full' view mode.
*/
.node--type-recipe.node--view-mode-full .field--name-field-summary,
.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
/* Limit text width for legibility */
max-width: 796px;
}
.node--type-recipe.node--view-mode-full .field--name-field-summary {
max-width: 796px;
}
.node--type-recipe.node--view-mode-full .field--name-field-media-image {
background-color: #fcece7;
background-image: url(../../../../images/png/umami-background-pattern-1.png);
}
.node--type-recipe.node--view-mode-full .field--name-field-media-image img {
display: block;
}
@media screen and (min-width: 786px) {
.node--type-recipe.node--view-mode-full .field--name-field-media-image img {
max-width: 796px;
}
}
/* Icons for the recipe meta fields */
.node--type-recipe.node--view-mode-full .field--name-field-preparation-time,
.node--type-recipe.node--view-mode-full .field--name-field-cooking-time,
......@@ -49,6 +24,42 @@
padding-left: 0;
background-position: right center;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty {
padding-top: 64px;
padding-left: 0; /* LTR */
text-align: center;
background-position: center top; /* LTR */
background-size: 56px 56px;
}
[dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,
[dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time,
[dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings,
[dir=rtl] .node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty {
padding-right: 0;
}
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time {
margin-top: 0.96em;
}
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time .field__label,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time .field__label,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings .field__label,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty .field__label,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-preparation-time .field__item,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-cooking-time .field__item,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-number-of-servings .field__item,
.node--type-recipe.node--view-mode-full .layout--oneplusfourgrid-section .field--name-field-difficulty .field__item {
width: 100%;
padding-right: 0;
}
}
.node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
background-image: url(../../../../images/svg/knife.svg);
}
......
......@@ -4,7 +4,6 @@
*/
.field--name-field-ingredients {
margin-top: 1.184rem;
margin-bottom: 1.184rem;
padding: 1.266rem;
background-color: #fbf5ee;
......@@ -13,7 +12,6 @@
@media screen and (min-width: 60rem) {
/* 960px */
.field--name-field-ingredients {
margin-top: 2.369rem;
margin-bottom: 2.369rem;
padding: 2.369rem;
}
......@@ -37,15 +35,6 @@
}
}
/* Small */
@media screen and (min-width: 30rem) {
/* 480px */
.field--name-field-ingredients .field__items {
column-count: 2;
column-gap: 2rem;
}
}
.field--name-field-ingredients .field__item {
margin: 0 0 0.6em 0;
padding: 0 0 0.6em 0;
......
......@@ -4,7 +4,7 @@
*/
.field--name-field-recipe-instruction .field__label {
margin: 1.184rem 0 1em 0;
margin: 0 0 1em 0;
padding: 0 0 0.6em 0;
border-bottom: 1px solid #eec2cb;
font-family: "Scope One", Georgia, serif;
......@@ -16,7 +16,7 @@
@media screen and (min-width: 60rem) {
/* 960px */
.field--name-field-recipe-instruction .field__label {
margin: 2.369rem 0 1.5em 0;
margin: 0 0 1.5em 0;
font-size: 1.77rem;
}
}
......
/**
* @file
* This file is used to style the 'field-summary' field.
*/
.field--name-field-summary {
margin-bottom: 1.28rem;
}
/*
* @file
* Provides the layout styles for four-column layout section.
*/
.layout--fourcol-section {
display: flex;
flex-wrap: wrap;
}
.layout--fourcol-section > .layout__region {
flex: 0 1 100%;
}
/* Medium */
@media screen and (min-width: 48em) { /* 768px */
.layout--fourcol-section {
margin-right: -1.5%;
margin-left: -1.5%;
}
.layout--fourcol-section > .layout__region {
flex: 0 1 47%;
margin-right: 1.5%;
margin-left: 1.5%;
}
}
/* Large */
@media screen and (min-width: 60em) { /* 768px */
.layout--fourcol-section > .layout__region {
flex: 0 1 22%;
}
}
{#
/**
* @file
* Default theme implementation to display a one plus four grid layout.
*
* Available variables:
* - content: The content for this layout.
* - attributes: HTML attributes for the layout <div>.
*
* @ingroup themeable
*/
#}
{%
set classes = [
'layout',
'layout--oneplusfourgrid-section',
]
%}
{% if content %}
<div{{ attributes.addClass(classes) }}>
{% if content.first %}
<div{{ region_attributes.first.addClass('layout__region', 'layout__region--first') }}>
{{ content.first }}
</div>
{% endif %}
{% if content.second or content.third or content.fourth or content.fifth %}
<div class="layout__four-grid-group">
{% endif %}
{% if content.second %}
<div{{ region_attributes.second.addClass('layout__region', 'layout__region--second') }}>
{{ content.second }}
</div>
{% endif %}
{% if content.third %}
<div{{ region_attributes.third.addClass('layout__region', 'layout__region--third') }}>
{{ content.third }}
</div>
{% endif %}
{% if content.fourth %}
<div{{ region_attributes.fourth.addClass('layout__region', 'layout__region--fourth') }}>
{{ content.fourth }}
</div>
{% endif %}
{% if content.fifth %}
<div{{ region_attributes.fifth.addClass('layout__region', 'layout__region--fifth') }}>
{{ content.fifth }}
</div>
{% endif %}
{% if content.second or content.third or content.fourth or content.fifth %}
</div>
{% endif %}
</div>
{% endif %}
/*
* @file
* Provides the layout styles for two-column layout section.
*/
.layout--oneplusfourgrid-section {
display: flex;
flex-wrap: wrap;
}
.layout--oneplusfourgrid-section > .layout__region {
flex: 0 1 100%;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.layout--oneplusfourgrid-section {
margin-right: -1.5%;
margin-left: -1.5%;
}
.layout--oneplusfourgrid-section > .layout__region--first {
flex: 0 1 47%;
margin-right: 1.5%;
margin-left: 1.5%;
}
.layout--oneplusfourgrid-section > .layout__four-grid-group {
display: flex;
flex: 0 1 50%;
flex-wrap: wrap;
}
.layout__four-grid-group > .layout__region--second,
.layout__four-grid-group > .layout__region--third,
.layout__four-grid-group > .layout__region--fourth,
.layout__four-grid-group > .layout__region--fifth {
flex: 0 1 44%;
margin-right: 3%;
margin-left: 3%;
}
}
/*
* @file
* Provides the layout styles for three-column layout section.
*/
.layout--threecol-section {
display: flex;
flex-wrap: wrap;
}
.layout--threecol-section > .layout__region {
flex: 0 1 100%;
}
/* Medium */
@media screen and (min-width: 48em) { /* 768px */
.layout--threecol-section {
margin-right: -1.5%;
margin-left: -1.5%;
}
.layout--threecol-section > .layout__region {
margin-right: 1.5%;
margin-left: 1.5%;
}
.layout--threecol-section--25-50-25 > .layout__region--first,
.layout--threecol-section--25-50-25 > .layout__region--third,
.layout--threecol-section--25-25-50 > .layout__region--first,
.layout--threecol-section--25-25-50 > .layout__region--second,
.layout--threecol-section--50-25-25 > .layout__region--second,
.layout--threecol-section--50-25-25 > .layout__region--third {
flex: 0 1 22%;
}
.layout--threecol-section--25-50-25 > .layout__region--second,
.layout--threecol-section--25-25-50 > .layout__region--third,
.layout--threecol-section--50-25-25 > .layout__region--first {
flex: 0 1 47%;
}
.layout--threecol-section--33-34-33 > .layout__region--first,
.layout--threecol-section--33-34-33 > .layout__region--third {
flex: 0 1 30%;
}
.layout--threecol-section--33-34-33 > .layout__region--second {
flex: 0 1 31%;
}
}
/*
* @file
* Provides the layout styles for two-column layout section.
*/
.layout--twocol-section {
display: flex;
flex-wrap: wrap;
}
.layout--twocol-section > .layout__region {
flex: 0 1 100%;
}
/* Medium */
@media screen and (min-width: 48em) { /* 768px */
.layout--twocol-section {
margin-right: -1.5%;
margin-left: -1.5%;
}
.layout--twocol-section > .layout__region {
margin-right: 1.5%;
margin-left: 1.5%;
}
.layout--twocol-section.layout--twocol-section--50-50 > .layout__region {
flex: 0 1 47%;
}
.layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
.layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
flex: 0 1 30%;
}
.layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
.layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
flex: 0 1 64%;
}
.layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
.layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
flex: 0 1 22%;
}
.layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,
.layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
flex: 0 1 72%;
}
}
......@@ -11,6 +11,18 @@ libraries:
libraries-override:
classy/messages: false
layout_builder/twocol_section:
css:
theme:
layouts/twocol_section/twocol_section.css: layouts/twocol_section/twocol_section.css
layout_builder/threecol_section:
css:
theme:
layouts/threecol_section/threecol_section.css: layouts/threecol_section/threecol_section.css
layout_builder/fourcol_section:
css:
theme:
layouts/fourcol_section/fourcol_section.css: layouts/fourcol_section/fourcol_section.css
libraries-extend:
tour/tour-styling:
......
layout_oneplusfourgrid_section:
label: 'One plus four grid'
path: layouts/oneplusfourgrid_section
template: layout--oneplusfourgrid-section
library: umami/oneplusfourgrid_section
category: 'Custom grid'
default_region: first
icon_map:
- [first, second, third]
- [first, fourth, fifth]
regions:
first:
label: First
second:
label: Second
third:
label: Third
fourth:
label: Fourth
fifth:
label: Fifth
......@@ -23,6 +23,7 @@ global:
css/components/fields/ingredients.css: {}
css/components/fields/label-items.css: {}
css/components/fields/recipe-instruction.css: {}
css/components/fields/summary.css: {}
css/components/forms/buttons.css: {}
css/components/views/promoted-items.css: {}
css/components/views/frontpage.css: {}
......@@ -124,3 +125,8 @@ demo-umami-tour:
css/components/tour/tour.theme.css: {}
dependencies:
- seven/tour-styling
oneplusfourgrid_section:
css:
theme:
layouts/oneplusfourgrid_section/oneplusfourgrid_section.css: {}