Issue #3347672 by mortona2k, finnsky, markconroy, Gauravvvv, smustgrave, e0ipso, andypost, ipwa, lauriii: Create new SDC component for Umami (Common Card)
Sally Young
commit
aac1528b43
|
|
@ -0,0 +1,38 @@
|
|||
# This is so your IDE knows about the syntax for fixes and autocomplete.
|
||||
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
|
||||
|
||||
# The human readable name.
|
||||
name: Card
|
||||
|
||||
# Status can be: "experimental", "stable", "deprecated", "obsolete".
|
||||
status: experimental
|
||||
|
||||
# Schema for the props. We support www.json-schema.org. Learn more about the
|
||||
# syntax there.
|
||||
props:
|
||||
type: object
|
||||
properties:
|
||||
attributes:
|
||||
type: Drupal\Core\Template\Attribute
|
||||
title: Attributes
|
||||
description: Wrapper attributes.
|
||||
html_tag:
|
||||
type: string
|
||||
title: HTML tag for wrapper
|
||||
|
||||
# Limit the available options by using enums.
|
||||
enum:
|
||||
- article
|
||||
- div
|
||||
# Provide a default value
|
||||
default: article
|
||||
|
||||
# Slots always hold arbitrary markup. We know that beforehand, so no need for
|
||||
# a schema for slots.
|
||||
slots:
|
||||
# The key is the name of the slot. In your template you will use
|
||||
# {% block content %}.
|
||||
content:
|
||||
title: Content
|
||||
required: true
|
||||
description: The card content.
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
.umami-card {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid #fcece7;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.umami-card__content {
|
||||
display: grid;
|
||||
gap: 1.2rem;
|
||||
}
|
||||
|
||||
.umami-card__label-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.1rem;
|
||||
margin: 0;
|
||||
color: #5f635d;
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
|
||||
.umami-card__read-more {
|
||||
justify-self: start;
|
||||
}
|
||||
|
||||
.umami-card__title {
|
||||
flex-grow: 1;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-size: 1.424rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.umami-card__title a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.umami-card__title a:hover,
|
||||
.umami-card__title a:focus {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.umami-card__wrapper {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-rows: 1fr auto auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.umami-card--alt .umami-card__wrapper {
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
|
||||
.umami-card .field--name-field-media-image {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.umami-card .field--name-field-media-image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<{{html_tag|default('article')}}{{attributes.addClass('umami-card')}}>
|
||||
<div class="umami-card__wrapper">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
</{{html_tag|default('article')}}>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
# This is so your IDE knows about the syntax for fixes and autocomplete.
|
||||
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
|
||||
|
||||
# The human readable name.
|
||||
name: Read More
|
||||
|
||||
# Status can be: "experimental", "stable", "deprecated", "obsolete".
|
||||
status: experimental
|
||||
|
||||
# Schema for the props. We support www.json-schema.org. Learn more about the
|
||||
# syntax there.
|
||||
props:
|
||||
type: object
|
||||
properties:
|
||||
a11y:
|
||||
type: string
|
||||
title: Read More screen reader text
|
||||
text:
|
||||
type: string
|
||||
title: Read More text
|
||||
url:
|
||||
type: string
|
||||
title: Read More url
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
* This file is used to style the more link.
|
||||
*/
|
||||
|
||||
.read-more__link {
|
||||
.read-more {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -13,31 +13,26 @@
|
|||
border-bottom: 1px solid transparent;
|
||||
background-color: inherit;
|
||||
}
|
||||
[dir=rtl] .read-more__link {
|
||||
[dir=rtl] .read-more {
|
||||
padding-right: unset;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.read-more__link:focus,
|
||||
.read-more__link:hover {
|
||||
.read-more:focus,
|
||||
.read-more:hover {
|
||||
text-decoration: none;
|
||||
color: #008068;
|
||||
border-bottom: 1px solid #008068;
|
||||
background-color: inherit;
|
||||
}
|
||||
.read-more__link::before {
|
||||
.read-more__icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0; /* LTR */
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-top: -7px;
|
||||
content: "";
|
||||
background-image: url("../../../../images/svg/pointer.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
background-size: contain;
|
||||
}
|
||||
[dir=rtl] .read-more__link::before {
|
||||
[dir=rtl] .read-more__icon {
|
||||
right: unset;
|
||||
left: 0;
|
||||
transform: rotate(180deg);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<a class="read-more {{ extra_classes }}" href="{{ url }}">
|
||||
{{ text }}
|
||||
<span class="visually-hidden">
|
||||
- {{ a11y }}
|
||||
</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" class="read-more__icon">
|
||||
<path fill="none" d="M159.19 117.37v365.26L341.82 300 159.19 117.37z"/>
|
||||
<path fill="#008068" d="M341.82 300L159.19 482.63v98.99L440.81 300 159.19 18.38v98.99L341.82 300z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
# This is so your IDE knows about the syntax for fixes and autocomplete.
|
||||
$schema: https://git.drupalcode.org/project/drupal/-/raw/10.1.x/core/modules/sdc/src/metadata.schema.json
|
||||
|
||||
# The human readable name.
|
||||
name: Title
|
||||
|
||||
# Status can be: "experimental", "stable", "deprecated", "obsolete".
|
||||
status: experimental
|
||||
|
||||
# Schema for the props. We support www.json-schema.org. Learn more about the
|
||||
# syntax there.
|
||||
props:
|
||||
type: object
|
||||
properties:
|
||||
attributes:
|
||||
type: Drupal\Core\Template\Attribute
|
||||
title: Attributes
|
||||
description: Wrapper attributes.
|
||||
html_tag:
|
||||
type: string
|
||||
title: HTML tag for title
|
||||
# Limit the available options by using enums.
|
||||
enum:
|
||||
- h1
|
||||
- h2
|
||||
- h3
|
||||
- h4
|
||||
- h5
|
||||
- h6
|
||||
- span
|
||||
# Provide a default value
|
||||
default: h2
|
||||
title_prefix:
|
||||
type: object
|
||||
title: Title prefix
|
||||
title_suffix:
|
||||
type: object
|
||||
title: Title suffix
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{{ title_prefix }}
|
||||
<{{ html_tag|default('h2') }}{{ attributes.addClass('umami-title') }}>
|
||||
{{ label }}
|
||||
</{{ html_tag|default('h2') }}>
|
||||
{{ title_suffix }}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* This file is used to style the 'Card common alt' view mode.
|
||||
*/
|
||||
|
||||
.node--view-mode-card-common-alt .node__content {
|
||||
order: -1;
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* This file is used to style the 'Card common' view mode.
|
||||
*/
|
||||
|
||||
.node--view-mode-card-common .read-more {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
/**
|
||||
* @file
|
||||
* This file is used to style the 'Card' view mode.
|
||||
*/
|
||||
|
||||
.view-mode-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
border: 1px solid #fcece7;
|
||||
}
|
||||
|
||||
.view-mode-card .node__title {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.view-mode-card .field--name-title {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-size: 1.424rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.view-mode-card .node__link {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.view-mode-card .node__link:focus,
|
||||
.view-mode-card .node__link:hover {
|
||||
text-decoration: underline;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.view-mode-card .field--name-field-media-image img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1.2em;
|
||||
}
|
||||
|
||||
.view-mode-card .label-items {
|
||||
color: #5f635d;
|
||||
font-size: 0.889rem;
|
||||
}
|
||||
|
|
@ -66,8 +66,49 @@
|
|||
* @see template_preprocess_node()
|
||||
*/
|
||||
#}
|
||||
{% extends "node--card-common.html.twig" %}
|
||||
{%
|
||||
set classes = [
|
||||
'node',
|
||||
'node--type-' ~ node.bundle|clean_class,
|
||||
node.isPromoted() ? 'node--promoted',
|
||||
node.isSticky() ? 'node--sticky',
|
||||
not node.isPublished() ? 'node--unpublished',
|
||||
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
|
||||
'umami-card--alt',
|
||||
]
|
||||
%}
|
||||
{{ attach_library('umami/classy.node') }}
|
||||
|
||||
{% block libraries %}
|
||||
{{ attach_library('umami/view-mode-card-common-alt') }}
|
||||
{% endblock %}
|
||||
{% set read_more %}
|
||||
{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
|
||||
{% endset %}
|
||||
|
||||
{% embed "umami:card" with {
|
||||
attributes: attributes.addClass(classes),
|
||||
content,
|
||||
content_attributes,
|
||||
label,
|
||||
title_attributes,
|
||||
title_prefix,
|
||||
title_suffix,
|
||||
read_more,
|
||||
url,
|
||||
} only %}
|
||||
{% block content %}
|
||||
<div{{content_attributes.addClass('umami-card__content')}}>
|
||||
{{ content }}
|
||||
</div>
|
||||
{% include "umami:title" with {
|
||||
attributes: title_attributes.addClass('umami-card__title'),
|
||||
label,
|
||||
title_prefix,
|
||||
title_suffix,
|
||||
} only %}
|
||||
{% include "umami:read-more" with {
|
||||
url,
|
||||
text: read_more,
|
||||
a11y: label,
|
||||
extra_classes: 'umami-card__read-more'
|
||||
} only %}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
|
|
|
|||
|
|
@ -73,34 +73,41 @@
|
|||
node.isPromoted() ? 'node--promoted',
|
||||
node.isSticky() ? 'node--sticky',
|
||||
not node.isPublished() ? 'node--unpublished',
|
||||
'view-mode-card',
|
||||
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
|
||||
]
|
||||
%}
|
||||
{{ attach_library('umami/classy.node') }}
|
||||
{{ attach_library('umami/view-mode-card') }}
|
||||
{% block libraries %}
|
||||
{{ attach_library('umami/view-mode-card-common') }}
|
||||
{% endblock %}
|
||||
|
||||
<article{{ attributes.addClass(classes) }}>
|
||||
{% set read_more %}
|
||||
{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
|
||||
{% endset %}
|
||||
|
||||
{{ title_prefix }}
|
||||
{% if label and not page %}
|
||||
<h2{{ title_attributes.addClass('node__title') }}>
|
||||
{{ label }}
|
||||
</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
|
||||
<div class="read-more">
|
||||
<a class="read-more__link" href="{{ url }}">
|
||||
{% trans %}View {{ node.type.entity.label() }}{% endtrans %} <span class="visually-hidden"> - {{ label }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div{{ content_attributes.addClass('node__content') }}>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
{% embed "umami:card" with {
|
||||
attributes: attributes.addClass(classes),
|
||||
content,
|
||||
content_attributes,
|
||||
label,
|
||||
title_attributes,
|
||||
title_prefix,
|
||||
title_suffix,
|
||||
read_more,
|
||||
url,
|
||||
} only %}
|
||||
{% block content %}
|
||||
{% include "umami:title" with {
|
||||
attributes: title_attributes.addClass('umami-card__title'),
|
||||
label,
|
||||
title_prefix,
|
||||
title_suffix,
|
||||
} only %}
|
||||
{% include "umami:read-more" with {
|
||||
url,
|
||||
text: read_more,
|
||||
a11y: label,
|
||||
extra_classes: 'umami-card__read-more'
|
||||
} only %}
|
||||
<div{{content_attributes.addClass('umami-card__content')}}>
|
||||
{{ content }}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
|
|
|
|||
|
|
@ -73,31 +73,41 @@
|
|||
node.isPromoted() ? 'node--promoted',
|
||||
node.isSticky() ? 'node--sticky',
|
||||
not node.isPublished() ? 'node--unpublished',
|
||||
'view-mode-card',
|
||||
view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
|
||||
]
|
||||
%}
|
||||
{{ attach_library('umami/classy.node') }}
|
||||
{{ attach_library('umami/view-mode-card') }}
|
||||
|
||||
<article{{ attributes.addClass(classes) }}>
|
||||
{% set read_more %}
|
||||
{% trans %}View {{ node.type.entity.label() }}{% endtrans %}
|
||||
{% endset %}
|
||||
|
||||
{{ title_prefix }}
|
||||
{% if label and not page %}
|
||||
<h2{{ title_attributes.addClass('node__title') }}>
|
||||
{{ label }}
|
||||
</h2>
|
||||
{% endif %}
|
||||
{{ title_suffix }}
|
||||
|
||||
<div{{ content_attributes.addClass('node__content') }}>
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<div class="read-more">
|
||||
<a class="read-more__link" href="{{ url }}">
|
||||
{% trans %}View {{ node.type.entity.label() }}{% endtrans %} <span class="visually-hidden"> - {{ label }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
{% embed "umami:card" with {
|
||||
attributes: attributes.addClass(classes),
|
||||
content,
|
||||
content_attributes,
|
||||
label,
|
||||
title_attributes,
|
||||
title_prefix,
|
||||
title_suffix,
|
||||
read_more,
|
||||
url,
|
||||
} only %}
|
||||
{% block content %}
|
||||
{% include "umami:title" with {
|
||||
attributes: title_attributes.addClass('umami-card__title'),
|
||||
label,
|
||||
title_prefix,
|
||||
title_suffix,
|
||||
} only %}
|
||||
<div{{content_attributes.addClass('umami-card__content')}}>
|
||||
{{ content }}
|
||||
</div>
|
||||
{% include "umami:read-more" with {
|
||||
url,
|
||||
text: read_more,
|
||||
a11y: label,
|
||||
extra_classes: 'umami-card__read-more'
|
||||
} only %}
|
||||
{% endblock %}
|
||||
{% endembed %}
|
||||
|
|
|
|||
|
|
@ -57,11 +57,6 @@ messages:
|
|||
js:
|
||||
js/components/messages/messages.js: {}
|
||||
|
||||
more-link:
|
||||
css:
|
||||
theme:
|
||||
css/components/navigation/more-link/more-link.css: { weight: -10 }
|
||||
|
||||
quicklinks:
|
||||
css:
|
||||
theme:
|
||||
|
|
@ -83,29 +78,6 @@ user:
|
|||
component:
|
||||
css/components/user/user.css: { weight: -10 }
|
||||
|
||||
view-mode-card:
|
||||
css:
|
||||
theme:
|
||||
css/components/content/card/card.css: {}
|
||||
dependencies:
|
||||
- umami/more-link
|
||||
|
||||
view-mode-card-common:
|
||||
css:
|
||||
theme:
|
||||
css/components/content/card/card.css: {}
|
||||
css/components/content/card-common/card-common.css: {}
|
||||
dependencies:
|
||||
- umami/more-link
|
||||
|
||||
view-mode-card-common-alt:
|
||||
css:
|
||||
theme:
|
||||
css/components/content/card/card.css: {}
|
||||
css/components/content/card-common-alt/card-common-alt.css: {}
|
||||
dependencies:
|
||||
- umami/more-link
|
||||
|
||||
oneplusfourgrid_section:
|
||||
css:
|
||||
theme:
|
||||
|
|
|
|||
|
|
@ -40,6 +40,10 @@ function umami_preprocess_field(&$variables, $hook) {
|
|||
$element['#field_name'] == 'field_tags' ||
|
||||
$element['#field_name'] == 'field_difficulty') {
|
||||
$variables['attributes']['class'] = 'label-items';
|
||||
|
||||
if ($element['#view_mode'] == 'card' && $element['#field_name'] == 'field_difficulty') {
|
||||
$variables['attributes']['class'] = 'umami-card__label-items';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue