From 6cd6498f5b779e2a540d5556b26e1468a1c8b9d8 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Tue, 10 Dec 2024 14:42:54 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Simplify=20logo=20sala?= =?UTF-8?q?d=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sections/logoSalad/LogoSalad.tsx | 37 +++------------ .../sections/logoSalad/logoSalad.module.css | 20 -------- studio/schemas/objects/sections/logoSalad.ts | 47 +++---------------- 3 files changed, 13 insertions(+), 91 deletions(-) diff --git a/src/components/sections/logoSalad/LogoSalad.tsx b/src/components/sections/logoSalad/LogoSalad.tsx index f66df6b53..338168a27 100644 --- a/src/components/sections/logoSalad/LogoSalad.tsx +++ b/src/components/sections/logoSalad/LogoSalad.tsx @@ -1,7 +1,4 @@ -import { PortableText, PortableTextReactComponents } from "@portabletext/react"; - import { SanityImage } from "src/components/image/SanityImage"; -import Text from "src/components/text/Text"; import { LogoSaladSection } from "studio/lib/interfaces/pages"; import styles from "./logoSalad.module.css"; @@ -10,36 +7,16 @@ interface LogoSaladProps { logoSalad: LogoSaladSection; } -const myPortableTextComponents: Partial = { - block: ({ children }) => {children}, -}; - export const LogoSalad = ({ logoSalad }: LogoSaladProps) => { return (
-
- {logoSalad.richText && ( - - )} -
- {logoSalad.supporting} - {logoSalad.logos && ( -
    - {logoSalad.logos.map( - (logo) => - logo && ( -
  • - -
    • - ), - )} -
- )} -
-
+
    + {logoSalad.logos.map((logo) => ( +
  • + +
    • + ))} +
); }; diff --git a/src/components/sections/logoSalad/logoSalad.module.css b/src/components/sections/logoSalad/logoSalad.module.css index 92a3099cc..0bdff0874 100644 --- a/src/components/sections/logoSalad/logoSalad.module.css +++ b/src/components/sections/logoSalad/logoSalad.module.css @@ -14,26 +14,6 @@ } } -.logoSalad { - composes: shared; - max-width: 75rem; - gap: 1.5rem; - - @media (min-width: 1024px) { - gap: 7.5rem; - width: 100%; - } -} - -.logoList { - composes: shared; - gap: 1.5rem; - - @media (min-width: 1024px) { - text-align: center; - } -} - .logoWrapper { padding: 0; margin: 0; diff --git a/studio/schemas/objects/sections/logoSalad.ts b/studio/schemas/objects/sections/logoSalad.ts index 388c5c280..834c7c92c 100644 --- a/studio/schemas/objects/sections/logoSalad.ts +++ b/studio/schemas/objects/sections/logoSalad.ts @@ -1,8 +1,6 @@ -import { StringInputProps, defineField } from "sanity"; +import { defineField } from "sanity"; -import { StringInputWithCharacterCount } from "studio/components/stringInputWithCharacterCount/StringInputWithCharacterCount"; import image from "studio/schemas/fields/media"; -import { richText } from "studio/schemas/fields/text"; export const logoSaladID = "logoSalad"; @@ -11,53 +9,20 @@ export const logoSalad = defineField({ title: "Logo Salad", type: "object", fields: [ - { - ...richText, - title: "Introduction", - description: - "Optional content displayed at the top of the section in a larger body text style. Use it to introduce the section and provide key information.", - }, - { - name: "supporting", - title: "Logo Description", - type: "string", - description: - "Required text displayed in a smaller body text style. Use it to provide additional context or details about the logos.", - validation: (rule) => [ - rule.required().error("Logo description is required."), - rule.max(100), - ], - components: { - input: (props: StringInputProps) => - StringInputWithCharacterCount({ ...props, maxCount: 100 }), - }, - }, { name: "logos", - title: "List of Logos", - description: - "Add a list of logos to display. You must include between 6 and 12 logos.", + title: "Logos", + description: "Add the logos you want to display.", type: "array", of: [image], validation: (rule) => - rule - .min(6) - .error("At least 6 logos are required.") - .max(12) - .error("You can add up to 12 logos.") - .required() - .error("The list of logos is required."), + rule.required().error("A list of logos is required."), }, ], preview: { - select: { - title: "supporting", - }, - prepare(selection) { - const { title } = selection; + prepare() { return { - title: title, - subtitle: "Logo Salad", + title: "Logo Salad", }; }, }, From 7b6dbc40d8d8af1414a6748cadc290efdc9de176 Mon Sep 17 00:00:00 2001 From: Petter Hohle Date: Wed, 11 Dec 2024 09:12:36 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=92=84=20Set=20max=20width=20and=20he?= =?UTF-8?q?ight?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sections/logoSalad/logoSalad.module.css | 42 ++----------------- 1 file changed, 4 insertions(+), 38 deletions(-) diff --git a/src/components/sections/logoSalad/logoSalad.module.css b/src/components/sections/logoSalad/logoSalad.module.css index 0bdff0874..d9041216b 100644 --- a/src/components/sections/logoSalad/logoSalad.module.css +++ b/src/components/sections/logoSalad/logoSalad.module.css @@ -18,54 +18,20 @@ padding: 0; margin: 0; list-style: none; - max-width: 40rem; + max-width: var(--max-content-width-large); display: flex; justify-content: center; align-items: flex-start; align-content: flex-start; - align-self: stretch; flex-wrap: wrap; - gap: 0.5rem; - margin-left: auto; - margin-right: auto; + gap: 2.25rem 5.625rem; & > li { - width: 4.5rem; - height: 2rem; - background-color: white; - border-radius: 0.45rem; + max-width: 15rem; + max-height: 4.5rem; overflow: hidden; padding: 0.5rem; object-fit: contain; } - - @media (min-width: 640px) { - gap: 0.75rem; - - & > li { - width: 5rem; - height: 2.5rem; - background-color: white; - border-radius: 0.45rem; - overflow: hidden; - padding: 0.5rem; - object-fit: contain; - } - } - - @media (min-width: 1024px) { - gap: 1rem; - max-width: 53rem; - - & > li { - width: 7rem; - height: 3.5rem; - background-color: white; - border-radius: 0.45rem; - overflow: hidden; - padding: 0.5rem; - object-fit: contain; - } - } }