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

SUM-47 Theme & Style local footer #1

Merged
merged 14 commits into from
Apr 24, 2024
Merged

SUM-47 Theme & Style local footer #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
a6b091f
SUM-47 | @rebeccahongsf | theme footer
rebeccahongsf Apr 10, 2024
4a982ff
add roboto font, adjust lockup for mobile, add arrow right link optio…
rebeccahongsf Apr 11, 2024
844544d
fixup social links
rebeccahongsf Apr 11, 2024
c02f46d
add archway color to wysiwyg
rebeccahongsf Apr 11, 2024
8295dd1
fixup action link and button styles
rebeccahongsf Apr 12, 2024
d77b7db
fixup responsive
rebeccahongsf Apr 12, 2024
682bdd2
fixup
rebeccahongsf Apr 19, 2024
f7a7b95
remove semicols
rebeccahongsf Apr 22, 2024
f9cc345
fixup font
rebeccahongsf Apr 22, 2024
4f06330
revert page footer
rebeccahongsf Apr 23, 2024
11b016f
fixup buttons and formatting
rebeccahongsf Apr 23, 2024
e94ec65
revert page footer
rebeccahongsf Apr 23, 2024
e235df6
revert page footer
rebeccahongsf Apr 23, 2024
d9cca9d
Fixup
pookmish Apr 24, 2024
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
5 changes: 3 additions & 2 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import BackToTop from "@components/elements/back-to-top";
import PageFooter from "@components/global/page-footer";
import PageHeader from "@components/global/page-header";
import {Icon} from "next/dist/lib/metadata/types/metadata-types";
import {sourceSans3} from "../src/styles/fonts";
import { roboto, sourceSans3} from "../src/styles/fonts";
import DrupalWindowSync from "@components/elements/drupal-window-sync";
import {isPreviewMode} from "@lib/drupal/utils";
import UserAnalytics from "@components/elements/user-analytics";
import clsx from "clsx";

