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: ...@@ -37,7 +37,7 @@ content:
type: entity_reference_label type: entity_reference_label
weight: 0 weight: 0
region: content region: content
label: above label: inline
settings: settings:
link: true link: true
third_party_settings: { } third_party_settings: { }
......
...@@ -26,7 +26,7 @@ bundle: recipe ...@@ -26,7 +26,7 @@ bundle: recipe
mode: default mode: default
content: content:
field_cooking_time: field_cooking_time:
weight: 1 weight: 5
label: above label: above
settings: settings:
thousand_separator: '' thousand_separator: ''
...@@ -35,7 +35,7 @@ content: ...@@ -35,7 +35,7 @@ content:
type: number_integer type: number_integer
region: content region: content
field_difficulty: field_difficulty:
weight: 2 weight: 7
label: above label: above
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
...@@ -51,7 +51,7 @@ content: ...@@ -51,7 +51,7 @@ content:
type: responsive_image type: responsive_image
region: content region: content
field_ingredients: field_ingredients:
weight: 4 weight: 8
label: above label: above
settings: settings:
link_to_entity: false link_to_entity: false
...@@ -59,7 +59,7 @@ content: ...@@ -59,7 +59,7 @@ content:
type: string type: string
region: content region: content
field_number_of_servings: field_number_of_servings:
weight: 5 weight: 6
label: above label: above
settings: settings:
thousand_separator: '' thousand_separator: ''
...@@ -68,7 +68,7 @@ content: ...@@ -68,7 +68,7 @@ content:
type: number_integer type: number_integer
region: content region: content
field_preparation_time: field_preparation_time:
weight: 6 weight: 4
label: above label: above
settings: settings:
thousand_separator: '' thousand_separator: ''
...@@ -77,7 +77,7 @@ content: ...@@ -77,7 +77,7 @@ content:
type: number_integer type: number_integer
region: content region: content
field_recipe_category: field_recipe_category:
weight: 7 weight: 1
label: above label: above
settings: settings:
link: true link: true
...@@ -85,21 +85,21 @@ content: ...@@ -85,21 +85,21 @@ content:
type: entity_reference_label type: entity_reference_label
region: content region: content
field_recipe_instruction: field_recipe_instruction:
weight: 8 weight: 9
label: above label: above
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
type: text_default type: text_default
region: content region: content
field_summary: field_summary:
weight: 9 weight: 0
label: hidden label: hidden
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
type: text_default type: text_default
region: content region: content
field_tags: field_tags:
weight: 10 weight: 2
label: above label: above
settings: settings:
link: true link: true
...@@ -107,7 +107,7 @@ content: ...@@ -107,7 +107,7 @@ content:
type: entity_reference_label type: entity_reference_label
region: content region: content
links: links:
weight: 0 weight: 10
region: content region: content
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
......
...@@ -27,8 +27,8 @@ bundle: recipe ...@@ -27,8 +27,8 @@ bundle: recipe
mode: full mode: full
content: content:
field_cooking_time: field_cooking_time:
weight: 1 weight: 5
label: above label: inline
settings: settings:
thousand_separator: '' thousand_separator: ''
prefix_suffix: true prefix_suffix: true
...@@ -36,8 +36,8 @@ content: ...@@ -36,8 +36,8 @@ content:
type: number_integer type: number_integer
region: content region: content
field_difficulty: field_difficulty:
weight: 2 weight: 7
label: above label: inline
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
type: list_default type: list_default
...@@ -52,7 +52,7 @@ content: ...@@ -52,7 +52,7 @@ content:
type: responsive_image type: responsive_image
region: content region: content
field_ingredients: field_ingredients:
weight: 4 weight: 8
label: above label: above
settings: settings:
link_to_entity: false link_to_entity: false
...@@ -60,8 +60,8 @@ content: ...@@ -60,8 +60,8 @@ content:
type: string type: string
region: content region: content
field_number_of_servings: field_number_of_servings:
weight: 5 weight: 6
label: above label: inline
settings: settings:
thousand_separator: '' thousand_separator: ''
prefix_suffix: false prefix_suffix: false
...@@ -69,8 +69,8 @@ content: ...@@ -69,8 +69,8 @@ content:
type: number_integer type: number_integer
region: content region: content
field_preparation_time: field_preparation_time:
weight: 6 weight: 4
label: above label: inline
settings: settings:
thousand_separator: '' thousand_separator: ''
prefix_suffix: true prefix_suffix: true
...@@ -78,40 +78,36 @@ content: ...@@ -78,40 +78,36 @@ content:
type: number_integer type: number_integer
region: content region: content
field_recipe_category: field_recipe_category:
weight: 7 weight: 1
label: above label: inline
settings: settings:
link: true link: true
third_party_settings: { } third_party_settings: { }
type: entity_reference_label type: entity_reference_label
region: content region: content
field_recipe_instruction: field_recipe_instruction:
weight: 8 weight: 9
label: above label: above
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
type: text_default type: text_default
region: content region: content
field_summary: field_summary:
weight: 9 weight: 0
label: hidden label: hidden
settings: { } settings: { }
third_party_settings: { } third_party_settings: { }
type: text_default type: text_default
region: content region: content
field_tags: field_tags:
weight: 10 weight: 2
label: above label: inline
settings: settings:
link: true link: true
third_party_settings: { } third_party_settings: { }
type: entity_reference_label type: entity_reference_label
region: content region: content
links:
weight: 0
region: content
settings: { }
third_party_settings: { }
hidden: hidden:
content_moderation_control: true content_moderation_control: true
field_author: 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 * @file
* This file is used to style the recipe using the 'full' view mode. * 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 { .node--type-recipe.node--view-mode-full .field--name-field-summary,
flex: 0 0 100%; .node--type-recipe.node--view-mode-full .field--name-field-recipe-instruction ol {
} /* Limit text width for legibility */
/* Large */ max-width: 796px;
@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 .layout__region--top-second svg { .node--type-recipe.node--view-mode-full .field--name-field-summary {
flex: 0 0 26px; max-width: 796px;
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 .layout__region--top-second .recipe-meta .field { .node--type-recipe.node--view-mode-full .field--name-field-image {
flex: 1 0 auto; background-color: #fcece7;
} background-image: url(../../../../images/png/umami-background-pattern-1.png);
/* 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;
} }
/* Recipe instructions */ .node--type-recipe.node--view-mode-full .field--name-field-image img {
.node--type-recipe.node--view-mode-full .layout__region--bottom { display: block;
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 .layout__region--bottom-first { @media screen and (min-width: 786px) {
padding: 0 1.266em 1.266em 1.266em; .node--type-recipe.node--view-mode-full .field--name-field-image img {
} max-width: 796px;
/* 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 */
} }
} }
.node--type-recipe.node--view-mode-full .layout__region--bottom-second { /* Icons for the recipe meta fields */
padding: 0 1.266em 1.266em 1.266em; .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 */ .node--type-recipe.node--view-mode-full .field--name-field-preparation-time {
@media screen and (min-width: 60rem) { /* 960px */ background-image: url(../../../../images/svg/knife.svg);
.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;
} }
/* Large */ .node--type-recipe.node--view-mode-full .field--name-field-cooking-time {
@media screen and (min-width: 60rem) { /* 960px */ background-image: url(../../../../images/svg/timer.svg);
.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-recipe-instruction ol > li { .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
counter-increment: step-counter; background-image: url(../../../../images/svg/serves.svg);
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-recipe-instruction ol > li::before { .node--type-recipe.node--view-mode-full .field--name-field-difficulty {
content: counter(step-counter); background-image: url(../../../../images/svg/difficulty.svg);
color: #cc2a00;
font-size: 1.5rem;
position: absolute;
top: 0;
left: 0;
} }
...@@ -3,69 +3,43 @@ ...@@ -3,69 +3,43 @@
* This file is used to style the 'full' view mode. * This file is used to style the 'full' view mode.
*/ */
.node--view-mode-full { .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; margin: 0 auto 2.37rem;
padding: 1.266rem; padding: 1.266rem;
border-top: 1px solid #fcece7;
border-right: none;
border-bottom: 1px solid #fcece7;
border-left: none;
background-color: #fff;
} }
/* Large */ /* Large */
@media screen and (min-width: 60rem) { /* 960px */ @media screen and (min-width: 60rem) {
/* 960px */
.node--view-mode-full { .node--view-mode-full {
border-left: 1px solid #fcece7;
border-right: 1px solid #fcece7;
padding: 2.37rem; 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 { .node--view-mode-full .node__submitted {
flex: 0 0 100%;
font-size: 0.889em;
margin-bottom: 1.2em; margin-bottom: 1.2em;
} font-size: 0.889em;
/* Large */
@media screen and (min-width: 60rem) { /* 960px */
.node--view-mode-full .node__submitted {
flex: 0 1 auto;
margin-right: 2rem;
}
} }
.node--view-mode-full .by-author::after { .node--view-mode-full .by-author::after {
content: "•";
font-size: 2em;
vertical-align: middle;
display: inline-block; display: inline-block;
margin: 0 0.25ex; margin: 0 0.25ex;
content: "•";
vertical-align: middle;
color: #7cbe8c; color: #7cbe8c;
} font-size: 2em;
.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;
}
} }
.node--view-mode-full .field--name-field-image { .node--view-mode-full .field--name-field-image {
margin-bottom: 1.184rem; margin-bottom: 1.184rem;
} }
/* Large */ /* Large */
@media screen and (min-width: 60rem) { /* 960px */ @media screen and (min-width: 60rem) {