From 38b3f98bbdf226c289fa09f2630fb01b3899b1b9 Mon Sep 17 00:00:00 2001 From: Jack Casstles-Jones Date: Mon, 16 Dec 2024 11:52:10 +0000 Subject: [PATCH 01/10] feat: wip placeholder --- src/app/layout.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index cedeb0d0..60b574c9 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -60,8 +60,13 @@ export default function RootLayout({ children }: { children: ReactNode }) { +
+

+ fuck off +

+
-
{children}
+
{children}
 From 5ffe8e3349a5edb4b7a907ddbb34dbc86d1a9f4e Mon Sep 17 00:00:00 2001 From: Jack Casstles-Jones Date: Mon, 16 Dec 2024 13:29:26 +0000 Subject: [PATCH 02/10] feat: disable scrolling when placeholder shows --- src/app/DesktopPlaceholder.tsx | 37 ++++++++++++++++++++++++++++++++++ src/app/layout.tsx | 7 ++----- src/styles/globals.css | 5 +++++ 3 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 src/app/DesktopPlaceholder.tsx diff --git a/src/app/DesktopPlaceholder.tsx b/src/app/DesktopPlaceholder.tsx new file mode 100644 index 00000000..c6baf1ea --- /dev/null +++ b/src/app/DesktopPlaceholder.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { useEffect } from "react"; + +export default function DesktopPlaceholder() { + useEffect(() => { + const mediaQuery = window.matchMedia("(min-width: 1024px)"); + + // Function to check if the media query matches + const checkDesktop = (e: MediaQueryListEvent) => { + if (e.matches) { + document.body.classList.add("device-desktop-body"); + } else { + document.body.classList.remove("device-desktop-body"); + } + }; + + // Run on initial load + checkDesktop(mediaQuery); + + // Add event listener for when the screen size changes + mediaQuery.addEventListener("change", checkDesktop); + + // Cleanup the event listener on component unmount + return () => { + mediaQuery.removeEventListener("change", checkDesktop); + }; + }, []); + + return ( +
+

+ fuck off +

+
+ ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 60b574c9..e1e9f076 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import type { ReactNode } from "react"; import Navbar from "@/ui/layout/Navbar/Navbar"; import { DatabaseProvider } from "@/context/DatabaseContext"; import { Roboto } from "next/font/google"; +import DesktopPlaceholder from "./DesktopPlaceholder"; const APP_NAME = "Things We Do"; const APP_DEFAULT_TITLE = "Things We Do"; @@ -60,11 +61,7 @@ export default function RootLayout({ children }: { children: ReactNode }) { -
-

- fuck off -

-
+
{children}
 diff --git a/src/styles/globals.css b/src/styles/globals.css index a2700df6..faa53ec4 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -10,6 +10,11 @@ header { @apply bg-inherit; } +/* Prevent scrolling when the purple div is visible */ +.device-desktop-body { + overflow: hidden; +} + p { @apply font-light; } From 4d02455e5fe20e32146444b6f9c45f899c9ecd86 Mon Sep 17 00:00:00 2001 From: Jack Casstles-Jones Date: Mon, 16 Dec 2024 13:31:10 +0000 Subject: [PATCH 03/10] chore: fix type errors --- src/app/DesktopPlaceholder.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/DesktopPlaceholder.tsx b/src/app/DesktopPlaceholder.tsx index c6baf1ea..b12cb86d 100644 --- a/src/app/DesktopPlaceholder.tsx +++ b/src/app/DesktopPlaceholder.tsx @@ -7,7 +7,8 @@ export default function DesktopPlaceholder() { const mediaQuery = window.matchMedia("(min-width: 1024px)"); // Function to check if the media query matches - const checkDesktop = (e: MediaQueryListEvent) => { + const checkDesktop = (e?: MediaQueryListEvent | MediaQueryList) => { + if (!e) return; if (e.matches) { document.body.classList.add("device-desktop-body"); } else { From 9a27968dd83f6832b1db958da2ab7bc88b210921 Mon Sep 17 00:00:00 2001 From: Jack Casstles-Jones Date: Mon, 16 Dec 2024 13:36:50 +0000 Subject: [PATCH 04/10] chore: add text for placeholder --- src/app/DesktopPlaceholder.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/DesktopPlaceholder.tsx b/src/app/DesktopPlaceholder.tsx index b12cb86d..03a22a13 100644 --- a/src/app/DesktopPlaceholder.tsx +++ b/src/app/DesktopPlaceholder.tsx @@ -29,10 +29,14 @@ export default function DesktopPlaceholder() { }, []); return ( -
-

- fuck off -

+
+
+

Thanks for visiting Things We Do

+

+ We are currently a mobile-only app. Please visit us on a mobile device + or tablet. +

+
); } From 681c69f8d4b38ee17d473cb6d98e81c1af5053e5 Mon Sep 17 00:00:00 2001 From: Jack Casstles-Jones Date: Mon, 16 Dec 2024 13:43:57 +0000 Subject: [PATCH 05/10] chore: change placeholder text --- src/app/DesktopPlaceholder.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/DesktopPlaceholder.tsx b/src/app/DesktopPlaceholder.tsx index 03a22a13..8b156227 100644 --- a/src/app/DesktopPlaceholder.tsx +++ b/src/app/DesktopPlaceholder.tsx @@ -32,9 +32,9 @@ export default function DesktopPlaceholder() {

Thanks for visiting Things We Do

-

- We are currently a mobile-only app. Please visit us on a mobile device - or tablet. +

+ At the moment, we're optimised for mobile and tablet devices. For + the best experience, please visit us on your mobile or tablet.

From b51ffdd4c7119b9b9eb5315c9c730180bad80510 Mon Sep 17 00:00:00 2001 From: Jack Casstles-Jones Date: Mon, 16 Dec 2024 13:51:25 +0000 Subject: [PATCH 06/10] style: add text-nowrap to buttons on homepage --- src/app/home/components/HomeContent.tsx | 6 ++++-- src/ui/shared/Button.tsx | 4 ++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/app/home/components/HomeContent.tsx b/src/app/home/components/HomeContent.tsx index 3085750e..64755b56 100644 --- a/src/app/home/components/HomeContent.tsx +++ b/src/app/home/components/HomeContent.tsx @@ -82,7 +82,7 @@ export default function HomeContent() {
diff --git a/src/ui/shared/Button.tsx b/src/ui/shared/Button.tsx index eec32f5b..3d72513b 100644 --- a/src/ui/shared/Button.tsx +++ b/src/ui/shared/Button.tsx @@ -22,10 +22,10 @@ const Button: React.FC = ({ } return (