Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove force full width and use JS to adjust element positions if needed #71

Closed
wants to merge 1 commit into from
Closed

Remove force full width and use JS to adjust element positions if needed #71

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/components/elements/screen-centered.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
"use client"

import {HTMLAttributes, useCallback, useEffect, useRef, useState} from "react"
import {useEventListener} from "usehooks-ts"

const ScreenCentered = ({children}: HTMLAttributes<HTMLDivElement>) => {
const ref = useRef<HTMLDivElement>(null)
const [translate, setTranslate] = useState(0)
const calculateTranslation = useCallback(() => setTranslate(ref.current?.getBoundingClientRect().x || 0), [])
useEventListener("resize", calculateTranslation)
useEffect(() => calculateTranslation(), [calculateTranslation])

return (
<div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2">
<div ref={ref} className="relative left-1/2 w-screen -translate-x-1/2 m-0">

Just this little change to remove the white space between banners and we should be good to go!

<div style={{transform: `translate(-${translate}px)`}}>{children}</div>
</div>
)
}
export default ScreenCentered
20 changes: 2 additions & 18 deletions src/components/nodes/pages/stanford-page/stanford-page-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,7 @@ import Rows from "@components/paragraphs/rows/rows"
import InteriorPage from "@components/layouts/interior-page"
import {H1} from "@components/elements/headers"
import {HtmlHTMLAttributes} from "react"
import {
NodeStanfordPage,
NodeStanfordPageSuPageBannerUnion,
NodeStanfordPageSuPageComponentsUnion,
} from "@lib/gql/__generated__/drupal.d"
import {NodeStanfordPage, NodeStanfordPageSuPageBannerUnion} from "@lib/gql/__generated__/drupal.d"
import PageTitleBannerParagraph from "@components/paragraphs/stanford-page-title-banner/page-title-banner-paragraph"
import SumArcBannerParagraph from "@components/paragraphs/sum-arc-banner/sum-arc-banner-paragraph"
import SumTopBannerParagraph from "@components/paragraphs/sum-top-banner/sum-top-banner-paragraph"
Expand All @@ -17,25 +13,13 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
}

