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 @@
}
}
[dir="ltr"] .node--view-mode-teaser .field--name-field-image {
[dir="ltr"] .node--view-mode-teaser .primary-image {
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
}
.node--view-mode-teaser .field--name-field-image {
.node--view-mode-teaser .primary-image {
flex-shrink: 0;
margin: 0
}
.node--view-mode-teaser .field--name-field-image a {
.node--view-mode-teaser .primary-image a {
display: block;
}
.node--view-mode-teaser .field--name-field-image img {
.node--view-mode-teaser .primary-image img {
width: 3.9375rem;
height: 3.9375rem;
-o-object-fit: cover;
......@@ -76,7 +76,7 @@
@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);
height: calc(7.14286vw - 2.31696rem)
}
......@@ -84,7 +84,7 @@
@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);
height: calc(7.14286vw - 2.87946rem)
}
......@@ -92,7 +92,7 @@
@media (min-width: 90rem) {
.node--view-mode-teaser .field--name-field-image img {
.node--view-mode-teaser .primary-image img {
width: 3.61607rem;
height: 3.61607rem
}
......@@ -100,15 +100,15 @@
@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)
}
[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
[dir="rtl"] .node--view-mode-teaser .primary-image {
right: calc(-7.14286vw - -1.07143px)
}
.node--view-mode-teaser .field--name-field-image {
.node--view-mode-teaser .primary-image {
position: absolute;
top: 0;
margin: 0
......@@ -117,22 +117,22 @@
@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)
}
[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
[dir="rtl"] .node--view-mode-teaser .primary-image {
right: calc(-7.14286vw - -0.62946rem)
}
}
@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
}
[dir="rtl"] .node--view-mode-teaser .field--name-field-image {
[dir="rtl"] .node--view-mode-teaser .primary-image {
right: -5.86607rem
}
}
......
......@@ -40,7 +40,7 @@
}
}
& .field--name-field-image {
& .primary-image {
flex-shrink: 0;
margin: 0;
margin-inline-end: var(--sp1);
......
......@@ -19,32 +19,32 @@
line-height: 1.125rem
}
[dir="ltr"] .node__meta .field--name-user-picture img {
.node__meta a {
font-weight: bold;
}
@media (min-width: 31.25rem) {
.node__meta {
margin-bottom: 2.25rem
}
}
[dir="ltr"] .node__author-image img {
margin-right: 0.5625rem
}
[dir="rtl"] .node__meta .field--name-user-picture img {
[dir="rtl"] .node__author-image img {
margin-left: 0.5625rem
}
.node__meta .field--name-user-picture img {
.node__author-image img {
width: 2.8125rem;
height: 2.8125rem;
-o-object-fit: cover;
object-fit: cover;
border-radius: 50%;
}
.node__meta a {
font-weight: bold;
}
@media (min-width: 31.25rem) {
.node__meta {
margin-bottom: 2.25rem
}
}
.node__title a {
padding-bottom: 0.1875rem;
......
......@@ -13,14 +13,6 @@
font-size: 14px;
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 {
font-weight: bold;
}
......@@ -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 {
& a {
padding-block-end: 3px;
......
......@@ -92,7 +92,11 @@
{{ title_suffix }}
{% if display_submitted %}
<div class="node__meta">
{% if author_picture %}
<div class="node__author-image">
{{ author_picture }}
</div>
{% endif %}
<span{{ author_attributes }}>
{{ 'By'|t }} {% apply spaceless %}{{ author_name }}{% endapply %}, {{ date }}
</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