From fc5507ac7bc427624d2808a5dc4a16840ee10f30 Mon Sep 17 00:00:00 2001 From: Stephen Swanson Date: Fri, 19 Jul 2024 17:00:28 +0300 Subject: [PATCH 1/2] Responsiveness updates: - fixes some minor UI bugs - adds general responsiveness - further improvement to be made at a later date --- hooks/useCMS.test.ts | 36 ---------------- hooks/useCMS.ts | 52 ---------------------- pages/index.tsx | 58 ++++++++++++++++++++++++- styles/Home.module.css | 98 +++++++++++++++++++++++++++++++++++++++--- styles/globals.css | 18 ++++++++ 5 files changed, 167 insertions(+), 95 deletions(-) delete mode 100644 hooks/useCMS.test.ts delete mode 100644 hooks/useCMS.ts diff --git a/hooks/useCMS.test.ts b/hooks/useCMS.test.ts deleted file mode 100644 index 59abf31..0000000 --- a/hooks/useCMS.test.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { expect, test, vi } from "vitest"; -import useCMS from "./useCMS"; -import { renderHook } from "@testing-library/react"; - -test("calls fetch", () => { - const fetchMock = vi.spyOn(global, "fetch"); - - renderHook(() => useCMS({ collection: "text" })); - - expect(fetchMock).toHaveBeenCalled(); -}); - -test("does not call fetch on rerender", () => { - const fetchMock = vi.spyOn(global, "fetch"); - - const { rerender } = renderHook(() => useCMS({ collection: "text" })); - rerender(); - - expect(fetchMock).toHaveBeenCalledTimes(1); -}); - -test.skip("calls fetch once for the same collection", () => { - const fetchMock = vi.spyOn(global, "fetch"); - - renderHook(() => useCMS({ collection: "text" })); - renderHook(() => useCMS({ collection: "text" })); - expect(fetchMock).toHaveBeenCalledTimes(1); -}); - -test("calls fetch once per collection", () => { - const fetchMock = vi.spyOn(global, "fetch"); - - renderHook(() => useCMS({ collection: "text" })); - renderHook(() => useCMS({ collection: "image" })); - expect(fetchMock).toHaveBeenCalledTimes(2); -}); diff --git a/hooks/useCMS.ts b/hooks/useCMS.ts deleted file mode 100644 index 9422d70..0000000 --- a/hooks/useCMS.ts +++ /dev/null @@ -1,52 +0,0 @@ -// This is not currently in a working state - -import { useState, useEffect } from "react"; - -interface DirectusResponse { - data: T; - meta: any; -} - -interface UseCMSProps { - collection: string; - query?: string; - initialData?: T; -} - -const useCMS = ({ collection, query = "", initialData }: UseCMSProps) => { - const [data, setData] = useState(initialData || null); - const [loading, setLoading] = useState(false); - const [error, setError] = useState(null); - - useEffect(() => { - const fetchData = async () => { - setLoading(true); - setError(null); - - try { - const response = await fetch( - `${process.env.NEXT_PUBLIC_DIRECTUS_URL}/items/text`, - ); - if (!response.ok) { - throw new Error(`Error: ${response.status} ${response.statusText}`); - } - const result: DirectusResponse = await response.json(); - setData(result.data); - } catch (err) { - if (err instanceof Error) { - setError(err.message); - } else { - setError("An unknown error occurred"); - } - } finally { - setLoading(false); - } - }; - - fetchData(); - }, [collection, query]); - - return { data, loading, error }; -}; - -export default useCMS; diff --git a/pages/index.tsx b/pages/index.tsx index 99b4850..8a13015 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -102,7 +102,11 @@ export default function Home() { {/* Living Info */}
- A photo of SatO's mascot + A photo of SatO's mascot

@@ -177,6 +181,50 @@ export default function Home() { + + + + + Title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel + minima nemo ratione molestiae in ab laborum perferendis + beatae impedit dolorem iusto sunt. + + + + + + + + + + + + Title + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Itaque, numquam magnam, eum nihil adipisci tenetur quasi vel + minima nemo ratione molestiae in ab laborum perferendis + beatae impedit dolorem iusto sunt. + + + + + + +

{/* Calendar */} @@ -208,6 +256,8 @@ export default function Home() { Siiry lomakkeelle arrow forward +
+

Häirintälomake

Lorem ipsum dolor, sit amet consectetur adipisicing elit. @@ -220,7 +270,11 @@ export default function Home() { arrow forward - various messaging icons + various messaging icons diff --git a/styles/Home.module.css b/styles/Home.module.css index e08a1fe..3f4aa03 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -19,7 +19,7 @@ .h2 { font-size: 3rem; font-weight: 600; - width: 20%; + width: 20rem; text-align: center; } @@ -35,7 +35,11 @@ justify-content: center; align-items: center; gap: 2rem; - margin: 5rem 0 5rem 0; + width: 70%; + max-width: 100%; + margin: 5rem 0; + flex-wrap: nowrap; + overflow-x: auto; } .colorCard1, @@ -91,6 +95,11 @@ font-size: 2rem; } +.aino { + max-width: 40%; + height: auto; +} + .infoBtn { display: flex; flex-direction: row; @@ -114,13 +123,18 @@ .cardContainer { display: flex; flex-direction: row; - justify-content: flex-start; + justify-content: center; align-items: center; - gap: 1rem; + max-width: 100%; + gap: 1.5rem; + flex-wrap: nowrap; + overflow-x: auto; + padding: 0.5rem; } .newsCard { - width: 40%; + min-width: 48%; + width: 50%; } .newCardContent { @@ -197,3 +211,77 @@ height: 20rem; background-color: var(--blue300); } + +@media (max-width: 1050px) { + .contactAside { + width: 35%; + height: auto; + } +} + +@media (max-width: 821px) { + .colorCard1, + .colorCard2, + .colorCard3 { + width: 15rem; + max-height: 20rem; + text-wrap: nowrap; + } + + .livingArticle { + width: 70%; + } + + .aino { + display: none; + } + + .newsCard { + min-width: 55%; + } + + .heroBtn { + font-size: 0.7rem; + } + + .infoBtn { + font-size: 0.7rem; + } +} + +@media (max-width: 431px) { + .h2 { + font-size: 2.5rem; + } + .cards { + justify-content: flex-start; + align-items: center; + padding: 0.5rem; + } + .colorCard1, + .colorCard2, + .colorCard3 { + min-width: 15rem; + max-height: 20rem; + text-wrap: nowrap; + } + + .cardContainer { + justify-content: flex-start; + align-items: center; + padding: 0.5rem; + } + + .newsCard { + min-width: 15rem; + } + + .contactInfo { + width: 100%; + gap: 0.25rem; + } + + .contactAside { + display: none; + } +} diff --git a/styles/globals.css b/styles/globals.css index 8583fb4..8407a93 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -102,3 +102,21 @@ body { color: var(--black); font-weight: 700; } + +@media (max-width: 1050px) { + .embla { + --slide-size: 40%; + } +} + +@media (max-width: 821px) { + .embla { + --slide-size: 50%; + } +} + +@media (max-width: 431px) { + .embla { + --slide-size: 65%; + } +} From 376bb6bdaed0a2fa195bf850db74036a3362b911 Mon Sep 17 00:00:00 2001 From: Stephen Swanson Date: Mon, 22 Jul 2024 20:45:49 +0300 Subject: [PATCH 2/2] just adding useCMS and the test for it back in for now so the linter will stop screaming --- hooks/useCMS.test.ts | 36 ++++++++++++++++++++++++++++++ hooks/useCMS.ts | 52 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 88 insertions(+) create mode 100644 hooks/useCMS.test.ts create mode 100644 hooks/useCMS.ts diff --git a/hooks/useCMS.test.ts b/hooks/useCMS.test.ts new file mode 100644 index 0000000..59abf31 --- /dev/null +++ b/hooks/useCMS.test.ts @@ -0,0 +1,36 @@ +import { expect, test, vi } from "vitest"; +import useCMS from "./useCMS"; +import { renderHook } from "@testing-library/react"; + +test("calls fetch", () => { + const fetchMock = vi.spyOn(global, "fetch"); + + renderHook(() => useCMS({ collection: "text" })); + + expect(fetchMock).toHaveBeenCalled(); +}); + +test("does not call fetch on rerender", () => { + const fetchMock = vi.spyOn(global, "fetch"); + + const { rerender } = renderHook(() => useCMS({ collection: "text" })); + rerender(); + + expect(fetchMock).toHaveBeenCalledTimes(1); +}); + +test.skip("calls fetch once for the same collection", () => { + const fetchMock = vi.spyOn(global, "fetch"); + + renderHook(() => useCMS({ collection: "text" })); + renderHook(() => useCMS({ collection: "text" })); + expect(fetchMock).toHaveBeenCalledTimes(1); +}); + +test("calls fetch once per collection", () => { + const fetchMock = vi.spyOn(global, "fetch"); + + renderHook(() => useCMS({ collection: "text" })); + renderHook(() => useCMS({ collection: "image" })); + expect(fetchMock).toHaveBeenCalledTimes(2); +}); diff --git a/hooks/useCMS.ts b/hooks/useCMS.ts new file mode 100644 index 0000000..9422d70 --- /dev/null +++ b/hooks/useCMS.ts @@ -0,0 +1,52 @@ +// This is not currently in a working state + +import { useState, useEffect } from "react"; + +interface DirectusResponse { + data: T; + meta: any; +} + +interface UseCMSProps { + collection: string; + query?: string; + initialData?: T; +} + +const useCMS = ({ collection, query = "", initialData }: UseCMSProps) => { + const [data, setData] = useState(initialData || null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + setLoading(true); + setError(null); + + try { + const response = await fetch( + `${process.env.NEXT_PUBLIC_DIRECTUS_URL}/items/text`, + ); + if (!response.ok) { + throw new Error(`Error: ${response.status} ${response.statusText}`); + } + const result: DirectusResponse = await response.json(); + setData(result.data); + } catch (err) { + if (err instanceof Error) { + setError(err.message); + } else { + setError("An unknown error occurred"); + } + } finally { + setLoading(false); + } + }; + + fetchData(); + }, [collection, query]); + + return { data, loading, error }; +}; + +export default useCMS;