From 11b8c45ec4cb2a02411fa662e9ca81e533e88819 Mon Sep 17 00:00:00 2001 From: ibrahimjaved12 <109785089+ibrahimjaved12@users.noreply.github.com> Date: Tue, 10 Dec 2024 14:59:05 +0500 Subject: [PATCH] OCW Stories & Quotes New Design Implementation (#1460) * Refactor layout: Adjust flex properties for responsiveness * Improve homepage * Add View All Stories Button * Add line-wise truncation for consistent layout * Remove pre-existing bootstrap col-X properties and use flex instead * Revamp OCW Stories mobile responsiveness * Add OCW Stories Banner * Single Story Page and Stories List * Work on homepage and single story page * Add quotesUI * Reusable Dialog Component * Dynamically load Modal via Webpack * Adjust everything * Add Eslint disable next line * Work on homepage margins and paddings for all screen sizes * Single page layout, image alignment, other adjustments * Work on overall adjustments * Stories single page paddings * Add mobile-sm breakpoint * Fix more stories padding in single page * Use correct heading tags for accessibility * Fix line-height of share-stories-banner * Work on minor fixes * Add Share your story link * Make card compact * Fix left border height inside Modal * Use leadquote --- base-theme/assets/css/_breakpoints.scss | 4 + base-theme/assets/css/variables.scss | 2 +- .../ocw_stories_home_btn_arrow_right.svg | 34 ++ .../images/ocw_story_single_arrow_left.svg | 3 + .../ocw_testimonial_quote_modal_close.svg | 4 + base-theme/assets/index.ts | 3 + base-theme/assets/quote_card_modal_handler.ts | 20 + www/assets/css/carousel.scss | 135 ++++- www/assets/css/home.scss | 34 -- www/assets/css/testimonials.scss | 532 ++++++++++++++++-- www/layouts/home.html | 1 + www/layouts/partials/home_stories.html | 97 +++- www/layouts/partials/home_stories_banner.html | 15 + www/layouts/partials/stories_card.html | 14 - www/layouts/partials/testimonial_card.html | 52 +- .../partials/testimonial_quote_modal.html | 23 + www/layouts/stories/list.html | 58 +- www/layouts/stories/single.html | 75 ++- 18 files changed, 938 insertions(+), 168 deletions(-) create mode 100644 base-theme/assets/images/ocw_stories_home_btn_arrow_right.svg create mode 100644 base-theme/assets/images/ocw_story_single_arrow_left.svg create mode 100644 base-theme/assets/images/ocw_testimonial_quote_modal_close.svg create mode 100644 base-theme/assets/quote_card_modal_handler.ts create mode 100644 www/layouts/partials/home_stories_banner.html delete mode 100644 www/layouts/partials/stories_card.html create mode 100644 www/layouts/partials/testimonial_quote_modal.html diff --git a/base-theme/assets/css/_breakpoints.scss b/base-theme/assets/css/_breakpoints.scss index 9463ceeca..9e92bfba5 100644 --- a/base-theme/assets/css/_breakpoints.scss +++ b/base-theme/assets/css/_breakpoints.scss @@ -15,6 +15,10 @@ @media (max-width: 800px) { @content; } + } @else if $name == mobile-sm { + @media (max-width: 767px) { + @content; + } } @else if $name == phone { @media (max-width: 580px) { @content; diff --git a/base-theme/assets/css/variables.scss b/base-theme/assets/css/variables.scss index ff4ddb2d1..a4ad32490 100644 --- a/base-theme/assets/css/variables.scss +++ b/base-theme/assets/css/variables.scss @@ -29,7 +29,6 @@ $dark-gray: #3d3d3d; // home page $max-home-width: 1280px; - $search-gray: rgba(0, 0, 0, 0.85); $featured-facet-blue: #385d70; $transparency-gray: rgba(246, 247, 249, 0.77); @@ -37,6 +36,7 @@ $transparency-gray-light: rgba(246, 246, 246, 0.71); $mobile-menu-btn-color: #115f83; $course-info-btn-color: #e4e4e4; $course-info-btn-hover-color: #c0c0c0; +$border-gray-testimonial: #dfe5ec; // course pages $course-content-link-unclicked: #115f83; diff --git a/base-theme/assets/images/ocw_stories_home_btn_arrow_right.svg b/base-theme/assets/images/ocw_stories_home_btn_arrow_right.svg new file mode 100644 index 000000000..592eeabf3 --- /dev/null +++ b/base-theme/assets/images/ocw_stories_home_btn_arrow_right.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/base-theme/assets/images/ocw_story_single_arrow_left.svg b/base-theme/assets/images/ocw_story_single_arrow_left.svg new file mode 100644 index 000000000..5f2bce79a --- /dev/null +++ b/base-theme/assets/images/ocw_story_single_arrow_left.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/base-theme/assets/images/ocw_testimonial_quote_modal_close.svg b/base-theme/assets/images/ocw_testimonial_quote_modal_close.svg new file mode 100644 index 000000000..bd2959ff2 --- /dev/null +++ b/base-theme/assets/images/ocw_testimonial_quote_modal_close.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/base-theme/assets/index.ts b/base-theme/assets/index.ts index b692fc9de..8e566c484 100644 --- a/base-theme/assets/index.ts +++ b/base-theme/assets/index.ts @@ -9,6 +9,7 @@ import PDFObject from "pdfobject" import "./js/polyfill" import "video.js/dist/video-js.css" import { initExternalLinkModal } from "./js/external_link_modal" +import { initQuotesModalHandler } from "./quote_card_modal_handler" import { initVideoDownloadPopup } from "./js/video_download_popup" export interface OCWWindow extends Window { @@ -18,6 +19,7 @@ export interface OCWWindow extends Window { Sentry: typeof Sentry PDFObject: typeof PDFObject initVideoJS: () => void + initModalHandler: () => void } declare let window: OCWWindow @@ -41,4 +43,5 @@ window.initVideoJS = () => { $(function() { window.Sentry = initSentry() initExternalLinkModal() + initQuotesModalHandler() }) diff --git a/base-theme/assets/quote_card_modal_handler.ts b/base-theme/assets/quote_card_modal_handler.ts new file mode 100644 index 000000000..26e548b1d --- /dev/null +++ b/base-theme/assets/quote_card_modal_handler.ts @@ -0,0 +1,20 @@ +export function initQuotesModalHandler() { + const modalElement = $(".js-quote-modal") + $(".js-modal-trigger").on("click", event => { + event.preventDefault() + + const target = $(event.currentTarget) + const modalContentId = target.data("modal-content-id") + const contentDiv = $(`#${modalContentId}`) + + if (contentDiv.length) { + const content = contentDiv.html() + modalElement.find(".modal-body.quote-modal-body").html(content) + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + modalElement.modal("show") + } else { + console.error("Modal content not found for ID:", modalContentId) + } + }) +} diff --git a/www/assets/css/carousel.scss b/www/assets/css/carousel.scss index e895f4eaf..07f0f0c36 100644 --- a/www/assets/css/carousel.scss +++ b/www/assets/css/carousel.scss @@ -19,7 +19,9 @@ } .carousel-header { - max-width: $max-home-width; + &:not(.stories-carousel-header) { + max-width: $max-home-width; + } margin: 0; align-items: center; @@ -64,8 +66,7 @@ } .item-wrapper { - padding: 0 10px; - + padding: 0 8px; &:first-child { padding-left: 0; } @@ -74,4 +75,132 @@ padding-right: 0; } } + .item-wrapper.testimonial-link { + border-radius: 10px; + border: 1px solid $border-gray-testimonial; + background: #fff; + box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15); + + // 801px - 991px (tablet) + @include breakpoint(tablet) { + max-width: 470.5px; + } + // 768px - 800px (mobile) + @include breakpoint(mobile) { + max-width: 335px; + } + // <= 767px (mobile-sm) + @include breakpoint(mobile-sm) { + max-width: 650px; + } + } +} +.item-wrapper.testimonial-link:hover { + border: 1px solid #a31f34 !important; +} +.item-wrapper.testimonial-link { + padding: 0 10px; + border-radius: 10px; + border: 1px solid $border-gray-testimonial; + background: #fff; + box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15); + + &:first-child { + padding-left: 0; + } + + &:last-child { + padding-right: 0; + } +} + +.carousel-control-prev, +.carousel-control-next { + width: auto; + background: none; + opacity: 1; +} + +.carousel-control-prev .material-icons, +.carousel-control-next .material-icons { + font-size: 3.75rem; + color: inherit; +} + +.carousel-control-prev-icon, +.carousel-control-next-icon { + display: none; +} + +.carousel-control-prev { + left: auto; +} + +.carousel-control-next { + right: auto; +} + +.carousel-control-prev, +.carousel-control-next { + top: 50%; + transform: translateY(-50%); +} + +.hidden-modal-content { + display: none; +} + +.modal-dialog { + max-width: 600px; + margin: 1rem auto; +} + +.modal-body { + padding: 10px; +} + +.home-testimonials { + .carousel { + &.slide { + max-width: 1447px !important; + } + + .carousel-header { + margin-bottom: 40px; + @include media-breakpoint-down(xs) { + margin-bottom: 20px; + } + h2 { + text-align: center; + font-size: 32px; + font-weight: 700; + line-height: 25px; + margin-bottom: 20px; + @include media-breakpoint-down(xs) { + line-height: 40px; + } + } + p { + font-size: 18px; + font-weight: 400; + line-height: 25px; + margin: 0; + } + + p { + text-align: center; + } + } + + .carousel-section { + .prev, + .next { + font-size: 3.75rem !important; + } + } + + .carousel-inner { + padding: 0; + } + } } diff --git a/www/assets/css/home.scss b/www/assets/css/home.scss index 0cbcc6ace..e7737b3b2 100644 --- a/www/assets/css/home.scss +++ b/www/assets/css/home.scss @@ -362,40 +362,6 @@ $searchbox-height: 50px; } } -.home-testimonials { - a.testimonial-link { - text-decoration: none; - } - - .testimonial { - height: 280px; - width: 280px; - color: white; - background-size: cover; - - .name { - font-size: $font-lg; - } - - .on-hover { - display: none; - } - - .name-occ { - .occupation-location { - font-size: $font-sm; - text-overflow: ellipsis; - overflow: hidden; - } - - .name, - .occupation-location { - white-space: nowrap; - } - } - } -} - .ocw-news { .item { width: 100%; diff --git a/www/assets/css/testimonials.scss b/www/assets/css/testimonials.scss index 343f653e9..a7a3e31c0 100644 --- a/www/assets/css/testimonials.scss +++ b/www/assets/css/testimonials.scss @@ -1,23 +1,10 @@ -$border-style: 1px solid $medium-gray; $row-padding: 20px; $row-max-height: 200px; -.testimonial-section, -.testimonial-single { - .full-testimonial { - border-bottom: $border-style; - } - +.testimonial-banner { .testimonial { - border-bottom: $border-style; padding: $row-padding 0; - img { - width: $row-max-height; - height: $row-max-height; - object-fit: cover; - } - .detail { h2, p { @@ -26,45 +13,508 @@ $row-max-height: 200px; } } } +.testimonial-content-container { + .row { + padding-top: 40px; + padding-bottom: 40px; + @include media-breakpoint-down(xs) { + padding-top: 20px; + padding-bottom: 20px; + } + } +} +.testimonial-banner { + .testimonials { + padding: 30px 15px; + @include media-breakpoint-down(xs) { + padding-top: 20px; + padding-bottom: 20px; + } + } +} -.testimonial-section { +.testimonial { .detail { - max-height: $row-max-height; - .text { - position: relative; - overflow: hidden; + h2 { + margin-bottom: 17px; + font-size: 28.5px; + font-weight: 700; + line-height: normal; + } + p.occupation { + margin-bottom: 18px; + font-weight: 400; + font-size: 18px; + line-height: normal; + } + p.summary { + text-overflow: ellipsis; + font-size: 18px; + color: #03152d; + font-weight: 700; + line-height: normal; + } } + } +} - .text:after { - position: absolute; - bottom: 0; - height: 100%; - width: 100%; - content: ""; - background: linear-gradient( - to top, - rgba(255, 255, 255, 1) 0%, - rgba(255, 255, 255, 0) 10% - ); - pointer-events: none; /* so the text is still selectable */ +// Override bootstrap's .modal-dialog properties using !important +.quote-modal-dialog { + max-width: 600px !important; + margin: 1rem auto !important; +} + +.modal-close-icon { + margin-left: 10px; + color: white; +} + +.quote-modal-body { + padding: 10px !important; +} + +.testimonial-card { + .story-body, + .quote-body { + padding: 0px 20px 10px 20px; + } + .read-full-testimonial { + color: #0a3e56; + font-size: 14px; + } + .read-full-testimonial:hover { + color: #a31f34 !important; + } + .content.testimonial-modal { + margin-bottom: 18px; + } + .content { + margin-bottom: 10px; + } + .testimonial-image-wrapper { + margin-bottom: 20px; + } + .testimonial-title { + padding: 0px 20px; + margin-bottom: 16px; + } + .testimonial-title .name { + font-size: 20px; + margin-bottom: 5px; + } + .testimonial-title .name.font-weight-bold { + font-size: 20px; + margin-bottom: 5px; + } +} + +.home-testimonials { + max-width: 1447px !important; + margin: auto !important; + padding-top: 60px; + + @include media-breakpoint-down(md) { + padding-top: 40px; + } + @include media-breakpoint-down(sm) { + padding-top: 20px; + } + + a.testimonial-link { + text-decoration: none; + } + .testimonial { + background-size: cover; + .name { + font-size: $font-lg; } + } + .testimonial-link { + padding: 10px !important; + } + .home-stories-carousel { + max-width: 1447px !important; + } + .carousel-arrow-left, + .carousel-arrow-right { + font-size: 3.75rem; + } +} + +.home-stories-banner { + margin-top: 30px; + padding-bottom: 60px; + + @include media-breakpoint-down(md) { + margin-top: 20px; + } + + @include media-breakpoint-down(xs) { + padding-bottom: 30px; + } + + .quotation-btn { + position: relative; + } - .location { - text-transform: uppercase; + .quotation-btn::before { + content: "”"; + position: absolute; + right: -4px; + top: -0.64rem; + color: white; + font-size: 50px; + font-style: normal; + font-weight: 700; + line-height: 30px; + } + + .home-stories-banner-content { + background: #03152d; + border-radius: 10px; + padding: 40px; + color: white; + + @include media-breakpoint-down(md) { + padding: 30px; } - .summary { - text-overflow: ellipsis; + a.share-story-btn { + padding: 20px 30px; + color: #03152d; + font-size: 18px; + font-style: normal; + font-weight: 400; + background: white; + border-radius: 3px; + @include media-breakpoint-down(md) { + padding: 16px 20px; + } + } + + .share-story-title { + margin-bottom: 0.25rem; + font-weight: bold; + color: white; + font-size: 22px; + text-transform: none; + line-height: 1.75rem; + } + + .share-story-description { + margin: 0; } } } -.testimonial-single { - .summary { - font-size: $font-lg; - font-weight: 600; - font-style: italic; - color: $medium-gray; +.home-testimonials .carousel-item { + padding: 0 8px; +} +.story-body.carousel, +.quote-body.carousel { + min-height: 180px; +} + +.testimonial-banner { + border-bottom: 1px solid $border-gray-testimonial; + background: #f0f5f7; + box-shadow: 0px 2px 10px 0px rgba(120, 169, 197, 0.15); +} + +.view-all-stories { + margin-top: 40px; + padding-bottom: 30px; + @include media-breakpoint-down(xs) { + margin-top: 20px; + padding-bottom: 20px; + } +} + +// List styling +.testimonial-list-container { + .testimonial-banner.list { + .standard-width.container { + padding-top: 50px; + padding-bottom: 50px; + @include media-breakpoint-down(xs) { + padding-top: 20px; + padding-bottom: 20px; + } + } + h1 { + margin-bottom: 20px !important; + text-align: center; + font-size: 32px; + font-weight: 700; + line-height: 20px; + @include media-breakpoint-down(xs) { + line-height: 40px; + margin-bottom: 20px !important; + } + } + } + .standard-width.container > * { + margin: 0 auto; + } + .item-wrapper { + margin-top: 1rem; + } + .testimonial-banner { + h1 { + font-size: 35px; + font-weight: 700; + line-height: 25px; + margin-bottom: 25px; + } + p { + font-size: 18px; + font-weight: 400; + line-height: 25px; + text-align: center; + margin: 0; + } + } + .testimonial-link { + padding: 10px !important; + flex: 1 1 auto; + } + + .standard-width.container { + padding-top: 34px; + @include media-breakpoint-down(xs) { + padding-top: 4px; + } + } + .stories-list-item-container { + margin-right: -16px !important; + } +} +// Single styling +.testimonial-single-container { + .testimonial-banner { + .testimonial > div { + width: 100%; + } + .detail { + margin-left: 30px; + } + } + .img-container.single-testimonial-page { + width: 100%; + padding-top: 56.25%; + position: relative; + overflow: hidden; + border-radius: 8px; + } + + .img-container.single-testimonial-page img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + object-position: 50% 25%; + } + .view-all-stories-left-btn { + .view-all-stories-left-arrow { + margin-right: 10px; + } + h1 { + margin: 0; + font-size: 35px; + } + } + .more-stories { + .more-stories-item-cards-wrapper { + margin-right: -16px; + } + h3 { + font-size: 22px; + font-weight: 700; + line-height: 28px; + @include media-breakpoint-down(md) { + padding: 15px 0 0 0; + } + margin: 0; + } + .item-wrapper.testimonial-link { + flex: 1 1; + padding: 10px; + margin-top: 16px; + margin-right: 16px; + } + .view-all-stories { + margin-top: 16px; + color: white; + font-size: 14px; + font-weight: 700; + border-radius: 5px; + background: #03152d; + } + } +} + +.view-all-stories-btn { + padding: 15px 20px; + border-radius: 3px; + border: 1px solid $border-gray-testimonial !important; + background: white !important; + font-weight: 600 !important; + color: #03152d !important; + + .view-all-stories-arrow { + margin-left: 10px; + color: white; + } +} + +.view-all-stories-btn:hover { + color: white !important; + background: #a31f34 !important; + + img { + filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7486%) + hue-rotate(142deg) brightness(96%) contrast(103%); + } +} + +.share-story-btn:hover { + color: white !important; + background: #a31f34 !important; +} +.stories-list-item > a { + margin-right: 16px !important; +} + +.share-story-text { + @include breakpoint(desktop) { + margin-right: 70px; + } + @media (min-width: 768px) and (max-width: 800px) { + margin-right: 30px; + } +} + +.testimonial-title.quote { + position: relative; +} + +.testimonial-title.quote::before { + content: "“"; + position: absolute; + left: 1.1rem; + top: -2.82rem; + color: $highlight-red !important; + font-size: 82px; + font-style: normal; + font-weight: 400; + line-height: normal; +} +.single-testimonial-image-wrapper { + max-width: 200px; +} +.testimonial-image-wrapper { + position: relative; + width: 100%; + padding-top: 56.25%; // 16:9 aspect ratio + + .testimonial-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 5px; + object-position: 50% 25%; + } +} +.story-body .content { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 5; + overflow: hidden; + text-overflow: ellipsis; +} + +.quote-body div.content { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 6; + overflow: hidden; + text-overflow: ellipsis; + position: relative; + padding-left: 20px; + align-self: stretch; + color: black; + font-size: 16px; + font-style: italic; + font-weight: 400; + line-height: 22px; +} +.quote-body-dialog { + padding-left: 20px; + div.content { + position: relative; + } + div.content::before { + content: ""; + position: absolute; + left: 0; + top: 2px; + height: 99%; + width: 1px; + background: $medium-gray; + } +} +.quote-body div.content::before { + content: ""; + position: absolute; + left: 0; + top: 2px; + height: 95%; + width: 1px; + background-color: $medium-gray; +} +.occupation-wrapper { + font-weight: 400; + color: #0f0f0f; +} +div.content.testimonial-modal { + font-style: italic; + padding-left: 20px; +} +.modal-body .quote-body div.content.testimonial-modal { + margin: 0px; +} +.quote-modal-dialog { + .quote-modal-content { + position: relative; + .modal-close-btn { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 1.5rem; + line-height: 1; + color: black; + cursor: pointer; + z-index: 999; + padding: 15px !important; + background: #a31f34 !important; + opacity: 1 !important; + border-bottom-left-radius: 8px; + border-top-right-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + transition: background-color 0.3s ease; + } + .modal-close-btn:hover { + background: black !important; + } } } diff --git a/www/layouts/home.html b/www/layouts/home.html index e538dc264..f851b4a34 100644 --- a/www/layouts/home.html +++ b/www/layouts/home.html @@ -115,6 +115,7 @@

Your Donation Makes a Difference

{{ partial "ocw_news.html" . }} {{ partial "home_stories.html" . }} + {{ partial "home_stories_banner.html" }}
diff --git a/www/layouts/partials/home_stories.html b/www/layouts/partials/home_stories.html index 2888c0565..f45bbcc26 100644 --- a/www/layouts/partials/home_stories.html +++ b/www/layouts/partials/home_stories.html @@ -1,45 +1,92 @@ {{- $stories := where .Site.RegularPages "Type" "==" "stories" -}} {{- $storiesSection := .Site.GetPage "section" "stories" -}} -{{- $breakdowns := (dict "xs-sm" (dict "size" 1 "class" "d-flex d-md-none") "md" (dict "size" 2 "class" "d-none d-md-flex d-lg-none") "lg" (dict "size" 3 "class" "d-none d-lg-flex d-xl-none") "xl" (dict "size" 4 "class" "d-none d-xl-flex")) -}} -
+{{- $breakdowns := dict + "xs-sm" (dict "size" 1 "class" "d-flex d-md-none") + "md" (dict "size" 2 "class" "d-none d-md-flex d-lg-none") + "lg" (dict "size" 2 "class" "d-none d-lg-flex d-xl-none") + "xl" (dict "size" 3 "class" "d-none d-xl-flex") +-}} +
{{ range $breakpoint, $carouselInfo := $breakdowns }} {{ $itemsInCarousel := index $carouselInfo "size" }} {{ $breakpointVisibilityClass := index $carouselInfo "class" }} {{ $isMobile := (eq $itemsInCarousel 1) }} {{ $carouselId := (printf "testimonial-carousel-%v" $breakpoint) }}
-