From 810caf2353f147820b8f8b6521a78a441036c20f Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Tue, 25 Feb 2025 14:25:24 -0500
Subject: [PATCH] ISTWCMS-5650: Add the css and html for buttons and dots in
facts figure caraousel
---
.../04-components/banners/_banners.scss | 120 +++++++++---------
.../facts-and-figures/_facts-and-figures.scss | 40 ++++++
.../facts-and-figures/facts-and-figures.js | 13 +-
.../facts-and-figures/facts-and-figures.twig | 8 ++
4 files changed, 120 insertions(+), 61 deletions(-)
diff --git a/src/patterns/04-components/banners/_banners.scss b/src/patterns/04-components/banners/_banners.scss
index f989b348..6b7fe702 100644
--- a/src/patterns/04-components/banners/_banners.scss
+++ b/src/patterns/04-components/banners/_banners.scss
@@ -239,71 +239,73 @@
.carousel.flickity-enabled {
opacity: 1;
}
+.uw-carousel__banner {
+ .flickity-button {
+ background: transparent;
+ }
+ /* big previous & next buttons */
+ .flickity-prev-next-button {
+ top: 40%;
+ width: 5rem;
+ height: 5rem;
+ }
+ /* icon color */
+ .flickity-button-icon {
+ fill: var(--uw-black);
+ }
+ /* hide disabled button */
+ .flickity-button:disabled {
+ display: none;
+ }
-
-.flickity-button {
- background: transparent;
-}
-/* big previous & next buttons */
-.flickity-prev-next-button {
- top: 40%;
- width: 5rem;
- height: 5rem;
-}
-/* icon color */
-.flickity-button-icon {
- fill: var(--uw-black);
-}
-/* hide disabled button */
-.flickity-button:disabled {
- display: none;
-}
-
-/* position dots up a bit */
-.flickity-page-dots {
- bottom: -1.5rem;
- display: flex;
-}
-/* dots are lines */
-.flickity-page-dots .dot {
- height: 1.5rem;
- width: 100%;
- margin: 0;
- background: var(--gray-2);
- border-radius: 0;
- border-left: 1px;
- border-bottom: 1px;
- border-color: var(--gray-5);
- border-style: solid;
- opacity:1;
- &:first-child {
- border-left: 0;
+ /* position dots up a bit */
+ .flickity-page-dots {
+ bottom: -1.5rem;
+ display: flex;
}
- &.is-selected {
- background:var(--uw-black);
+ /* dots are lines */
+ .flickity-page-dots .dot {
+ height: 1.5rem;
+ width: 100%;
+ margin: 0;
+ background: var(--gray-2);
+ border-radius: 0;
+ border-left: 1px;
+ border-bottom: 1px;
+ border-color: var(--gray-5);
+ border-style: solid;
+ opacity:1;
+ &:first-child {
+ border-left: 0;
+ }
+ &.is-selected {
+ background:var(--uw-black);
+ }
+ &:hover,
+ &:focus{
+ background: var(--gray-5);
+ }
}
- &:hover,
- &:focus{
- background: var(--gray-5);
+
+ .flickity-enabled:focus .flickity-viewport {
+ outline: thin dotted;
+ outline: 5px auto -webkit-focus-ring-color;
+ }
+ .uw-ff--carousel .flickity-enabled:focus .flickity-viewport {
+ outline: none;
}
-}
-.flickity-enabled:focus .flickity-viewport {
- outline: thin dotted;
- outline: 5px auto -webkit-focus-ring-color;
-}
-.uw-ff--carousel .flickity-enabled:focus .flickity-viewport {
- outline: none;
-}
+ .flickity-button:focus {
+ outline: none;
+ box-shadow: 0 0 0 5px var(--uw-black);
+ .flickity-button-icon {
+ fill: var(--uw-black);
+ }
+ }
-.flickity-button:focus {
- outline: none;
- box-shadow: 0 0 0 5px var(--uw-black);
- .flickity-button-icon {
- fill: var(--uw-black);
+ .carousel.is-fullscreen .card__banner {
+ height: 100%;
}
-}
-.carousel.is-fullscreen .card__banner {
- height: 100%;
}
+
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 bf9717cb..bddc54e6 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
@@ -837,6 +837,46 @@ are the same height. */
}
}
}
+.flickity-page-dots {
+ bottom: -50px;
+}
+.uw-button--wrap {
+ display: flex;
+ width:100%;
+ justify-content: center;
+ margin-top: var(--size-8);
+ button {
+ background: var(--gray-2);
+ color: var(--uw-black);
+ display: inline-block;
+ font-family: var(--font-condensedbook);
+ font-size: var(--font-size-1);
+ font-weight: 200;
+ letter-spacing: .055rem;
+ margin: 0 var(--size-1);
+ max-width: inherit;
+ padding: var(--size-105);
+ text-decoration: none;
+ text-transform: uppercase;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ vertical-align: middle;
+ white-space: nowrap;
+ width: auto;
+ &:hover,
+ &:focus {
+ background: var(--gray-5) !important;
+ color: var(--uw-white) !important;
+ }
+ }
+ button.uw-button--previous {
+ right: auto;
+ }
+ button.uw-button--next {
+ left: auto;
+ }
+}
.infographic-fields-inline .fieldset-wrapper {
display: grid;
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.js b/src/patterns/04-components/facts-and-figures/facts-and-figures.js
index 313a2168..57f0ea88 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.js
+++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.js
@@ -20,8 +20,8 @@
$carousel.flickity({
cellAlign: 'left',
contain: true,
- pageDots: false,
- prevNextButtons: true,
+ pageDots: true,
+ prevNextButtons: false,
wrapAround: true,
groupCells: function () {
var width = $(window).width();
@@ -36,7 +36,16 @@
}
}
});
+ // previous button
+ $('.uw-button--previous').on( 'click', function() {
+ $carousel.flickity('previous');
+ });
+ // next
+ $('.uw-button--next').on( 'click', function() {
+ $carousel.flickity('next');
+ });
}
+
}
/**
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 e0a032af..80746d79 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
@@ -59,4 +59,12 @@
{% endif %}
</div>
+
+{% if ffs.num_per_carousel %}
+ <div class="uw-button--wrap">
+ <button class="uw-button--previous"> < Prev</button>
+ <button class="uw-button--next">Next ></button>
+ </div>
+
+{% endif %}
</div>
--
GitLab