From 26a2998e61a9ee97b0d908b246e860328eae82ad Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 8 Jun 2021 21:44:12 +0000
Subject: [PATCH] pushing card footer outside of body to allow better flex of
content
---
css/styles.css | 28 +++++----
.../_patterns/04-components/card/_card.scss | 25 +++++---
source/_patterns/04-components/card/card.twig | 61 +++++++++----------
3 files changed, 59 insertions(+), 55 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 44f9c4ec..fb09b045 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3503,7 +3503,6 @@ button {
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
- flex-grow: 1;
width: 100%; }
.views-row .card {
height: 100%; }
@@ -3560,15 +3559,12 @@ button {
flex-flow: row wrap;
gap: 1.25rem;
gap: inherit;
- height: 100%;
padding: 1rem;
width: 100%; }
.card__body p:last-child {
margin-bottom: 0; }
.card__content {
- display: flex;
- flex-direction: column;
margin-bottom: 1.5rem;
width: 100%; }
@@ -3577,25 +3573,33 @@ button {
order: -1;
width: 100%; }
.card__media a {
- display: block;
+ display: inline-block;
height: 100%;
width: 100%; }
+ .card__media a:focus img {
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
+ transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
+ transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1); }
.card__media img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
- transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter;
- transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1);
- transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter;
+ transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
+ transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
+ transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
width: 100%; }
.card__media img:hover {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
- transition: opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter;
- transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1);
- transition: filter, opacity 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter; }
+ transition: -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1);
+ transition: filter 150ms cubic-bezier(0.4, 0, 1, 1);
+ transition: filter 150ms cubic-bezier(0.4, 0, 1, 1), -webkit-filter 150ms cubic-bezier(0.4, 0, 1, 1); }
.card__footer {
- margin-top: auto; }
+ margin-top: auto;
+ padding: 1.5rem;
+ width: 100%; }
.card__footer > div {
margin-bottom: 1rem; }
.card__footer > div:last-child {
diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 1045a467..4a622b3a 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -9,9 +9,9 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card {
@include uw-flex-grid(card);
- flex-grow: 1;
- width: 100%;
//background:$test-color-1;
+ width: 100%;
+
.views-row &{
height:100%;
}
@@ -68,7 +68,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
@include uw-flex-grid();
//background:$test-color-10;
gap:inherit;
- height:100%;
padding: $card-padding;
width: 100%;
p:last-child {
@@ -77,8 +76,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
.card__content {
//background:$test-color-9;
- display:flex;
- flex-direction: column;
margin-bottom: rem(gesso-spacing(md));
width: 100%;
}
@@ -86,24 +83,30 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__media {
//background:$test-color-4;
margin-bottom: rem(gesso-spacing(md));
- order: -1;
+ order:-1;
width: 100%;
a {
- display: block;
+ display:inline-block;
height: 100%;
width: 100%;
+ &:focus{
+ img{
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ transition:filter gesso-duration(shortest) gesso-easing(ease-in);
+ }
+ }
}
img {
-webkit-filter: grayscale(0);
filter: grayscale(0);
- transition:filter ,opacity gesso-duration(shortest) gesso-easing(ease-in);
+ transition:filter gesso-duration(shortest) gesso-easing(ease-in);
width: 100%;
&:hover{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
- transition:filter ,opacity gesso-duration(shortest) gesso-easing(ease-in);
-
+ transition:filter gesso-duration(shortest) gesso-easing(ease-in);
}
}
}
@@ -111,6 +114,8 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__footer {
//background:$test-color-12;
margin-top: auto;
+ padding: rem(gesso-spacing(md));
+ width: 100%;
> div {
margin-bottom: rem(gesso-spacing(sm));
&:last-child {
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index c1fd5508..107f8396 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -2,7 +2,6 @@
<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
<div class="card__body">
-
{% if title or author or date or sub_title %}
<div class="card__header">
{% if date %}
@@ -22,9 +21,7 @@
{% endif %}
</div>
{% endif %}
-
{% if title or sub_title %}
-
{% if title %}
<h{{ header_level }} class="card__title">
{% if url %}
@@ -51,41 +48,40 @@
{% endif %}
</div>
{% endif %}
-
</div>
{% endif %}
- <div class="card__content">
- {% if sources or img_element %}
- <div class="card__media">
- {% if url %}
- <a href="{{ url }}">
+ {% if sources or img_element %}
+ <div class="card__media">
+ {% if url %}
+ <a href="{{ url }}">
{% endif %}
{% include "@components/responsive-image/responsive-image.twig" with {
- sources: sources,
- img_element: img_element,
- alt: alt
+ sources: sources,
+ img_element: img_element,
+ alt: alt
}%}
{% if url %}
- </a>
- {% endif %}
+ </a>
+ {% endif %}
+ </div>
+ {% endif %}
+ <div class="card__content">
+ {{ content }}
+ </div>
+
+ </div>
+ {% if footer or read_more or tags or social_media %}
+ <div class="card__footer">
+ {{ footer }}
+ {% if tags %}
+ <div class="card__tags">
+ {% for tag in tags %}
+ {% include "@components/tag-list/tag-list.twig" with {
+ items: tag
+ } %}
+ {% endfor %}
</div>
{% endif %}
- <div class="card_summary">
- {{ content }}
- </div>
- </div>
- {% if footer or read_more or tags or card_social_media %}
- <div class="card__footer">
- {{ footer }}
- {% if tags %}
- <div class="card__tags">
- {% for tag in tags %}
- {% include "@components/tag-list/tag-list.twig" with {
- items: tag
- } %}
- {% endfor %}
- </div>
- {% endif %}
{% if read_more and url %}
<div class="card__readmore">
{{ macros.readmore(url, title) }}
@@ -96,7 +92,6 @@
{% include "@components/menu/menu--social/menu--social.twig" %}
</div>
{% endif %}
- </div>
- {% endif %}
- </div>
+ </div>
+ {% endif %}
</article>
--
GitLab