Unverified Commit 3296fcb5 authored by lauriii's avatar lauriii
Browse files

Issue #3173016 by mherchel, djsagar, Gauravmahlawat, chrisfree, proeung:...

Issue #3173016 by mherchel, djsagar, Gauravmahlawat, chrisfree, proeung: Address code feedback for Olivero's node.pcss.css partials
parent 03b0c2ba
...@@ -49,24 +49,24 @@ ...@@ -49,24 +49,24 @@
} }
} }
[dir="ltr"] .node--view-mode-teaser .field--name-field-image { [dir="ltr"] .node--view-mode-teaser .primary-image {
margin-right: 1.125rem margin-right: 1.125rem
} }
[dir="rtl"] .node--view-mode-teaser .field--name-field-image { [dir="rtl"] .node--view-mode-teaser .primary-image {
margin-left: 1.125rem margin-left: 1.125rem
} }
.node--view-mode-teaser .field--name-field-image { .node--view-mode-teaser .primary-image {
flex-shrink: 0; flex-shrink: 0;
margin: 0 margin: 0
} }
.node--view-mode-teaser .field--name-field-image a { .node--view-mode-teaser .primary-image a {
display: block; display: block;
} }
.node--view-mode-teaser .field--name-field-image img { .node--view-mode-teaser .primary-image img {
width: 3.9375rem; width: 3.9375rem;
height: 3.9375rem; height: 3.9375rem;
-o-object-fit: cover; -o-object-fit: cover;
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
.node--view-mode-teaser .field--name-field-image img { .node--view-mode-teaser .primary-image img {
width: calc(7.14286vw - 2.31696rem); width: calc(7.14286vw - 2.31696rem);
height: calc(7.14286vw - 2.31696rem) height: calc(7.14286vw - 2.31696rem)
} }
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
.node--view-mode-teaser .field--name-field-image img { .node--view-mode-teaser .primary-image img {
width: calc(7.14286vw - 2.87946rem); width: calc(7.14286vw - 2.87946rem);
height: calc(7.14286vw - 2.87946rem) height: calc(7.14286vw - 2.87946rem)
} }
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
@media (min-width: 90rem) { @media (min-width: 90rem) {
.node--view-mode-teaser .field--name-field-image img { .node--view-mode-teaser .primary-image img {
width: 3.61607rem; width: 3.61607rem;
height: 3.61607rem height: 3.61607rem
} }
...@@ -100,15 +100,15 @@ ...@@ -100,15 +100,15 @@
@media (min-width: 62.5rem) { @media (min-width: 62.5rem) {
[dir="ltr"] .node--view-mode-teaser .field--name-field-image { [dir="ltr"] .node--view-mode-teaser .primary-image {
left: calc(-7.14286vw - -1.07143px) left: calc(-7.14286vw - -1.07143px)
} }
[dir="rtl"] .node--view-mode-teaser .field--name-field-image { [dir="rtl"] .node--view-mode-teaser .primary-image {
right: calc(-7.14286vw - -1.07143px) right: calc(-7.14286vw - -1.07143px)
} }
.node--view-mode-teaser .field--name-field-image { .node--view-mode-teaser .primary-image {
position: absolute; position: absolute;
top: 0; top: 0;
margin: 0 margin: 0
...@@ -117,22 +117,22 @@ ...@@ -117,22 +117,22 @@
@media (min-width: 75rem) { @media (min-width: 75rem) {
[dir="ltr"] .node--view-mode-teaser .field--name-field-image { [dir="ltr"] .node--view-mode-teaser .primary-image {
left: calc(-7.14286vw - -0.62946rem) left: calc(-7.14286vw - -0.62946rem)
} }
[dir="rtl"] .node--view-mode-teaser .field--name-field-image { [dir="rtl"] .node--view-mode-teaser .primary-image {
right: calc(-7.14286vw - -0.62946rem) right: calc(-7.14286vw - -0.62946rem)
} }
} }
@media (min-width: 90rem) { @media (min-width: 90rem) {
[dir="ltr"] .node--view-mode-teaser .field--name-field-image { [dir="ltr"] .node--view-mode-teaser .primary-image {
left: -5.86607rem left: -5.86607rem
} }
[dir="rtl"] .node--view-mode-teaser .field--name-field-image { [dir="rtl"] .node--view-mode-teaser .primary-image {
right: -5.86607rem right: -5.86607rem
} }
} }
......
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
} }
} }
& .field--name-field-image { & .primary-image {
flex-shrink: 0; flex-shrink: 0;
margin: 0; margin: 0;
margin-inline-end: var(--sp1); margin-inline-end: var(--sp1);
......
...@@ -19,22 +19,6 @@ ...@@ -19,22 +19,6 @@
line-height: 1.125rem line-height: 1.125rem
} }
[dir="ltr"] .node__meta .field--name-user-picture img {
margin-right: 0.5625rem
}
[dir="rtl"] .node__meta .field--name-user-picture img {
margin-left: 0.5625rem
}
.node__meta .field--name-user-picture img {
width: 2.8125rem;
height: 2.8125rem;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.node__meta a { .node__meta a {
font-weight: bold; font-weight: bold;
} }
...@@ -46,6 +30,22 @@ ...@@ -46,6 +30,22 @@
} }
} }
[dir="ltr"] .node__author-image img {
margin-right: 0.5625rem
}
[dir="rtl"] .node__author-image img {
margin-left: 0.5625rem
}
.node__author-image img {
width: 2.8125rem;
height: 2.8125rem;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.node__title a { .node__title a {
padding-bottom: 0.1875rem; padding-bottom: 0.1875rem;
transition: background-size 0.2s, color 0.2s; transition: background-size 0.2s, color 0.2s;
......
...@@ -13,14 +13,6 @@ ...@@ -13,14 +13,6 @@
font-size: 14px; font-size: 14px;
line-height: var(--sp); line-height: var(--sp);
& .field--name-user-picture img {
width: var(--sp2-5);
height: var(--sp2-5);
margin-inline-end: var(--sp0-5);
object-fit: cover;
border-radius: 50%;
}
& a { & a {
font-weight: bold; font-weight: bold;
} }
...@@ -30,6 +22,14 @@ ...@@ -30,6 +22,14 @@
} }
} }
.node__author-image img {
width: var(--sp2-5);
height: var(--sp2-5);
margin-inline-end: var(--sp0-5);
object-fit: cover;
border-radius: 50%;
}
.node__title { .node__title {
& a { & a {
padding-block-end: 3px; padding-block-end: 3px;
......
...@@ -92,7 +92,11 @@ ...@@ -92,7 +92,11 @@
{{ title_suffix }} {{ title_suffix }}
{% if display_submitted %} {% if display_submitted %}
<div class="node__meta"> <div class="node__meta">
{{ author_picture }} {% if author_picture %}
<div class="node__author-image">
{{ author_picture }}
</div>
{% endif %}
<span{{ author_attributes }}> <span{{ author_attributes }}>
{{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }} {{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }}
</span> </span>
......
{#
/**
* @file
* Theme override for the image field.
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
*
* @see template_preprocess_field()
*/
#}
{% extends 'field.html.twig' %}
{% set attributes = attributes.addClass('primary-image') %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment