From 89815135cf492868bfa9b1e588f89e491abfedc6 Mon Sep 17 00:00:00 2001 From: Matthias Meschede Date: Mon, 29 Jun 2026 17:50:29 +0200 Subject: [PATCH] Fix sponsor page copy-paste and drop nested GetAQuote modal - Guard card/overlay click handlers against text selections so drag-select no longer triggers navigation (copy-paste now works end-to-end). - Drop the nested GetAQuote modal: convert it to a standalone page reached via a real , fixing the broken href and stacked-overlay UX. - Preserve the ?category filter across modal open/close. - Fix ProgressBar fill overlapping the rounded track ends (overflow hidden). - Fix modal scrollbar overlapping the rounded corners (overflow hidden on dialog content, drop redundant inner border-radius). --- src/components/about/styles.module.css | 1 + .../fundable/FundableProjectCard.tsx | 4 +++ src/components/fundable/GetAQuotePage.tsx | 35 +++++++------------ src/components/fundable/LargeProjectCard.tsx | 14 +------- .../fundable/LargeProjectCardPage.tsx | 30 ++++++++-------- src/components/fundable/LinkToGetAQuote.tsx | 2 +- src/components/fundable/ProgressBar.tsx | 3 +- src/components/fundable/styles.module.css | 25 ++++++------- 8 files changed, 45 insertions(+), 69 deletions(-) diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css index 4d8c4452..3decbd91 100644 --- a/src/components/about/styles.module.css +++ b/src/components/about/styles.module.css @@ -18,6 +18,7 @@ box-shadow: var(--ifm-shadow-dialog); border-radius: 20px; z-index: 4000; + overflow: hidden; } .small_portrait_card { diff --git a/src/components/fundable/FundableProjectCard.tsx b/src/components/fundable/FundableProjectCard.tsx index bdf3ffee..7ecab44c 100644 --- a/src/components/fundable/FundableProjectCard.tsx +++ b/src/components/fundable/FundableProjectCard.tsx @@ -7,8 +7,12 @@ export default function FundableProjectCard({ project }) { const history = useHistory(); function open() { + if (window.getSelection()?.toString()) return; + const category = new URLSearchParams(window.location.search).get("category"); + const search = category ? `?category=${encodeURIComponent(category)}` : ""; history.push({ pathname: `/sponsor/${project.pageName}`, + search, state: { fromFundable: true, scrollY: window.scrollY }, }); } diff --git a/src/components/fundable/GetAQuotePage.tsx b/src/components/fundable/GetAQuotePage.tsx index 6e5a0334..45c35a72 100644 --- a/src/components/fundable/GetAQuotePage.tsx +++ b/src/components/fundable/GetAQuotePage.tsx @@ -2,11 +2,10 @@ import styles from "./styles.module.css"; import GetAQuoteForm from "./GetAQuoteForm" import { LargeProjectCardContent } from "./LargeProjectCard"; -import { useHistory, useLocation } from "@docusaurus/router"; +import { useHistory } from "@docusaurus/router"; import Layout from "@theme/Layout"; import { Route } from 'react-router-dom'; import { getCategoryFromProjectPageName } from "."; -import { FundableContent as FundableProjects } from "@site/src/pages/sponsor"; function GetAQuoteComponent({ project }) { return ( @@ -28,16 +27,13 @@ function GetAQuoteComponent({ project }) { ) } export default function GetAQuotePage() { - const location = useLocation(); const history = useHistory(); const handleClose = () => { - history.push('/sponsor'); - + history.goBack(); } return ( - { @@ -47,22 +43,17 @@ export default function GetAQuotePage() { if (!project) return null; return ( -
-
e.stopPropagation()} - > -
+
+
); }} diff --git a/src/components/fundable/LargeProjectCard.tsx b/src/components/fundable/LargeProjectCard.tsx index 22e0ef63..a2545196 100644 --- a/src/components/fundable/LargeProjectCard.tsx +++ b/src/components/fundable/LargeProjectCard.tsx @@ -1,22 +1,10 @@ import styles from "./styles.module.css"; import React from "react"; import LinkToGetAQuote from "./LinkToGetAQuote"; -import { useHistory, useLocation } from "@docusaurus/router"; export function LargeProjectCardContent({ project }) { - const history = useHistory(); - const location = useLocation(); - - function openDialog() { - const pageName = project.pageName; - - history.push({ - pathname: `/sponsor/${pageName}/GetAQuote`, - state: { from: location.pathname, scrollY: window.scrollY }, - }); - } return ( -
+
{project.title}
diff --git a/src/components/fundable/LargeProjectCardPage.tsx b/src/components/fundable/LargeProjectCardPage.tsx index f8842904..62caa3e0 100644 --- a/src/components/fundable/LargeProjectCardPage.tsx +++ b/src/components/fundable/LargeProjectCardPage.tsx @@ -8,6 +8,15 @@ import { FundableContent } from "@site/src/pages/sponsor"; import styles from "@site/src/components/about/styles.module.css"; import LargeProjectCard from './LargeProjectCard'; +function backToOverview(history, scrollY) { + const category = new URLSearchParams(window.location.search).get("category"); + const search = category ? `?category=${encodeURIComponent(category)}` : ""; + history.replace({ pathname: '/sponsor', search }); + if (scrollY !== undefined) { + setTimeout(() => window.scrollTo({ top: scrollY, behavior: 'auto' }), 0); + } +} + export default function LargeProjectCardPage() { const location = useLocation(); const history = useHistory(); @@ -18,26 +27,15 @@ export default function LargeProjectCardPage() { } }, []); - const handleOverlayClick = () => { - const scrollY = location.state?.scrollY; - setTimeout(() => { - if (scrollY !== undefined) { - window.scrollTo({ top: scrollY, behavior: 'auto' }); - } - }, 0); - history.replace('/sponsor'); + const handleOverlayClick = (e) => { + if (window.getSelection()?.toString()) return; + if (e.target !== e.currentTarget) return; + backToOverview(history, location.state?.scrollY); }; const handleClose = () => { - const scrollY = location.state?.scrollY; if (location.state?.fromFundable) { - history.replace('/sponsor'); - - setTimeout(() => { - if (scrollY !== undefined) { - window.scrollTo({ top: scrollY, behavior: 'auto' }); - } - }, 0); + backToOverview(history, location.state?.scrollY); } else { history.goBack(); } diff --git a/src/components/fundable/LinkToGetAQuote.tsx b/src/components/fundable/LinkToGetAQuote.tsx index cbc41266..9b03cd0c 100644 --- a/src/components/fundable/LinkToGetAQuote.tsx +++ b/src/components/fundable/LinkToGetAQuote.tsx @@ -6,7 +6,7 @@ export default function LinkToGetAQuote({ label, pageName }) {
{label} diff --git a/src/components/fundable/ProgressBar.tsx b/src/components/fundable/ProgressBar.tsx index 7e961b32..262c1dcf 100644 --- a/src/components/fundable/ProgressBar.tsx +++ b/src/components/fundable/ProgressBar.tsx @@ -9,14 +9,13 @@ export default function ProgressBar({ value = 0, color = '#4caf50' }) { border: 'solid 0.5px', height: '21px', width: '190px', + overflow: 'hidden', }}>
diff --git a/src/components/fundable/styles.module.css b/src/components/fundable/styles.module.css index c0f16fe7..55754ee5 100644 --- a/src/components/fundable/styles.module.css +++ b/src/components/fundable/styles.module.css @@ -212,6 +212,13 @@ justify-content: center; } +.get_a_quote_page { + position: relative; + max-width: 1200px; + margin: 0 auto; + padding: var(--ifm-spacing-3xl) var(--ifm-spacing-xl); +} + .form_label { font-size: 12px; color: var(--ifm-text-color); @@ -378,7 +385,6 @@ .large_project_card { width: 90vw; padding: var(--ifm-spacing-xl); - border-radius: 8px; padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl); overflow-y: auto; max-height: 95vh; @@ -412,10 +418,7 @@ .get_a_quote_dialog { - width: 90vw; - padding: 40px; - overflow-y: auto; - max-height: 95vh; + padding: var(--ifm-spacing-md); } .get_a_quote_text_col_desktop { @@ -452,7 +455,6 @@ .large_project_card { width: 80vw; padding: 40px; - border-radius: 8px; padding: var(--ifm-spacing-xl) var(--ifm-spacing-xl); overflow-y: auto; max-height: 95vh; @@ -481,10 +483,7 @@ } .get_a_quote_dialog { - width: 80vw; - padding: 40px; - overflow-y: auto; - max-height: 95vh; + padding: var(--ifm-spacing-lg); } .get_a_quote_text_col_desktop { @@ -522,7 +521,6 @@ .large_project_card { width: 800px; padding: 40px; - border-radius: 8px; overflow-y: auto; max-height: 95vh; } @@ -555,10 +553,7 @@ } .get_a_quote_dialog { - width: 90vw; - padding: 40px; - overflow-y: auto; - max-height: 95vh; + padding: var(--ifm-spacing-xl); } .get_a_quote_form_col_mobile {