Skip to content
Snippets Groups Projects
Unverified Commit f193ad9f authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

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
No related branches found
No related tags found
No related merge requests found
Showing
with 411 additions and 104 deletions
......@@ -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: {}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment