Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Issue #3173008 by anmolgoyal74, mherchel, paulocs, kostyashupenko, FMB, andy-blum: [Code Review] wide image within article template a reusable component/class 

(cherry picked from commit f65ce593bd)
merge-requests/860/head
Lauri Eskola 2021-06-24 16:26:57 +03:00
parent be1d425255
commit fd638d02d9
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
6 changed files with 211 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
core/themes/olivero/css/components/field-image.css
View File

@ -1,152 +0,0 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Field image field.
*/
[dir="ltr"] .page-node-type-article .field--name-field-image {
margin-left: 0
}
[dir="rtl"] .page-node-type-article .field--name-field-image {
margin-right: 0
}
[dir="ltr"] .page-node-type-article .field--name-field-image {
margin-right: 0
}
[dir="rtl"] .page-node-type-article .field--name-field-image {
margin-left: 0
}
.page-node-type-article .field--name-field-image {
margin-top: 0.5625rem;
margin-bottom: 2.25rem
}
@media (min-width: 43.75rem) {
[dir="ltr"] .page-node-type-article .field--name-field-image {
margin-left: -7.14286vw
}
[dir="rtl"] .page-node-type-article .field--name-field-image {
margin-right: -7.14286vw
}
.page-node-type-article .field--name-field-image {
width: calc(100vw - 2.25rem);
margin-top: 2.25rem;
margin-bottom: 4.5rem
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .page-node-type-article .field--name-field-image {
margin-left: calc(-7.14286vw - -1.07143px)
}
[dir="rtl"] .page-node-type-article .field--name-field-image {
margin-right: calc(-7.14286vw - -1.07143px)
}
.page-node-type-article .field--name-field-image {
width: calc(85.71429vw - 3.05357rem)
}
}
@media (min-width: 75rem) {
[dir="ltr"] .page-node-type-article .field--name-field-image {
margin-left: calc(-7.14286vw - -0.62946rem)
}
[dir="rtl"] .page-node-type-article .field--name-field-image {
margin-right: calc(-7.14286vw - -0.62946rem)
}
.page-node-type-article .field--name-field-image {
width: calc(85.71429vw - 9.80357rem)
}
}
@media (min-width: 90rem) {
[dir="ltr"] .page-node-type-article .field--name-field-image {
margin-left: -5.86607rem
}
[dir="rtl"] .page-node-type-article .field--name-field-image {
margin-right: -5.86607rem
}
.page-node-type-article .field--name-field-image {
width: 68.14286rem
}
}
.page-node-type-article {
/* Ensure that image doesn't overlap sidebar. */
}
@media (min-width: 62.5rem) {
.page-node-type-article .sidebar-grid .field--name-field-image {
width: calc(64.28571vw - 2.85268rem)
}
}
@media (min-width: 75rem) {
.page-node-type-article .sidebar-grid .field--name-field-image {
width: calc(64.28571vw - 7.91518rem)
}
}
@media (min-width: 81.25rem) {
.page-node-type-article .sidebar-grid .field--name-field-image {
width: calc(71.42857vw - 8.54464rem)
}
}
@media (min-width: 90rem) {
.page-node-type-article .sidebar-grid .field--name-field-image {
width: 56.41071rem
}
}
.page-node-type-article {
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
}
[dir="ltr"] .page-node-type-article .layout-builder .field--name-field-image {
margin-left: 0
}
[dir="rtl"] .page-node-type-article .layout-builder .field--name-field-image {
margin-right: 0
}
[dir="ltr"] .page-node-type-article .layout-builder .field--name-field-image {
margin-right: 0
}
[dir="rtl"] .page-node-type-article .layout-builder .field--name-field-image {
margin-left: 0
}
.page-node-type-article .layout-builder .field--name-field-image {
max-width: 100%;
}

62
core/themes/olivero/css/components/field-image.pcss.css
View File

@ -1,62 +0,0 @@
/**
* @file
* Field image field.
*/
@import "../base/variables.pcss.css";
.page-node-type-article {
& .field--name-field-image {
margin-block-start: var(--sp0-5);
margin-block-end: var(--sp2);
margin-inline-start: 0;
margin-inline-end: 0;
@media (--grid-md) {
width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
margin-block: var(--sp2) var(--sp4);
margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
}
@media (--lg) {
width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
}
@media (--nav) {
width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
}
@media (--grid-max) {
width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
}
}
/* Ensure that image doesn't overlap sidebar. */
& .sidebar-grid .field--name-field-image {
@media (--lg) {
width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg));
}
@media (--nav) {
width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav));
}
@media (--xl) {
width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
}
@media (--grid-max) {
width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
}
}
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
& .layout-builder .field--name-field-image {
max-width: 100%;
margin-inline-start: 0;
margin-inline-end: 0;
}
}

146
core/themes/olivero/css/components/wide-image.css Normal file
View File

@ -0,0 +1,146 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Wide image component.
*/
[dir="ltr"] .wide-image {
margin-left: 0
}
[dir="rtl"] .wide-image {
margin-right: 0
}
[dir="ltr"] .wide-image {
margin-right: 0
}
[dir="rtl"] .wide-image {
margin-left: 0
}
.wide-image {
margin-top: 0.5625rem;
margin-bottom: 2.25rem
}
@media (min-width: 43.75rem) {
[dir="ltr"] .wide-image {
margin-left: -7.14286vw
}
[dir="rtl"] .wide-image {
margin-right: -7.14286vw
}
.wide-image {
width: calc(100vw - 2.25rem);
margin-top: 2.25rem;
margin-bottom: 4.5rem
}
}
@media (min-width: 62.5rem) {
[dir="ltr"] .wide-image {
margin-left: calc(-7.14286vw - -1.07143px)
}
[dir="rtl"] .wide-image {
margin-right: calc(-7.14286vw - -1.07143px)
}
.wide-image {
width: calc(85.71429vw - 3.05357rem)
}
}
@media (min-width: 75rem) {
[dir="ltr"] .wide-image {
margin-left: calc(-7.14286vw - -0.62946rem)
}
[dir="rtl"] .wide-image {
margin-right: calc(-7.14286vw - -0.62946rem)
}
.wide-image {
width: calc(85.71429vw - 9.80357rem)
}
}
@media (min-width: 90rem) {
[dir="ltr"] .wide-image {
margin-left: -5.86607rem
}
[dir="rtl"] .wide-image {
margin-right: -5.86607rem
}
.wide-image {
width: 68.14286rem
}
}
/* Ensure that image doesn't overlap sidebar. */
@media (min-width: 62.5rem) {
.sidebar-grid .wide-image {
width: calc(64.28571vw - 2.85268rem)
}
}
@media (min-width: 75rem) {
.sidebar-grid .wide-image {
width: calc(64.28571vw - 7.91518rem)
}
}
@media (min-width: 81.25rem) {
.sidebar-grid .wide-image {
width: calc(71.42857vw - 8.54464rem)
}
}
@media (min-width: 90rem) {
.sidebar-grid .wide-image {
width: 56.41071rem
}
}
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
[dir="ltr"] .layout-builder .wide-image {
margin-left: 0
}
[dir="rtl"] .layout-builder .wide-image {
margin-right: 0
}
[dir="ltr"] .layout-builder .wide-image {
margin-right: 0
}
[dir="rtl"] .layout-builder .wide-image {
margin-left: 0
}
.layout-builder .wide-image {
max-width: 100%;
}

60
core/themes/olivero/css/components/wide-image.pcss.css Normal file
View File

@ -0,0 +1,60 @@
/**
* @file
* Wide image component.
*/
@import "../base/variables.pcss.css";
.wide-image {
margin-block-start: var(--sp0-5);
margin-block-end: var(--sp2);
margin-inline-start: 0;
margin-inline-end: 0;
@media (--grid-md) {
width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
margin-block: var(--sp2) var(--sp4);
margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
}
@media (--lg) {
width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
}
@media (--nav) {
width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
}
@media (--grid-max) {
width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
}
}
/* Ensure that image doesn't overlap sidebar. */
.sidebar-grid .wide-image {
@media (--lg) {
width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg));
}
@media (--nav) {
width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav));
}
@media (--xl) {
width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
}
@media (--grid-max) {
width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
}
}
/* Ensure that image doesn't overlap layout builder sections when editing layouts. */
.layout-builder .wide-image {
max-width: 100%;
margin-inline-start: 0;
margin-inline-end: 0;
}

2
core/themes/olivero/olivero.libraries.yml
View File

@ -27,7 +27,6 @@ global-styling:
css/components/container-inline.module.css: {}
css/components/fieldset.css: {}
css/components/field.css: {}
css/components/field-image.css: {}
css/components/form.css: {}
css/components/form-boolean.css: {}
css/components/form-text.css: {}
@ -54,6 +53,7 @@ global-styling:
css/components/table.css: {}
css/components/text-content.css: {}
css/components/tabledrag.css: {}
css/components/wide-image.css: {}
js:
js/checkbox.js: {}

4
core/themes/olivero/olivero.theme
View File

@ -357,6 +357,10 @@ function olivero_preprocess_field(&$variables) {
if (in_array($variables['field_type'], $rich_field_types, TRUE)) {
$variables['attributes']['class'][] = 'text-content';
}
if ($variables['field_type'] == 'image' && $variables['element']['#view_mode'] == 'full' && !$variables["element"]["#is_multiple"]) {
$variables['attributes']['class'][] = 'wide-image';
}
}
/**