const appleIcons: Icon[] = [60, 72, 76, 114, 120, 144, 152, 180].map(size => ({
url: `https://www-media.stanford.edu/assets/favicon/apple-touch-icon-${size}x${size}.png`,
Expand Down Expand Up @@ -45,7 +46,7 @@ export const revalidate = false;
const RootLayout = ({children, modal}: { children: React.ReactNode, modal: React.ReactNode }) => {
const isPreview = isPreviewMode();
return (
<html lang="en" className={sourceSans3.className}>
<html lang="en" className={clsx(sourceSans3.className, roboto.variable)}>
{/* Add Google Analytics and SiteImprove when not in preview mode. */}
{!isPreview &&
<UserAnalytics/>
Expand Down
188 changes: 96 additions & 92 deletions src/components/config-pages/local-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,15 @@ import LockupP from "@components/elements/lockup/lockup-p";
import LockupR from "@components/elements/lockup/lockup-r";
import LockupS from "@components/elements/lockup/lockup-s";
import LockupT from "@components/elements/lockup/lockup-t";
import {JSX} from "react";
import {H2} from "@components/elements/headers";
import { JSX } from "react";
import { H2 } from "@components/elements/headers";
import TwitterIcon from "@components/elements/icons/TwitterIcon";
import YoutubeIcon from "@components/elements/icons/YoutubeIcon";
import FacebookIcon from "@components/elements/icons/FacebookIcon";
import { Maybe, StanfordLocalFooter} from "@lib/gql/__generated__/drupal.d";
import {buildUrl} from "@lib/drupal/utils";
import { Maybe, StanfordLocalFooter } from "@lib/gql/__generated__/drupal.d";
import { buildUrl } from "@lib/drupal/utils";
import InstagramIcon from "@components/elements/icons/InstagramIcon";
import LinkedInIcon from "@components/elements/icons/LinkedInIcon";

const LocalFooter = ({
suFooterEnabled,
Expand Down Expand Up @@ -55,197 +57,199 @@ const LocalFooter = ({
line3: suLocalFootLine3,
line4: suLocalFootLine4,
line5: suLocalFootLine5,
logoUrl: !suLocalFootUseLogo && suLocalFootLocImg?.url ? buildUrl(suLocalFootLocImg?.url).toString() : undefined,
}
logoUrl:
!suLocalFootUseLogo && suLocalFootLocImg?.url
? buildUrl(suLocalFootLocImg?.url).toString()
: undefined,
};

return (
<div className="local-footer bg-foggy-light py-20">
<div className="centered">
<div className="mb-20">
<FooterLockup {...lockupProps} />
</div>

<div
className="grid md:grid-cols-2 lg:grid-cols-4 gap-32 [&_a]:font-normal [&_a]:no-underline [&_a:hover]:underline [&_a:hover]:text-black [&_a:focus]:underline [&_a:focus]:text-black [&_a]:transition">
<div>
<div className="grid grid-cols-6 md:grid-cols-12 gap-32 md:gap-y-0 [&_a]:font-semibold [&_a]:no-underline [&_a:hover]:underline [&_a:focus]:underline [&_a]:transition">
<div className="col-span-6 md:col-span-7 2xl:col-span-5 md:col-start-1 2xl:col-start-2 md:col-span-5 md:rs-mb-4">
<FooterLockup {...lockupProps} />
</div>

{suLocalFootAddress &&
<Address {...suLocalFootAddress}/>
}
<div className="col-span-6 md:col-span-7 2xl:col-span-5 md:col-start-1 2xl:col-start-2 md:col-span-5">
{suLocalFootAddress && <Address {...suLocalFootAddress} />}

{suLocalFootAction &&
<ul className="list-unstyled">
{suLocalFootAction.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-action-link-${index}`}>
<Link href={link.url}>
{link.title}
</Link>
<Link href={link.url}>{link.title}</Link>
</li>
)
);
})}
</ul>
}

{suLocalFootSocial &&
<ul className="list-unstyled flex gap-2">
<Wysiwyg
html={suLocalFootPrCo?.processed}
className="text-archway"
/>

{suLocalFootSocial && (
<ul className="rs-mt-4 list-unstyled flex gap-11 items-center children:mb-0">
Copy link
Contributor

Choose a reason for hiding this comment

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

Why children:mb-0 instead of mb-0 on the <li> element? I'm not asking for any changes, just curious of your choice here.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ah, this was user error 😄 I was moving some things around and added seperate <li> item so I added children:mb-0 so that all children are targeted. I eventually removed it and forgot to rework the classes. In this case, we can definitely further specify and add className="children:mb-0" to the <li>

Copy link
Member

Choose a reason for hiding this comment

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

This comment not related to whether we use children:mb-0 on ul or mb-0 on li, but *: has officially replaced children: - it's in Tailwind core now 😄 @rebeccahongsf

{suLocalFootSocial.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-action-link-${index}`}>
<Link href={link.url}>
<SocialIcon url={link.url}/>
<Link href={link.url} className="text-archway">
<SocialIcon url={link.url} />
<span className="sr-only">{link.title}</span>
</Link>
</li>
)
);
})}
</ul>
}

<Wysiwyg html={suLocalFootPrCo?.processed}/>
)}
</div>

<div>
{suLocalFootPrimeH &&
<H2 className="text-m1">{suLocalFootPrimeH}</H2>}
{suLocalFootPrimary &&
<div className="col-span-6 sm:col-span-3 md:col-span-2 md:col-start-8 2xl:col-start-7 font-roboto">
{suLocalFootPrimeH && <H2 className="text-m1 font-normal">{suLocalFootPrimeH}</H2>}
{suLocalFootPrimary && (
<ul className="list-unstyled">
{suLocalFootPrimary.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-primary-link-${index}`}>
<Link href={link.url}>
<Link href={link.url} className="link--action">
{link.title}
</Link>
</li>
)
);
})}
</ul>
}
<Wysiwyg html={suLocalFootSeCo?.processed}/>

)}
<Wysiwyg html={suLocalFootSeCo?.processed} />
</div>

<div>
{suLocalFootSecondH &&
<H2 className="text-m1">{suLocalFootSecondH}</H2>}
<div className="col-span-6 sm:col-span-3 md:col-start-10 2xl:col-start-9 font-roboto">
{suLocalFootSecondH && <H2 className="text-m1 font-normal">{suLocalFootSecondH}</H2>}

{suLocalFootSecond &&
{suLocalFootSecond &&
<ul className="list-unstyled">
{suLocalFootSecond.map((link, index) => {
if (!link.url) return;
return (
<li key={`footer-second-link-${index}`}>
<Link href={link.url}>
<Link href={link.url} className="link--action">
{link.title}
</Link>
</li>
)
);
})}
</ul>
}

<Wysiwyg html={suLocalFootTr2Co?.processed}/>

<Wysiwyg html={suLocalFootTr2Co?.processed} />
</div>

<Wysiwyg html={suLocalFootTrCo?.processed}/>

<Wysiwyg html={suLocalFootTrCo?.processed} />
</div>
</div>
</div>
)
}

const SocialIcon = ({url}: { url: string }) => {
if (url.includes("twitter.com")) return <TwitterIcon/>
if (url.includes("youtube.com")) return <YoutubeIcon/>
if (url.includes("facebook")) return <FacebookIcon/>
);
};

const SocialIcon = ({ url }: { url: string }) => {
if (url.includes("facebook")) return <FacebookIcon />;
if (url.includes("linkedin")) return <LinkedInIcon />;
if (url.includes("twitter.com")) return <TwitterIcon />;
if (url.includes("instagram.com")) return <InstagramIcon />;
if (url.includes("youtube.com")) return <YoutubeIcon />;
return null;
}
};

export interface FooterLockupProps {
useDefault?: Maybe<boolean>
siteName?: Maybe<string>
lockupOption?: Maybe<string>
line1?: Maybe<string>
line2?: Maybe<string>
line3?: Maybe<string>
line4?: Maybe<string>
line5?: Maybe<string>
logoUrl?: Maybe<string>
useDefault?: Maybe<boolean>;
siteName?: Maybe<string>;
lockupOption?: Maybe<string>;
line1?: Maybe<string>;
line2?: Maybe<string>;
line3?: Maybe<string>;
line4?: Maybe<string>;
line5?: Maybe<string>;
logoUrl?: Maybe<string>;
}

const FooterLockup = ({useDefault = true, siteName, lockupOption, ...props}: FooterLockupProps): JSX.Element => {
const FooterLockup = ({
useDefault = true,
siteName,
lockupOption,
...props
}: FooterLockupProps): JSX.Element => {
const lockupProps = {
...props
}
...props,
};

lockupOption = useDefault ? "default" : lockupOption
lockupOption = useDefault ? "default" : lockupOption;

switch (lockupOption) {
case "none":
return (
<div className="py-10">
<Link href="/"
className="flex flex-col lg:flex-row gap-4 no-underline">
<LockupLogo {...lockupProps}/>
<Link
href="/"
className="flex flex-row gap-4 no-underline font-roboto"
>
<LockupLogo {...lockupProps} />
</Link>
</div>
)
);

case "a":
return <LockupA {...lockupProps}/>;
return <LockupA {...lockupProps} />;

case "b":
return <LockupB {...lockupProps}/>;
return <LockupB {...lockupProps} />;

case "d":
return <LockupD {...lockupProps}/>;
return <LockupD {...lockupProps} />;

case "e":
return <LockupE {...lockupProps}/>;
return <LockupE {...lockupProps} />;

case "h":
return <LockupH {...lockupProps}/>;
return <LockupH {...lockupProps} />;

case "i":
return <LockupI {...lockupProps}/>;
return <LockupI {...lockupProps} />;

case "m":
return <LockupM {...lockupProps}/>;
return <LockupM {...lockupProps} />;

case "o":
return <LockupO {...lockupProps}/>;
return <LockupO {...lockupProps} />;

case "p":
return <LockupP {...lockupProps}/>;
return <LockupP {...lockupProps} />;

case "r":
return <LockupR {...lockupProps}/>;
return <LockupR {...lockupProps} />;

case "s":
return <LockupS {...lockupProps}/>;
return <LockupS {...lockupProps} />;

case "t":
return <LockupT {...lockupProps}/>;
return <LockupT {...lockupProps} />;
}


return (
<div className="py-10">
<Link href="/" className="flex flex-col lg:flex-row gap-4 no-underline">
<LockupLogo {...lockupProps}/>
<Link href="/" className="flex flex-row gap-4 no-underline">
<LockupLogo {...lockupProps} />

<div className="w-[1px] bg-black shrink-0"/>
<div className="w-[1px] bg-black shrink-0" />
<div className="font-normal text-black text-m2 leading-none">
{siteName || "University"}
</div>
</Link>
</div>
)

}
export default LocalFooter;
);
};
export default LocalFooter
18 changes: 9 additions & 9 deletions src/components/elements/action-link.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
import Link from "@components/elements/link";
import {ChevronRightIcon} from "@heroicons/react/20/solid";
import {HtmlHTMLAttributes} from "react";
import {twMerge} from "tailwind-merge";
import { ArrowRightIcon } from "@heroicons/react/20/solid";
import { HtmlHTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

type Props = HtmlHTMLAttributes<HTMLAnchorElement> & {
/**
* Link url.
*/
href: string
}
};

const ActionLink = ({children, ...props}: Props) => {
const ActionLink = ({ children, ...props }: Props) => {
return (
<Link {...props} className={twMerge("relative", props.className)}>
{children}
<ChevronRightIcon height={25} className="ml-2 inline-block"/>
<ArrowRightIcon width={20} className="ml-2 inline-block" />
</Link>
)
}
export default ActionLink;
);
};
export default ActionLink
Loading
Loading