diff --git a/css/styles.css b/css/styles.css index 01f13a3e90c5e9354547b208edb05dcd13528b6c..5a79acb5ffa7e4b43bbb562ebb72b2a0ce963cc3 100644 --- a/css/styles.css +++ b/css/styles.css @@ -3553,23 +3553,19 @@ button { .card__body { display: flex; - -webkit-box-direction: normal; - -moz-box-direction: normal; - -webkit-box-orient: vertical; - -moz-box-orient: vertical; - -ms-flex-direction: column; - -webkit-flex-direction: column; - flex-direction: column; - gap: inherit; + -webkit-flex-flow: row wrap; + -ms-flex-flow: row wrap; + flex-flow: row wrap; + gap: 1.25rem; gap: inherit; height: 100%; padding: 1rem; } - .views-row .card__body { - height: 100%; } .card__body p:last-child { margin-bottom: 0; } .card__content { + display: flex; + flex-direction: column; margin-bottom: 1.5rem; } .card__media { @@ -3581,6 +3577,9 @@ button { .card__media img { width: 100%; } +.card__summary { + flex-grow: 1; } + .card__footer { align-self: flex-end; margin-top: auto; } diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss index 6a19776303dd6c385e7d686998548b5b47955f42..96047022e8c9ca45e264cfab4506856514d19c58 100644 --- a/source/_patterns/04-components/card/_card.scss +++ b/source/_patterns/04-components/card/_card.scss @@ -62,20 +62,19 @@ $card-padding: rem(gesso-spacing(sm)) !default; // body .card__body { - @include uw-flex-grid(card); + @include uw-flex-grid(); //background:$test-color-10; gap:inherit; height:100%; padding: $card-padding; - .views-row &{ - height:100%; - } p:last-child { margin-bottom: 0; } } .card__content { //background:$test-color-9; + display:flex; + flex-direction: column; margin-bottom: rem(gesso-spacing(md)); } // Mid @@ -93,6 +92,7 @@ $card-padding: rem(gesso-spacing(sm)) !default; } .card__summary{ //background:$test-color-9; + flex-grow:1; } // footer .card__footer { diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig index e592951332fee9ab60ba4fb6573010b28ad31af1..5016ad4df556b0a5b3aeb3ec48aa04f9105ce983 100644 --- a/source/_patterns/04-components/card/card.twig +++ b/source/_patterns/04-components/card/card.twig @@ -3,59 +3,7 @@ <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 %} - <div class="card__date"> - {% if date is iterable %} - {% for d in date %} - {% include "@base/date-formats/_date-format.twig" with { - 'date_format': date_format, - 'date': d - }%} - {% endfor %} - {% else %} - {% include "@base/date-formats/_date-format.twig" with { - 'date_format': date_format, - 'date': date - }%} - {% endif %} - </div> - {% endif %} - - {% if title or sub_title %} - {% if title %} - <h{{ header_level }} class="card__title"> - {% if url %} - <a href="{{ url }}"> - {% endif %} - {{ title }} - {% if url %} - </a> - {% endif %} - </h{{ header_level }}> - {% endif %} - {% if sub_title %} - <span class="sub-title">{{ sub_title }}</span> - {% endif %} - {% endif %} - {% if author_name %} - <div class="card__author"> - {% if author_link %} - by - <a href="{{ author_link }}"> - {% endif %} - - {{ author_name }} - - {% if author_link %} - </a> - {% endif %} - </div> - {% endif %} - </div> - {% endif %} <div class="card__content"> {% if sources or img_element %} <div class="card__media"> @@ -71,6 +19,59 @@ </a> {% endif %} </div> + {% endif %} + {% if title or author or date or sub_title %} + <div class="card__header"> + {% if date %} + <div class="card__date"> + {% if date is iterable %} + {% for d in date %} + {% include "@base/date-formats/_date-format.twig" with { + 'date_format': date_format, + 'date': d + }%} + {% endfor %} + {% else %} + {% include "@base/date-formats/_date-format.twig" with { + 'date_format': date_format, + 'date': date + }%} + {% endif %} + </div> + {% endif %} + + {% if title or sub_title %} + + {% if title %} + <h{{ header_level }} class="card__title"> + {% if url %} + <a href="{{ url }}"> + {% endif %} + {{ title }} + {% if url %} + </a> + {% endif %} + </h{{ header_level }}> + {% endif %} + {% if sub_title %} + <span class="sub-title">{{ sub_title }}</span> + {% endif %} + {% endif %} + {% if author_name %} + <div class="card__author"> + {% if author_link %} + by + <a href="{{ author_link }}"> + {% endif %} + + {{ author_name }} + + {% if author_link %} + </a> + {% endif %} + </div> + {% endif %} + </div> {% endif %} <div class="card_summary"> {{ content }}