const StanfordPagePage = ({node, ...props}: Props) => {
// If the page contains any of the following components, force the page to be full width. This prevents the need to
// address the large components on "interior" pages that contain a left sidebar. It's more effort than it's worth.
const fullWidthComponents: NodeStanfordPageSuPageComponentsUnion["__typename"][] = [
"ParagraphSumTestimonial",
"ParagraphSumCarousel",
"ParagraphSumCourseFilter",
"ParagraphSumPillBanner",
"ParagraphStanfordBanner",
]
const pageTitleBanners: NodeStanfordPageSuPageBannerUnion["__typename"][] = [
"ParagraphStanfordPageTitleBanner",
"ParagraphSumArcBanner",
"ParagraphSumTopBanner",
]

const fullWidth =
node.layoutSelection?.id === "stanford_basic_page_full" ||
!!node.suPageComponents?.find(component => fullWidthComponents.includes(component.__typename))

const fullWidth = node.layoutSelection?.id === "stanford_basic_page_full"
const lastComponent = node.suPageComponents?.[node.suPageComponents?.length - 1]?.__typename

const hasBannerOrCalculator = [
Expand Down
145 changes: 77 additions & 68 deletions src/components/paragraphs/stanford-banner/banner-paragraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import ActionLink from "@components/elements/action-link"
import Link from "next/link"
import {ArrowRightIcon} from "@heroicons/react/24/outline"
import Image from "next/image"
import ScreenCentered from "@components/elements/screen-centered"

type Props = HtmlHTMLAttributes<HTMLDivElement> & {
paragraph: ParagraphStanfordBanner
Expand All @@ -30,80 +31,88 @@ const BannerParagraph = ({paragraph, eagerLoadImage, ...props}: Props) => {
const BannerWrapper: ElementType = isSection ? "section" : "div"

return (
<BannerWrapper
{...props}
aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
className="relative left-1/2 !mt-0 flex w-screen -translate-x-1/2 flex-col @container md:min-h-[400px] lg:block"
>
{hasCard && (
<div
className={twMerge(
"rs-px-5 rs-pb-8 rs-pt-10 relative mb-0 flex h-full min-h-[400px] w-full flex-col border-b-4 border-white bg-poppy-light lg:z-10 lg:w-[calc(50%_-_5rem)] lg:border-4 lg:border-y-0",
clsx({
"lg:ml-auto lg:mr-20": overlayPosition === "right",
"lg:ml-20 lg:mr-auto": overlayPosition !== "right",
"bg-olive-light": bgColor === "olive",
"bg-spirited-light": bgColor === "spirited",
"bg-spirited-dark text-white": bgColor === "spirited_dark",
})
)}
>
{paragraph.suBannerHeader && (
<div id={paragraph.id} className={behaviors.hero_pattern?.hide_heading ? "sr-only" : undefined}>
{headerTag === "h2" && <H2 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H2>}
{headerTag === "h3" && <H3 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H3>}
{headerTag === "h4" && <H4 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H4>}
{headerTag === "div" && (
<div className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</div>
)}
</div>
)}
<ScreenCentered>
<BannerWrapper
{...props}
aria-labelledby={paragraph.suBannerHeader ? paragraph.id : undefined}
className="!mt-0 flex flex-col @container md:min-h-[400px] lg:block"
>
{hasCard && (
<div
className={twMerge(
"rs-px-5 rs-pb-8 rs-pt-10 relative mb-0 flex h-full min-h-[400px] w-full flex-col border-b-4 border-white bg-poppy-light lg:z-10 lg:w-[calc(50%_-_5rem)] lg:border-4 lg:border-y-0",
clsx({
"lg:ml-auto lg:mr-20": overlayPosition === "right",
"lg:ml-20 lg:mr-auto": overlayPosition !== "right",
"bg-olive-light": bgColor === "olive",
"bg-spirited-light": bgColor === "spirited",
"bg-spirited-dark text-white": bgColor === "spirited_dark",
})
)}
>
{paragraph.suBannerHeader && (
<div id={paragraph.id} className={behaviors.hero_pattern?.hide_heading ? "sr-only" : undefined}>
{headerTag === "h2" && (
<H2 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H2>
)}
{headerTag === "h3" && (
<H3 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H3>
)}
{headerTag === "h4" && (
<H4 className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</H4>
)}
{headerTag === "div" && (
<div className={twMerge(headerClasses, "rs-mb-3")}>{paragraph.suBannerHeader}</div>
)}
</div>
)}

{paragraph.suBannerSupHeader && (
<div className="rs-mb-1 order-first text-09em font-normal uppercase">{paragraph.suBannerSupHeader}</div>
)}
{paragraph.suBannerSupHeader && (
<div className="rs-mb-1 order-first text-09em font-normal uppercase">{paragraph.suBannerSupHeader}</div>
)}

<Wysiwyg html={paragraph.suBannerBody?.processed} className="big-paragraph" />
<Wysiwyg html={paragraph.suBannerBody?.processed} className="big-paragraph" />

{paragraph.suBannerButton?.url && !semiCircleButton && (
<div className="rs-pt-2">
<ActionLink
className="btn rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
href={paragraph.suBannerButton.url}
>
{paragraph.suBannerButton.title}
</ActionLink>
</div>
)}
</div>
)}
<div className="lg:aspect-auto relative aspect-[16/9] w-full bg-cool-grey lg:absolute lg:top-0 lg:h-full">
{paragraph.suBannerImage?.mediaImage && (
<Image
className="object-cover"
src={paragraph.suBannerImage?.mediaImage.url}
alt={paragraph.suBannerImage?.mediaImage.alt || ""}
loading={eagerLoadImage ? "eager" : "lazy"}
fill
sizes="100vw"
/>
{paragraph.suBannerButton?.url && !semiCircleButton && (
<div className="rs-pt-2">
<ActionLink
className="btn rounded-full border-2 border-transparent bg-digital-red px-8 py-4 font-normal text-white transition hocus:border-white hocus:text-white"
href={paragraph.suBannerButton.url}
>
{paragraph.suBannerButton.title}
</ActionLink>
</div>
)}
</div>
)}
<div className="rs-pr-1 absolute top-0 z-50 flex w-screen justify-end lg:bottom-0 lg:left-0 lg:top-auto lg:justify-center lg:p-0">
{paragraph.suBannerButton?.url && semiCircleButton && (
<Link
className="group flex aspect-[2/1] h-fit w-[210px] items-start justify-center rounded-bl-full rounded-br-full border-4 border-b-4 border-t-0 border-white bg-spirited-dark text-white hocus:text-white md:w-[250px] lg:items-end lg:rounded-b-none lg:rounded-tl-full lg:rounded-tr-full lg:border-b-0 lg:border-t-4 2xl:w-[300px]"
href={paragraph.suBannerButton.url}
>
<span className="sr-only">{paragraph.suBannerButton.title}</span>
<ArrowRightIcon
width={60}
className="mt-10 inline-block w-[45px] border-b-2 border-transparent group-hocus:border-white lg:mb-10 lg:mt-0 2xl:mb-16 2xl:w-[60px]"
/>
</Link>
<div className="lg:aspect-auto relative aspect-[16/9] w-full bg-cool-grey lg:absolute lg:top-0 lg:h-full">
{paragraph.suBannerImage?.mediaImage && (
<Image
className="object-cover"
src={paragraph.suBannerImage?.mediaImage.url}
alt={paragraph.suBannerImage?.mediaImage.alt || ""}
loading={eagerLoadImage ? "eager" : "lazy"}
fill
sizes="100vw"
/>
)}
<div className="rs-pr-1 absolute top-0 z-50 flex w-screen justify-end lg:bottom-0 lg:left-0 lg:top-auto lg:justify-center lg:p-0">
{paragraph.suBannerButton?.url && semiCircleButton && (
<Link
className="group flex aspect-[2/1] h-fit w-[210px] items-start justify-center rounded-bl-full rounded-br-full border-4 border-b-4 border-t-0 border-white bg-spirited-dark text-white hocus:text-white md:w-[250px] lg:items-end lg:rounded-b-none lg:rounded-tl-full lg:rounded-tr-full lg:border-b-0 lg:border-t-4 2xl:w-[300px]"
href={paragraph.suBannerButton.url}
>
<span className="sr-only">{paragraph.suBannerButton.title}</span>
<ArrowRightIcon
width={60}
className="mt-10 inline-block w-[45px] border-b-2 border-transparent group-hocus:border-white lg:mb-10 lg:mt-0 2xl:mb-16 2xl:w-[60px]"
/>
</Link>
)}
</div>
</div>
</div>
</BannerWrapper>
</BannerWrapper>
</ScreenCentered>
)
}
export default BannerParagraph
73 changes: 38 additions & 35 deletions src/components/paragraphs/sum-carousel/sum-carousel-paragraph.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import ArcBanner from "@components/patterns/arc-banner"
import {getParagraphBehaviors} from "../get-paragraph-behaviors"
import clsx from "clsx"
import {twMerge} from "tailwind-merge"
import ScreenCentered from "@components/elements/screen-centered"

type Props = HTMLAttributes<HTMLElement> & {
paragraph: ParagraphSumCarousel
Expand All @@ -26,50 +27,52 @@ const SumCarouselParagraph = ({paragraph, ...props}: Props) => {
const Element = paragraph.sumCarouselHeader ? "article" : "div"

return (
<Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
{isArcBanner && (
<ArcBanner isBorder>
<ScreenCentered>
<Element {...props} aria-labelledby={paragraph.sumCarouselHeader ? paragraph.id : undefined}>
{isArcBanner && (
<ArcBanner isBorder>
<CarouselTop
header={paragraph.sumCarouselHeader}
superHeader={paragraph.sumCarouselSuperheader}
headingSize={headingSize}
description={paragraph.sumCarouselDescription?.processed}
link={paragraph.sumCarouselLink}
className="md:rs-mt-7"
headerId={paragraph.id}
/>
</ArcBanner>
)}

{!isArcBanner && (
<CarouselTop
header={paragraph.sumCarouselHeader}
superHeader={paragraph.sumCarouselSuperheader}
headingSize={headingSize}
description={paragraph.sumCarouselDescription?.processed}
link={paragraph.sumCarouselLink}
className="md:rs-mt-7"
headerId={paragraph.id}
/>
</ArcBanner>
)}

{!isArcBanner && (
<CarouselTop
header={paragraph.sumCarouselHeader}
superHeader={paragraph.sumCarouselSuperheader}
headingSize={headingSize}
description={paragraph.sumCarouselDescription?.processed}
link={paragraph.sumCarouselLink}
headerId={paragraph.id}
/>
)}
)}

{paragraph.sumCarouselSlides && (
<div className="relative left-1/2 mb-32 mt-0 w-screen -translate-x-1/2">
<Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
{paragraph.sumCarouselSlides.map((slide, slideIndex) => {
return (
<CarouselSlide
key={slide.id}
slide={slide}
slideNumber={slideIndex + 1}
totalSlides={paragraph.sumCarouselSlides?.length || 0}
slideHeader={paragraph.sumCarouselHeader ? "h3" : "h2"}
/>
)
})}
</Slideshow>
</div>
)}
</Element>
{paragraph.sumCarouselSlides && (
<div className="mb-32 mt-0">
<Slideshow className="mx-auto w-[calc(100%-50px)] xl:w-[calc(100%-150px)]">
{paragraph.sumCarouselSlides.map((slide, slideIndex) => {
return (
<CarouselSlide
key={slide.id}
slide={slide}
slideNumber={slideIndex + 1}
totalSlides={paragraph.sumCarouselSlides?.length || 0}
slideHeader={paragraph.sumCarouselHeader ? "h3" : "h2"}
/>
)
})}
</Slideshow>
</div>
)}
</Element>
</ScreenCentered>
)
}

Expand Down
Loading