Skip to content
Snippets Groups Projects
Commit 3b9244e8 authored by Martin Leblanc's avatar Martin Leblanc
Browse files

ISTWCMS-6993: Add the new presentation layer to the embeded contact and profiles

parent b0dc2851
No related branches found
No related tags found
No related merge requests found
@use '../../../01-core' as *;
.card__teaser {
&:not(&.card__has-style) {
@include uw-flex-grid(card);
.views-row & {
height: 100%;
}
.uw-label {
display: block;
margin-top: var(--size-2);
}
.card__tags {
line-height: var(--line-height-2);
margin: auto auto 0 var(--size-2);
padding: 0;
max-width: 90%;
}
.uw-node__without-media & {
.card__header,
.card__footer {
padding: 0;
max-width: inherit;
}
}
}
&--opportunity{
&:not(&.card__has-style) {
.card__header{
margin-bottom: var(--size-1);
}
}
}
&--profile {
&:not(&.card__has-style) {
display: grid;
gap: var(--size-2);
align-content: flex-start;
&.card__has-profile-image {
grid-template-columns: var(--size-10) auto;
.card__header {
grid-column: 2 / 3;
}
}
.card {
&__image {
margin: 0;
max-width: var(--size-10);
}
&__header {
grid-column: 1 / 3;
margin: 0;
.card__title {
margin: 0;
}
}
&__body {
grid-column: 1 / 3;
}
}
.uw-content--grid-list__layout & {
&.card__has-profile-image {
.card__header {
grid-column: 2 / 3;
display: block;
margin: 0;
}
}
}
}
}
&--event {
// ISTWCMS-6859 Agenda look for event card teaser.
&.card__uw-agenda,
.uw-agenda & {
display: grid;
grid-template-columns: 100%;
column-gap: var(--grid-gutter);
@include uw-no-breakout();
@media(min-width: $screen-md) {
display: grid;
grid-template-columns: 19rem auto;
}
&.card--show-hover {
border: 0;
border-bottom: 1px solid var(--gray-3);
box-shadow: var(--shadow-0);
transition: box-shadow 300ms ease;
padding: var(--size-2);
padding-bottom: var(--size-6);
&:hover,
&:focus-within {
background-color: var(--gray-1);
border-bottom: 1px solid var(--uw-black-primary);
box-shadow: var(--shadow-3);
}
}
.card__image {
margin-top: 2rem;
@media(min-width: $screen-md) {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
img {
max-width: 12.5rem;
}
a {
max-width: 12.5rem;
}
}
.card__header {
display: grid;
grid-template-columns: 100%;
grid-row: 1 / 2;
margin-bottom: 0.75rem;
@media(min-width: $screen-md) {
grid-template-columns: 20rem auto;
grid-column: 1 / 3;
}
}
.card__date {
background: inherit;
padding-left: 0;
position: relative;
.uw-date {
background: inherit;
padding-left: 0;
}
@media(min-width: $screen-md) {
grid-row: 1 / 2;
margin: 0;
.uw-date {
top: 0;
left: 0;
position: absolute;
background: inherit;
padding: 0;
margin: 0;
}
}
}
.card__title {
grid-column: 1 / 2;
margin: 0;
padding-top: var(--size-305);
@media(min-width: $screen-md) {
grid-column: 2 / 3;
}
}
.card__author {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
}
}
.card__body,
.card__content,
.card__footer,
.card__position,
.card__tags,
.card__readmore,
.card__social {
grid-column: 1 / 2;
@media(min-width: $screen-md) {
grid-column: 2 / 3;
}
}
.card__body {
grid-row: 2 / 3;
}
.card__content {
margin-bottom: 0;
}
.card__tags {
margin: 0;
}
}
}
}
......@@ -46,7 +46,6 @@
margin: 0;
max-width: var(--size-10);
}
&__header {
grid-column: 1 / 3;
margin: 0;
......@@ -54,7 +53,6 @@
margin: 0;
}
}
&__body {
grid-column: 1 / 3;
}
......
{% extends '@components/card/card--teaser/_card--teaser_simple.twig' %}
{% include '@components/card/card--teaser/_card--teaser_simple.twig' with {
show_hover : 'true',
}%}
<article class="card {% if style %}card__has-style card__{{ style }} {% endif %}{% if modifier_classes %} card__{{ modifier_classes }}{% endif %}{% if show_hover %} card--show-hover{% endif %}">
{% if media_flags.has_media and media.media is not empty %}
{% include '@components/card/card-elements/_media.twig' with {
'media': teaser.media,
'header': teaser.header,
'bundle': teaser.bundle,
'media_flags': media_flags,
'node_classes': node_classes
} %}
{% endif %}
<article class="card {% if style %}card__has-style card__{{ style }} {% endif %}
{% if modifier_classes %} card__{{ modifier_classes }}{% endif %}
{% if show_hover %} card--show-hover{% endif %}">
<a href="{{ teaser.url }}">
{% if teaser.image is not empty %}
{% include '@components/card/card-elements/_image.twig' with {
'image': teaser.image
} %}
{% endif %}
{% if teaser.header and not media_flags.show_header_in_media %}
{% if teaser.header %}
{% include '@components/card/card-elements/_header.twig' with {
'header': teaser.header,
'type': type,
'image': teaser.image,
'bundle': teaser.bundle,
'header_level': 1,
'media_flags': media_flags,
'node_classes': node_classes
'header_level': 3,
} %}
{% endif %}
{% if teaser.content %}
<div class="card__body">
{% include '@components/card/card-elements/_content.twig' with {
'content': teaser.content,
} %}
</div>
{% endif %}
{% if teaser.footer %}
<div class="card__footer">
{% include '@components/card/card-elements/_footer-elements.twig' with {
'footer': teaser.footer
} %}
</div>
{% endif %}
</a>
</article>
{% extends '@components/card/card--teaser/_card--teaser_simple.twig' %}
{% include '@components/card/card--teaser/_card--teaser_simple.twig' with {
show_hover : 'true',
}%}
<div class="card__header {{ node_classes }}">
{% if bundle == 'uw_ct_profile' %}
{% if bundle == 'uw_ct_profile' and style == "default" %}
{% if image %}
<div class="uw-image__profiles">
{% include '@components/card/card-elements/_image.twig' with {
......
......@@ -43,16 +43,95 @@
}
}
&.uw-content--grid-list__layout-has-style {
background: green;
}
&-name-focused {
background: blue;
}
&-title-focused {
background: orange;
}
&-default {
background: red;
&:not(&.uw-content--grid-list__layout-default,&.uw-content--grid-list__layout-uw-agenda){
display: flex;
flex-wrap: wrap;
gap: var(--grid-gap);
.card {
a {
display: flex;
flex-direction: column;
height: 100%;
}
&--show-hover {
border: 1px solid transparent;
box-shadow: var(--shadow-0);
transition: box-shadow 300ms ease;
padding: var(--size-2);
&:hover,
&:focus-within {
outline: none;
border-color: var(--gray-2);
background-color: var(--gray-1);
border-bottom: 1px solid var(--uw-black-primary);
box-shadow: var(--shadow-3);
}
}
text-align: center;
&__name-focused,
&__title-focused,
{
flex: 1 0 100%;
@media(min-width: $screen-sm) {
flex: 1 0 45%;
width: 100%;
}
@media(min-width: $screen-md) {
flex: 1 0 22%;
}
}
.card__header {
display: grid;
align-self: end;
margin: auto auto 0 0;
}
&__name-focused {
.card__title {
font-family: var(--font-condensedbook);
line-height: var(--font-lineheight-1);
margin: 0 0 var(--size-2) 0;
padding: 0;
order: 1;
}
.card__position {
font-family: var(--font-primary);
font-weight: var(--font-weight-200);
font-size: var(--font-size-0);
@media(min-width: $screen-sm) {
font-size: var(--font-size-1);
}
width: 100%;
order: 2;
}
}
&__title-focused {
img {
margin: 0 auto;
max-width: var(--size-20);
}
.card__title {
font-family: var(--font-primary);
font-size: var(--font-size-0);
@media(min-width: $screen-sm) {
font-size: var(--font-size-1);
}
width: 100%;
order: 2;
}
.card__position {
font-size: var(--font-size-3);
font-family: var(--font-condensedbook);
line-height: var(--font-lineheight-1);
margin: 0 0 var(--size-2) 0;
padding: 0;
order: 1;
.uw-site-footer & {
color: var(--uw-white);
}
}
}
}
}
}
}
&__style_controls {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment