Commit 9fb88f6c authored by Gábor Hojtsy's avatar Gábor Hojtsy

Issue #2983576 by kjay, John Cook, mohit_aghera, markconroy, smaz: Support...

Issue #2983576 by kjay, John Cook, mohit_aghera, markconroy, smaz: Support display setting changes in Demo Umami's Article and Recipe full page view modes
parent 242b03da
......@@ -37,7 +37,7 @@ content:
type: entity_reference_label
weight: 0
region: content
label: above
label: inline
settings:
link: true
third_party_settings: { }
......
......@@ -26,7 +26,7 @@ bundle: recipe
mode: default
content:
field_cooking_time:
weight: 1
weight: 5
label: above
settings:
thousand_separator: ''
......@@ -35,7 +35,7 @@ content:
type: number_integer
region: content
field_difficulty:
weight: 2
weight: 7
label: above
settings: { }
third_party_settings: { }
......@@ -51,7 +51,7 @@ content:
type: responsive_image
region: content
field_ingredients:
weight: 4
weight: 8
label: above
settings:
link_to_entity: false
......@@ -59,7 +59,7 @@ content:
type: string
region: content
field_number_of_servings:
weight: 5
weight: 6
label: above
settings:
thousand_separator: ''
......@@ -68,7 +68,7 @@ content:
type: number_integer
region: content
field_preparation_time:
weight: 6
weight: 4
label: above
settings:
thousand_separator: ''
......@@ -77,7 +77,7 @@ content:
type: number_integer
region: content
field_recipe_category:
weight: 7
weight: 1
label: above
settings:
link: true
......@@ -85,21 +85,21 @@ content:
type: entity_reference_label
region: content
field_recipe_instruction:
weight: 8
weight: 9
label: above
settings: { }
third_party_settings: { }
type: text_default
region: content
field_summary:
weight: 9
weight: 0
label: hidden
settings: { }
third_party_settings: { }
type: text_default
region: content
field_tags:
weight: 10
weight: 2
label: above
settings:
link: true
......@@ -107,7 +107,7 @@ content:
type: entity_reference_label
region: content
links:
weight: 0
weight: 10
region: content
settings: { }
third_party_settings: { }
......
......@@ -27,8 +27,8 @@ bundle: recipe
mode: full
content:
field_cooking_time:
weight: 1
label: above
weight: 5
label: inline
settings:
thousand_separator: ''
prefix_suffix: true
......@@ -36,8 +36,8 @@ content:
type: number_integer
region: content
field_difficulty:
weight: 2
label: above
weight: 7
label: inline
settings: { }
third_party_settings: { }
type: list_default
......@@ -52,7 +52,7 @@ content:
type: responsive_image
region: content
field_ingredients:
weight: 4
weight: 8
label: above
settings:
link_to_entity: false
......@@ -60,8 +60,8 @@ content:
type: string
region: content
field_number_of_servings:
weight: 5
label: above
weight: 6
label: inline
settings:
thousand_separator: ''
prefix_suffix: false
......@@ -69,8 +69,8 @@ content:
type: number_integer
region: content
field_preparation_time:
weight: 6
label: above
weight: 4
label: inline
settings:
thousand_separator: ''
prefix_suffix: true
......@@ -78,40 +78,36 @@ content:
type: number_integer
region: content
field_recipe_category:
weight: 7
label: above
weight: 1
label: inline
settings:
link: true
third_party_settings: { }
type: entity_reference_label
region: content
field_recipe_instruction:
weight: 8
weight: 9
label: above
settings: { }
third_party_settings: { }
type: text_default
region: content
field_summary:
weight: 9
weight: 0
label: hidden
settings: { }
third_party_settings: { }
type: text_default
region: content
field_tags:
weight: 10
label: above
weight: 2
label: inline
settings:
link: true
third_party_settings: { }
type: entity_reference_label
region: content
links:
weight: 0
region: content
settings: { }
third_party_settings: { }
hidden:
content_moderation_control: true
field_author: true
links: true
/**
* @file
* This file is used to style the article content type using the 'full' view mode.
*/
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-article.node--view-mode-full .node__header {
padding-right: 2.75rem;
}
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-article.node--view-mode-full .node__content {
padding: 0 2.75rem 2.4rem 10.2rem;
}
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-article.node--view-mode-full .field--name-field-image {
margin-left: -12.6rem;
}
}
/**
* @file
* This file is used to style the recipe using the 'full' view mode.
*/
* @file
* This file is used to style the recipe using the 'full' view mode.
*/
.node--type-recipe.node--view-mode-full .field--name-field-recipe-category {
flex: 0 0 100%;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .field--name-field-recipe-category {
flex: 0 1 auto;
margin-right: 1em;
}
}
.node--type-recipe.node--view-mode-full .layout__region--top {
margin-bottom: 2.369em;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
/* Override the recipe's img margin-bottom on larger displays */
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top .field--name-field-image img {
margin-bottom: 0;
}
}
.node--type-recipe.node--view-mode-full .layout__region--top-first,
.node--type-recipe.node--view-mode-full .layout__region--top-second {
flex: 0 0;
flex-basis: calc(50% - 1rem); /* fixed IE11 bug calc in shorthand */
}
/* Recipe meta */
.node--type-recipe.node--view-mode-full .layout__region--top-second {
display: flex;
flex-direction: column;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
/* Recipe meta */
.node--type-recipe.node--view-mode-full .layout__region--top-second {
align-self: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
}
.node--type-recipe.node--view-mode-full .layout__region--top-second > .recipe-meta {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-bottom: 1em;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top-second > .recipe-meta {
align-items: center;
flex: 0 0 40%;
flex-direction: column;
margin-bottom: 2em;
text-align: center;
}
}
.node--type-recipe.node--view-mode-full .layout__region--top-second > .field--name-field-summary {
flex-basis: 100%;
text-align: left;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top-second > .field--name-field-summary {
flex-basis: 90%;
text-align: center;
}
.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 .layout__region--top-second svg {
flex: 0 0 26px;
height: 26px;
margin-bottom: 0;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top-second svg {
flex: 0 0 auto;
height: 47px;
margin-bottom: 0.889em;
}
.node--type-recipe.node--view-mode-full .field--name-field-summary {
max-width: 796px;
}
.node--type-recipe.node--view-mode-full .layout__region--top-second .recipe-meta .field {
flex: 1 0 auto;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top-second .recipe-meta .field {
width: 100%;
}
}
.node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__label,
.node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__item {
display: inline-block;
padding-left: 0.5em;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__label,
.node--type-recipe.node--view-mode-full .layout__region--top-second .field .field__item {
display: block;
}
}
.node--type-recipe.node--view-mode-full .layout__region--top .field__label {
font-family: 'Open Sans', Verdana, sans-serif;
font-size: 1rem;
line-height: 1.5;
margin: 0;
font-weight: 700;
.node--type-recipe.node--view-mode-full .field--name-field-image {
background-color: #fcece7;
background-image: url(../../../../images/png/umami-background-pattern-1.png);
}
/* Recipe instructions */
.node--type-recipe.node--view-mode-full .layout__region--bottom {
background-color: #f4f2e9;
border: 1px solid #e6eee0;
margin: 0 -1.266em;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0;
}
}
.node--type-recipe.node--view-mode-full .layout__region--bottom > h2 {
flex: 0 1 100%;
font-family: 'Scope One', Georgia, serif;
font-size: 1.424em;
font-weight: 400;
line-height: 1.2;
padding: 1.266rem 1.266rem 1em 1.266rem;
text-align: left;
margin: 0;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--bottom > h2 {
font-size: 2.369rem;
padding: 1.2em;
text-align: center;
}
.node--type-recipe.node--view-mode-full .field--name-field-image img {
display: block;
}
.node--type-recipe.node--view-mode-full .layout__region--bottom-first {
padding: 0 1.266em 1.266em 1.266em;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--bottom-first {
flex: 0 0 33%;
padding: 0 2.369em 2.369em 2.369em;
max-width: 33%; /* fixed IE11 bug */
@media screen and (min-width: 786px) {
.node--type-recipe.node--view-mode-full .field--name-field-image img {
max-width: 796px;
}
}
.node--type-recipe.node--view-mode-full .layout__region--bottom-second {
padding: 0 1.266em 1.266em 1.266em;
/* 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,
.node--type-recipe.node--view-mode-full .field--name-field-number-of-servings,
.node--type-recipe.node--view-mode-full .field--name-field-difficulty {
align-items: center;
min-height: 40px;
margin-bottom: 0.96em;
padding-left: 48px;
background-repeat: no-repeat;
background-position: left center;
background-size: 40px 40px;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--bottom-second {
flex: 0 0 67%;
padding: 0 2.369em 2.369em 2.369em;
max-width: 67%; /* fixed IE11 bug */
}
}
.node--type-recipe.node--view-mode-full .layout__region--bottom .field__label {
font-family: 'Scope One', Georgia, serif;
font-size: 1.266rem;
font-weight: 400;
line-height: 1.2;
padding: 0 0 0.6em 0;
margin: 0 0 1em 0;
border-bottom: 1px solid #eec2cb;
.node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
background-image: url(../../../../images/svg/knife.svg);
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--type-recipe.node--view-mode-full .layout__region--bottom .field__label {
font-size: 1.77rem;
margin: 0 0 1.5em 0;
}
}
.node--type-recipe.node--view-mode-full .field--name-field-ingredients .field__item {
border-bottom: 1px solid #eec2cb;
padding: 0 0 0.6em 0;
margin: 0 0 0.6em 0;
}
.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
margin-left: 0;
padding-left: 0;
list-style-type: none;
.node--type-recipe.node--view-mode-full .field--name-field-cooking-time {
background-image: url(../../../../images/svg/timer.svg);
}
.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol > li {
counter-increment: step-counter;
padding: 0 0 0.6em 2.5em;
min-height: 1.5em;
list-style: none;
position: relative;
.node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
background-image: url(../../../../images/svg/serves.svg);
}
.node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol > li::before {
content: counter(step-counter);
color: #cc2a00;
font-size: 1.5rem;
position: absolute;
top: 0;
left: 0;
.node--type-recipe.node--view-mode-full .field--name-field-difficulty {
background-image: url(../../../../images/svg/difficulty.svg);
}
......@@ -3,69 +3,43 @@
* This file is used to style the 'full' view mode.
*/
.node--view-mode-full {
background-color: #fff;
border-bottom: 1px solid #fcece7;
border-left: none;
border-right: none;
border-top: 1px solid #fcece7;
margin: 0 auto 2.37rem;
padding: 1.266rem;
border-top: 1px solid #fcece7;
border-right: none;
border-bottom: 1px solid #fcece7;
border-left: none;
background-color: #fff;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
@media screen and (min-width: 60rem) {
/* 960px */
.node--view-mode-full {
border-left: 1px solid #fcece7;
border-right: 1px solid #fcece7;
padding: 2.37rem;
border-right: 1px solid #fcece7;
border-left: 1px solid #fcece7;
}
}
.node--view-mode-full > .node__header {
display: flex;
flex-wrap: wrap;
}
.node--view-mode-full .page-title {
flex: 0 0 100%;
}
.node--view-mode-full .node__submitted {
flex: 0 0 100%;
font-size: 0.889em;
margin-bottom: 1.2em;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--view-mode-full .node__submitted {
flex: 0 1 auto;
margin-right: 2rem;
}
font-size: 0.889em;
}
.node--view-mode-full .by-author::after {
content: "•";
font-size: 2em;
vertical-align: middle;
display: inline-block;
margin: 0 0.25ex;
content: "•";
vertical-align: middle;
color: #7cbe8c;
}
.node--view-mode-full .field--name-field-tags {
flex: 0 0 100%;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--view-mode-full .field--name-field-tags {
flex: 0 1 auto;
margin-left: auto;
}
font-size: 2em;
}
.node--view-mode-full .field--name-field-image {
margin-bottom: 1.184rem;
}
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
@media screen and (min-width: 60rem) {
/* 960px */
.node--view-mode-full .field--name-field-image {
margin-bottom: 2.369rem;
}
......
/**
* @file
* This file is used to style fields.
*/
.field--label-inline.field {
display: flex;
flex-wrap: wrap;
}
.field--label-inline .field__label,
.field--label-inline .field__items {
/* Undo use of floats by classy, switch to flexbox */
float: none;
}
/**
* @file
* This file is used to style the 'field-ingredients' field.
*/
.field--name-field-ingredients {
margin-top: 1.184rem;
margin-bottom: 1.184rem;
padding: 1.266rem;
background-color: #fbf5ee;
}
/* Large */
@media screen and (min-width: 60rem) {
/* 960px */
.field--name-field-ingredients {
margin-top: 2.369rem;
margin-bottom: 2.369rem;
padding: 2.369rem;
}
}
.field--name-field-ingredients .field__label {
margin: 0 0 1em 0;
padding: 0 0 0.6em 0;
border-bottom: 1px solid #eec2cb;
font-family: "Scope One", Georgia, serif;
font-size: 1.266rem;
font-weight: 400;
line-height: 1.2;
}
/* Large */
@media screen and (min-width: 60rem) {
/* 960px */
.field--name-field-ingredients .field__label {
margin: 0 0 1.5em 0;
font-size: 1.77rem;
}
}
/* 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;
border-bottom: 1px solid #eec2cb;
break-inside: avoid-column;
}
/**
* @file
* This file is used to style fields with class 'label-items' eg: Recipe
* category
* category.
*/
.label-items {
margin-bottom: 1.2em;
font-size: 0.889rem;
}
.label-items .field__items {
display: flex;
flex-wrap: wrap;
}
.label-items .field__label,
.label-items .field__items,
.label-items .field__item {
display: inline;
padding-right: 0.6rem;
}
/**
* @file
* This file is used to style the 'field-recipe-instruction' field.
*/
.field--name-field-recipe-instruction .field__label {
margin: 1.184rem 0 1em 0;
padding: 0 0 0.6em 0;
border-bottom: 1px solid #eec2cb;
font-family: "Scope One", Georgia, serif;
font-size: 1.266rem;
font-weight: 400;
line-height: 1.2;
}
/* Large */
@media screen and (min-width: 60rem) {
/* 960px */
.field--name-field-recipe-instruction .field__label {
margin: 2.369rem 0 1.5em 0;
font-size: 1.77rem;
}
}
.field--name-field-recipe-instruction ol {