From f918eaec12cbb4c7791cd9bf7b864184a0a7f0cb Mon Sep 17 00:00:00 2001 From: Filip Stoyanov Date: Wed, 23 Oct 2024 09:32:20 +0100 Subject: [PATCH 1/2] filip(fix): add new footer designs --- docusaurus.config.ts | 13 +++++++ src/css/custom.css | 52 +++++++++++++++++++------ src/hooks/useMediaQuery.ts | 19 +++++++++ src/theme/Footer/Logo/index.tsx | 39 +++++++++++++++++++ src/theme/Footer/Logo/styles.module.css | 9 +++++ static/img/logo-only-symbol.svg | 4 ++ 6 files changed, 125 insertions(+), 11 deletions(-) create mode 100644 src/hooks/useMediaQuery.ts create mode 100644 src/theme/Footer/Logo/index.tsx create mode 100644 src/theme/Footer/Logo/styles.module.css create mode 100644 static/img/logo-only-symbol.svg diff --git a/docusaurus.config.ts b/docusaurus.config.ts index b73e821..2f1658e 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -99,14 +99,27 @@ const config: Config = { }, copyright: `Copyright © ${new Date().getFullYear()} IOG, Inc.`, links: [ + { + label: 'Report an issue', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=bug&projects=&template=issue-report.md&title=', + }, + { + label: 'Share feedback', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=feedback&projects=&template=feedback.md&title= ', + }, { label: 'Cookie Policy', href: 'pathname:///iog-cookie-policy.pdf', }, + { label: 'Privacy Policy', href: 'pathname:///iog-privacy-policy.pdf', }, + { + label: 'Got a story?', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=blog&projects=&template=blog.md&title= ', + }, { label: 'Terms and Conditions', href: 'pathname:///iog-terms-and-conditions.pdf', diff --git a/src/css/custom.css b/src/css/custom.css index e7b965f..993973d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -135,29 +135,59 @@ div:has(> .dsla-search-wrapper) { --ifm-navbar-sidebar-width: 100vw; } +.footer { + padding-top: 60px; +} + .footer .container { display: flex; flex-direction: column; gap: 1.5rem; } -.footer__bottom { - display: contents; - text-align: left; +.footer__link-item, +.footer__copyright { + font-size: 0.875rem; } .footer__links { + display: grid; + grid-template-columns: repeat(2, 160px); + row-gap: 12px; + column-gap: 24px; +} + +@media (max-width: 768px) { + .footer__links { + grid-template-columns: repeat(1, 160px); + } + + .footer__link-item:nth-of-type(4) { + margin-top: 24px; + } + + .footer__logo img { + content: url('@site/static/img/logo-only-symbol.svg'); + } +} + +.footer__link-item { + color: var(--color-white-1) !important; text-align: left; - margin: 0; + width: 100%; + + svg { + display: none; + } } -.footer__bottom > div:first-child { - order: -1; - /* docusaurus theme uses !important so we need to override it */ - margin: 0 !important; +.footer__link-separator { + display: none !important; } -.footer__link-item, -.footer__copyright { - font-size: 0.875rem; +.footer__bottom { + display: flex; + border-top: 1px solid var(--ifm-footer-color); + justify-content: space-between; + align-items: center; } diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts new file mode 100644 index 0000000..cfcc3b6 --- /dev/null +++ b/src/hooks/useMediaQuery.ts @@ -0,0 +1,19 @@ +import { useEffect, useState } from 'react'; + +export default function useMediaQuery(query: string) { + const [match, setMatch] = useState(false); + + useEffect(() => { + const matchMedia = window.matchMedia(query); + const listener = (e: MediaQueryListEvent) => { + if (process.env.NODE_ENV !== 'production') { + console.info(`Media query change: ${query}`, e.matches); + } + setMatch(e.matches); + }; + matchMedia.addEventListener('change', listener); + setMatch(matchMedia.matches); + return () => matchMedia.removeEventListener('change', listener); + }, [query]); + return match; +} diff --git a/src/theme/Footer/Logo/index.tsx b/src/theme/Footer/Logo/index.tsx new file mode 100644 index 0000000..693bc30 --- /dev/null +++ b/src/theme/Footer/Logo/index.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import clsx from 'clsx'; +import Link from '@docusaurus/Link'; +import { useBaseUrlUtils } from '@docusaurus/useBaseUrl'; +import ThemedImage from '@theme/ThemedImage'; +import type { Props } from '@theme/Footer/Logo'; + +import styles from './styles.module.css'; +import useMediaQuery from '@site/src/hooks/useMediaQuery'; + +function LogoImage({ logo }: Props) { + const { withBaseUrl } = useBaseUrlUtils(); + const sources = { + light: withBaseUrl(logo.src), + dark: withBaseUrl(logo.srcDark ?? logo.src), + }; + return ( + + ); +} + +export default function FooterLogo({ logo }: Props): JSX.Element { + const isTabletUp = useMediaQuery('(min-width: 767px)'); + console.log(logo); + return logo.href ? ( + + + + ) : ( + + ); +} diff --git a/src/theme/Footer/Logo/styles.module.css b/src/theme/Footer/Logo/styles.module.css new file mode 100644 index 0000000..faf0e60 --- /dev/null +++ b/src/theme/Footer/Logo/styles.module.css @@ -0,0 +1,9 @@ +.footerLogoLink { + opacity: 0.5; + transition: opacity var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.footerLogoLink:hover { + opacity: 1; +} diff --git a/static/img/logo-only-symbol.svg b/static/img/logo-only-symbol.svg new file mode 100644 index 0000000..80b6e9d --- /dev/null +++ b/static/img/logo-only-symbol.svg @@ -0,0 +1,4 @@ + + + + From 0a57b625fbfa34cda830b4f333a2878bd71ced21 Mon Sep 17 00:00:00 2001 From: Filip Stoyanov Date: Wed, 23 Oct 2024 09:58:13 +0100 Subject: [PATCH 2/2] filip(fix): adjust footer items order and svg showing --- docusaurus.config.ts | 9 ++++----- src/css/custom.css | 34 +++++++++++++++++++++++++++++++--- 2 files changed, 35 insertions(+), 8 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 2f1658e..c80f2a4 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -107,19 +107,18 @@ const config: Config = { label: 'Share feedback', href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=feedback&projects=&template=feedback.md&title= ', }, + { + label: 'Got a story?', + href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=blog&projects=&template=blog.md&title= ', + }, { label: 'Cookie Policy', href: 'pathname:///iog-cookie-policy.pdf', }, - { label: 'Privacy Policy', href: 'pathname:///iog-privacy-policy.pdf', }, - { - label: 'Got a story?', - href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=blog&projects=&template=blog.md&title= ', - }, { label: 'Terms and Conditions', href: 'pathname:///iog-terms-and-conditions.pdf', diff --git a/src/css/custom.css b/src/css/custom.css index 993973d..db93af8 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -153,10 +153,38 @@ div:has(> .dsla-search-wrapper) { .footer__links { display: grid; grid-template-columns: repeat(2, 160px); + grid-template-rows: auto; row-gap: 12px; column-gap: 24px; } +@media (min-width: 769px) { + .footer__link-item:nth-of-type(1) { + grid-column: 1; + grid-row: 1; + } + .footer__link-item:nth-of-type(2) { + grid-column: 1; + grid-row: 2; + } + .footer__link-item:nth-of-type(3) { + grid-column: 1; + grid-row: 3; + } + .footer__link-item:nth-of-type(4) { + grid-column: 2; + grid-row: 1; + } + .footer__link-item:nth-of-type(5) { + grid-column: 2; + grid-row: 2; + } + .footer__link-item:nth-of-type(6) { + grid-column: 2; + grid-row: 3; + } +} + @media (max-width: 768px) { .footer__links { grid-template-columns: repeat(1, 160px); @@ -175,10 +203,10 @@ div:has(> .dsla-search-wrapper) { color: var(--color-white-1) !important; text-align: left; width: 100%; +} - svg { - display: none; - } +.footer__link-item svg { + display: none !important; } .footer__link-separator {