From 53fe7f655597f07b9f2b724e55fd7f26bac80425 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 13 Mar 2025 14:34:31 -0400
Subject: [PATCH] ISTWCMS-5650: Add css to display the FF in carousel as per
numItems
---
.../facts-and-figures/_facts-and-figures.scss | 198 ++++++++++--------
.../facts-and-figures/facts-and-figures.twig | 1 +
2 files changed, 114 insertions(+), 85 deletions(-)
diff --git a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
index d17d51c5..d1fe2a67 100644
--- a/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
+++ b/src/patterns/04-components/facts-and-figures/_facts-and-figures.scss
@@ -447,9 +447,10 @@ $highlighted-fact-round: $global-rounded;
from owl script. Ensures bubbles
are the same height. */
.uw-ff {
- &--with-bubbles{
- .uw-ff--fact{
+ &--with-bubbles {
+ .uw-ff--fact {
border-radius: $highlighted-fact-radius + 10;
+
&:nth-of-type(odd) {
&::after {
border-left: var(--size-2) solid transparent;
@@ -479,7 +480,7 @@ are the same height. */
}
}
- &__black{
+ &__black {
.uw-ff--fact {
background-color: var(--uw-black);
@@ -491,13 +492,14 @@ are the same height. */
&:nth-of-type(even) {
&::after {
- border-top: var(--size-3) solid var(--uw-black);
+ border-top: var(--size-3) solid var(--uw-black);
}
}
}
}
- &__white{
- .uw-ff--fact{
+
+ &__white {
+ .uw-ff--fact {
background-color: var(--uw-white);
&:nth-of-type(odd) {
@@ -513,8 +515,9 @@ are the same height. */
}
}
}
- &__grey{
- .uw-ff--fact{
+
+ &__grey {
+ .uw-ff--fact {
background-color: var(--uw-black-1);
&:nth-of-type(odd) {
@@ -522,6 +525,7 @@ are the same height. */
border-bottom: var(--size-3) solid var(--uw-black-1);
}
}
+
&:nth-of-type(even) {
&::after {
border-top: var(--size-3) solid var(--uw-black-1);
@@ -530,8 +534,8 @@ are the same height. */
}
}
- &__gold{
- .uw-ff--fact{
+ &__gold {
+ .uw-ff--fact {
background-color: var(--uw-gold);
&:nth-of-type(odd) {
@@ -568,6 +572,7 @@ are the same height. */
.infographic-half-circle {
justify-self: flex-start;
}
+
.uw-ff--text {
text-align: left;
}
@@ -583,7 +588,7 @@ are the same height. */
width: auto;
}
- .uw-ff--fact{
+ .uw-ff--fact {
align-items: flex-end;
text-align: right;
}
@@ -610,7 +615,7 @@ are the same height. */
text-align: center;
}
- .highlighted-fact-infographic{
+ .highlighted-fact-infographic {
align-items: center;
}
@@ -619,7 +624,7 @@ are the same height. */
width: auto;
}
- .infographic-number{
+ .infographic-number {
margin: 0 auto;
text-align: center;
width: auto;
@@ -658,8 +663,10 @@ are the same height. */
margin: var(--size-1) 0;
text-wrap: balance;
width: 100%;
+
&__icon {
display: block;
+
img {
display: block;
height: 100%;
@@ -711,6 +718,7 @@ are the same height. */
i {
font-style: normal;
}
+
strong,
b {
font-weight: bold;
@@ -718,14 +726,14 @@ are the same height. */
}
}
- &--no-carousel{
+ &--no-carousel {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
- .uw-ff{
- &--fact{
+ .uw-ff {
+ &--fact {
@include flex(1 1 auto);
@include flex-grow(1);
margin: var(--size-205) 0;
@@ -771,6 +779,7 @@ are the same height. */
width: 100%;
}
}
+
.uw-full-width & {
@media(min-width: $screen-xs) {
@@ -789,69 +798,109 @@ are the same height. */
}
}
- &--carousel{
- .flickity-slider {
- display: flex;
- }
-
- .uw-ff--fact {
+ &--carousel {
+ .carousel {
display: flex;
- @include flex(1 1 auto);
- @include flex-grow(1);
flex-flow: column;
- position: relative;
- padding: var(--size-4);
+ .flickity-slider {
+ display: flex;
+ }
+ .uw-ff--fact {
+ display: flex;
+ @include flex(1 1 auto);
+ @include flex-grow(1);
+ flex-flow: column;
+ position: relative;
+ margin-left: var(--size-110);
+ padding: var(--size-4);
+ min-height:100%;
- &:nth-of-type(odd) {
- .uw-ff--fact{
- &::after{
- bottom: inherit;
- top: -1.25rem;
+ &:nth-of-type(odd) {
+ .uw-ff--fact {
+ &::after {
+ bottom: inherit;
+ top: -1.25rem;
+ }
}
}
- }
- &:nth-of-type(even) {
- .uw-ff--fact{
- &::after{
- bottom: -1.25rem;
- top: inherit;
- transform: rotate(180deg);
+ &:nth-of-type(even) {
+ .uw-ff--fact {
+ &::after {
+ bottom: -1.25rem;
+ top: inherit;
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ &:first-child {
+ margin-left: 0;
+ }
+ [data-num-per-carousel='1'] & ,
+ [data-num-per-carousel='2'] & ,
+ [data-num-per-carousel='3'] & ,
+ [data-num-per-carousel='4'] & {
+ width: 100%;
+ @media(min-width: $screen-md) {
+ width: 49.5%;
+ }
+ }
+
+ [data-num-per-carousel='1'] & {
+ @media(min-width: $screen-md) {
+ width: 100%
+ }
+ }
+ [data-num-per-carousel='2'] & {
+ @media(min-width: $screen-lg) {
+ width: 49.5%
+ }
+ }
+ [data-num-per-carousel='3'] & {
+ @media(min-width: $screen-lg) {
+ width: 32.5%
+ }
+ }
+ [data-num-per-carousel='4'] & {
+ @media(min-width: $screen-lg) {
+ width: 24.25%
}
}
}
- &:first-child {
- margin-left: 0;
+ .flickity-page-dots {
+ bottom: -3.125rem;
+
+ .dot {
+ height: var(--size-2);
+ width: var(--size-2);
+
+ &.is-selected {
+ background: var(--uw-black);
+ }
+
+ &:hover,
+ &:focus {
+ opacity: 1 !important;
+ background: var(--gray-5);
+ }
+ }
}
- }
- .flickity-viewport {
- display: flex;
- flex-flow: column;
- margin-bottom: var(--size-4);
- overflow: inherit;
- overflow-x: clip;
- overflow-y: visible;
- padding-top: var(--size-4);
- }
- }
-}
-.flickity-page-dots {
- bottom: -3.125rem;
- .dot {
- height: var(--size-2);
- width: var(--size-2);
- &.is-selected {
- background:var(--uw-black);
- }
- &:hover,
- &:focus{
- opacity: 1 !important;
- background: var(--gray-5);
+ .flickity-viewport {
+ display: flex;
+ flex-flow: column;
+ margin-bottom: var(--size-4);
+ overflow: inherit;
+ overflow-x: clip;
+ overflow-y: visible;
+ padding-top: var(--size-4);
+ }
}
}
}
+
.uw-button--wrap {
display: flex;
width:100%;
@@ -1017,24 +1066,3 @@ are the same height. */
}
}
}
-
-.uw-ff--carousel .carousel {
- display: flex;
- flex-flow: column;
- .uw-ff {
- &--fact {
- @include flex(1);
- @include flex-grow(1);
- margin-left: var(--size-110);
- width: 100%;
- padding: var(--size-4);
- min-height:100%;
- @media(min-width: $screen-sm) {
- max-width: 49%;
- }
- @media(min-width: $screen-xl) {
- max-width: 32.5%;
- }
- }
- }
-}
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
index 0aeca943..c123253d 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
+++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
@@ -1,6 +1,7 @@
<div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
<div class="uw-ff--wrapper uw-ff--wrapper__text-{{ ffs.text_align }} {{ ffs.num_per_carousel ? 'uw-ff--carousel' : 'uw-ff--no-carousel' }} {{ ffs.theme }}">
{% if ffs.num_per_carousel >= 1%}
+
{% embed '@layouts/carousel/carousel.twig' %}
{% block content %}
{% for details in ffs.details %}
--
GitLab