From 7932b4c9a2dd48a655d49e96622b83b75769a437 Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 21 Nov 2024 11:29:23 +0100 Subject: [PATCH 01/20] skeleton for customercase entry --- .../customerCasesEntry/CustomerCasesEntry.tsx | 27 +++++++++++++++++++ src/utils/renderSection.tsx | 25 +++++++++++++++++ studio/lib/interfaces/pages.ts | 9 ++++++- studio/schemas/documents/pageBuilder.ts | 2 ++ .../objects/sections/customerCasesEntry.ts | 16 +++++++++++ 5 files changed, 78 insertions(+), 1 deletion(-) create mode 100644 src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx create mode 100644 studio/schemas/objects/sections/customerCasesEntry.ts diff --git a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx new file mode 100644 index 000000000..969bdfaf3 --- /dev/null +++ b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx @@ -0,0 +1,27 @@ +import Text from "src/components/text/Text"; +import { Locale } from "src/i18n/routing"; +import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; +import { CUSTOMER_CASES_QUERY } from "studioShared/lib/queries/customerCases"; +import { loadSharedQuery } from "studioShared/lib/store"; + +interface CustomerCasesProps { + language: Locale; +} + +async function CustomerCasesEntry({ language }: CustomerCasesProps) { + const [sharedCustomerCases] = await Promise.all([ + loadSharedQuery( + CUSTOMER_CASES_QUERY, + { language: language }, + {}, + ), + ]); + + return ( +
+ {sharedCustomerCases.data[1].basicTitle} +
+ ); +} + +export default CustomerCasesEntry; diff --git a/src/utils/renderSection.tsx b/src/utils/renderSection.tsx index 57a98b2d2..af018a2c5 100644 --- a/src/utils/renderSection.tsx +++ b/src/utils/renderSection.tsx @@ -7,6 +7,7 @@ import Callout from "src/components/sections/callout/Callout"; import CalloutPreview from "src/components/sections/callout/CalloutPreview"; import CallToAction from "src/components/sections/callToAction/CallToAction"; import CallToActionPreview from "src/components/sections/callToAction/CallToActionPreview"; +import CustomerCasesEntry from "src/components/sections/customerCasesEntry/CustomerCasesEntry"; import Employees from "src/components/sections/employees/Employees"; import Grid from "src/components/sections/grid/Grid"; import GridPreview from "src/components/sections/grid/GridPreview"; @@ -18,10 +19,12 @@ import { LogoSalad } from "src/components/sections/logoSalad/LogoSalad"; import LogoSaladPreview from "src/components/sections/logoSalad/LogoSaladPreview"; import { Testimonials } from "src/components/sections/testimonials/Testimonials"; import TestimonialsPreview from "src/components/sections/testimonials/TestimonialsPreview"; +import { Locale } from "src/i18n/routing"; import { ArticleSection, CallToActionSection, CalloutSection, + CustomerCasesEntrySection, GridSection, HeroSection, ImageSection, @@ -158,6 +161,20 @@ const renderGridSection = ( ); }; +const renderCustomerCasesEntrySection = ( + section: CustomerCasesEntrySection, + sectionIndex: number, + isDraftMode: boolean, + initialData: QueryResponseInitial, + language: Locale, +) => { + return isDraftMode ? ( + + ) : ( + + ); +}; + const SectionRenderer = ({ language, section, @@ -219,6 +236,14 @@ const SectionRenderer = ({ ); case "grid": return renderGridSection(section, sectionIndex, isDraftMode, initialData); + case "customerCasesEntry": + return renderCustomerCasesEntrySection( + section, + sectionIndex, + isDraftMode, + initialData, + language as Locale, + ); case "employees": return ; default: diff --git a/studio/lib/interfaces/pages.ts b/studio/lib/interfaces/pages.ts index 3121ac69f..0ae277661 100644 --- a/studio/lib/interfaces/pages.ts +++ b/studio/lib/interfaces/pages.ts @@ -87,6 +87,12 @@ export interface EmployeesSection { basicTitle: string; } +export interface CustomerCasesEntrySection { + _type: "customerCasesEntry"; + _key: string; + basicTitle: string; +} + export type Section = | HeroSection | LogoSaladSection @@ -96,7 +102,8 @@ export type Section = | TestimonialsSection | ImageSection | GridSection - | EmployeesSection; + | EmployeesSection + | CustomerCasesEntrySection; export interface PageBuilder { _createdAt: string; diff --git a/studio/schemas/documents/pageBuilder.ts b/studio/schemas/documents/pageBuilder.ts index e16cbbd83..d745ec44e 100644 --- a/studio/schemas/documents/pageBuilder.ts +++ b/studio/schemas/documents/pageBuilder.ts @@ -5,6 +5,7 @@ import { titleID } from "studio/schemas/fields/text"; import article from "studio/schemas/objects/sections/article"; import callout from "studio/schemas/objects/sections/callout"; import callToAction from "studio/schemas/objects/sections/callToAction"; +import { customerCasesEntry } from "studio/schemas/objects/sections/customerCasesEntry"; import { employees } from "studio/schemas/objects/sections/employees"; import grid from "studio/schemas/objects/sections/grid"; import hero from "studio/schemas/objects/sections/hero"; @@ -49,6 +50,7 @@ const pageBuilder = defineType({ imageSection, grid, employees, + customerCasesEntry, ], }), ], diff --git a/studio/schemas/objects/sections/customerCasesEntry.ts b/studio/schemas/objects/sections/customerCasesEntry.ts new file mode 100644 index 000000000..8334f2eb8 --- /dev/null +++ b/studio/schemas/objects/sections/customerCasesEntry.ts @@ -0,0 +1,16 @@ +import { defineField } from "sanity"; + +export const customerCasesEntry = defineField({ + name: "customerCasesEntry", + title: "Customer Cases Entry", + type: "object", + fields: [ + { + name: "basicTitle", + title: "Basic Title", + type: "string", + description: + "This will be the title of the customer cases entry section. Make it engaging to capture the attention of your audience.", + }, + ], +}); From dc45ffa4add9b7f2bcf5007f074f2252615f4498 Mon Sep 17 00:00:00 2001 From: Ane Date: Fri, 22 Nov 2024 10:57:26 +0100 Subject: [PATCH 02/20] added botton for customerCases we have --- .../customerCasesEntry/CustomerCasesEntry.tsx | 8 +++- .../customerCasesEntry/CustomerCasesList.tsx | 41 +++++++++++++++++++ .../customerCasesEntry.module.css | 5 +++ 3 files changed, 52 insertions(+), 2 deletions(-) create mode 100644 src/components/sections/customerCasesEntry/CustomerCasesList.tsx create mode 100644 src/components/sections/customerCasesEntry/customerCasesEntry.module.css diff --git a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx index 969bdfaf3..1513baaec 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx @@ -1,9 +1,10 @@ -import Text from "src/components/text/Text"; import { Locale } from "src/i18n/routing"; import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; import { CUSTOMER_CASES_QUERY } from "studioShared/lib/queries/customerCases"; import { loadSharedQuery } from "studioShared/lib/store"; +import CustomerCasesList from "./CustomerCasesList"; + interface CustomerCasesProps { language: Locale; } @@ -17,9 +18,12 @@ async function CustomerCasesEntry({ language }: CustomerCasesProps) { ), ]); + console.log(sharedCustomerCases.data); + return (
- {sharedCustomerCases.data[1].basicTitle} + + {/* {sharedCustomerCases} hei */}
); } diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx new file mode 100644 index 000000000..a3b6352fa --- /dev/null +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -0,0 +1,41 @@ +"use client"; + +import { useState } from "react"; + +import Button from "src/components/buttons/Button"; +import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; +import Text from "src/components/text/Text"; +import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; + +interface CustomerCasesProps { + customerCases: CustomerCaseBase[]; +} + +const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { + const [selectedCustomerCase, setSelectedCustomerCase] = + useState(); + + return ( +
+
+ {customerCases.map( + (customerCase: CustomerCaseBase) => + //Todo: this should be a better test + customerCase.slug && ( +
+ +
+ ), + )} +
+ {selectedCustomerCase?.basicTitle} +
+ ); +}; +export default CustomerCaseList; diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css new file mode 100644 index 000000000..34cfcdacb --- /dev/null +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -0,0 +1,5 @@ +.buttonRow { + display: flex; + flex-direction: row; + gap: 0rem; +} \ No newline at end of file From 158681aba45460d390cfb87d593d262329e49e80 Mon Sep 17 00:00:00 2001 From: Ane Date: Tue, 26 Nov 2024 10:43:44 +0100 Subject: [PATCH 03/20] Merge branch 'v3' into v3-customercase-entry --- src/components/customerCases/CustomerCases.tsx | 14 ++++++-------- .../sections/results/resultsBlock.module.css | 4 ++-- .../sections/employees/EmployeeList.tsx | 4 +++- .../sections/employees/employees.module.css | 2 -- src/styles/global.css | 7 +------ src/utils/pageData.ts | 6 ++++++ studioShared/lib/interfaces/customerCases.ts | 1 + studioShared/lib/queries/customerCases.ts | 17 +++++++++-------- studioShared/schemas/documents/customerCase.ts | 2 ++ studioShared/schemas/fields/domains.ts | 18 ++++++++++++++++++ 10 files changed, 48 insertions(+), 27 deletions(-) create mode 100644 studioShared/schemas/fields/domains.ts diff --git a/src/components/customerCases/CustomerCases.tsx b/src/components/customerCases/CustomerCases.tsx index 1ca7f3e36..e49a08e4e 100644 --- a/src/components/customerCases/CustomerCases.tsx +++ b/src/components/customerCases/CustomerCases.tsx @@ -1,10 +1,10 @@ +import { headers } from "next/headers"; import Link from "next/link"; import { SanitySharedImage } from "src/components/image/SanityImage"; -import LinkButton from "src/components/linkButton/LinkButton"; import Text from "src/components/text/Text"; -import { sharedCustomerCasesLink } from "src/components/utils/linkTypes"; import { getDraftModeInfo } from "src/utils/draftmode"; +import { domainFromHostname } from "src/utils/url"; import { CustomerCasePage } from "studio/lib/interfaces/specialPages"; import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; import { CUSTOMER_CASES_QUERY } from "studioShared/lib/queries/customerCases"; @@ -19,10 +19,12 @@ interface CustomerCasesProps { const CustomerCases = async ({ customerCasesPage }: CustomerCasesProps) => { const { perspective } = getDraftModeInfo(); + const domain = domainFromHostname(headers().get("host")); + const [sharedCustomerCases] = await Promise.all([ loadSharedQuery( CUSTOMER_CASES_QUERY, - { language: customerCasesPage.language }, + { language: customerCasesPage.language, domain }, { perspective }, ), ]); @@ -49,11 +51,7 @@ const CustomerCases = async ({ customerCasesPage }: CustomerCasesProps) => { )) ) : (
- - It looks like you haven't created any customer cases yet. - Please visit the shared studio to add some. - - + No customer cases... yet :)
)} diff --git a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css index 5ffe9f79d..f450815f1 100644 --- a/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css +++ b/src/components/customerCases/customerCase/sections/results/resultsBlock.module.css @@ -22,7 +22,7 @@ } .subtitle { - color: var(--primary-grey); + color: var(--text-tertiary); font-size: 1rem; font-weight: 400; line-height: 1.5rem; @@ -30,7 +30,7 @@ .highlightOutside { background-color: var(--primary-yellow-warning); - color: var(--secondary-text-black-darker); + color: var(--text-primary); display: inline-block; padding: 0.25rem 1.25rem; z-index: 2; diff --git a/src/components/sections/employees/EmployeeList.tsx b/src/components/sections/employees/EmployeeList.tsx index fb61d766e..89b0e40d8 100644 --- a/src/components/sections/employees/EmployeeList.tsx +++ b/src/components/sections/employees/EmployeeList.tsx @@ -172,7 +172,9 @@ export default function EmployeeList({

{t("show")}{" "} - {employees.length}{" "} + + {filteredEmployees.length} + {" "} {t("of")}{" "} {employees.length}{" "} {t("consultants")} diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css index 0b88cad87..e57f742aa 100644 --- a/src/components/sections/employees/employees.module.css +++ b/src/components/sections/employees/employees.module.css @@ -53,7 +53,6 @@ max-width: 1400px; width: 100%; text-wrap: wrap; - align-items: center; gap: 0.5rem; } @@ -61,5 +60,4 @@ display: flex; flex-wrap: wrap; gap: 1rem; - justify-content: center; } diff --git a/src/styles/global.css b/src/styles/global.css index a01df78db..af1df6e96 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -12,16 +12,13 @@ html { --primary-dark: #e61a6b; --primary-darker: #8b0f40; --primary-light: #f5a4c4; - --primary-bg: #f2f2f2; + --primary-bg: #fafafa; --primary-bg-dark: #d9d9d9; --primary-bg-blue: #0014cd; --primary-white-bright: #ffffff; --primary-white: #faf8f5; --primary-black: #2d2d2d; --primary-black-darker: #000000; - --primary-grey: #5e5e5e; - - --secondary-text-black-darker: #222424; --secondary-off-white1: #f4efe8; --secondary-off-white2: #ece1d3; @@ -31,8 +28,6 @@ html { --focus-color: #8b0f40; - --blue-dark: #0014cd; - /* TODO: upgrade color-scheme with correct colors */ --secondary-red: #f0503f; --text-primary: #222424; diff --git a/src/utils/pageData.ts b/src/utils/pageData.ts index a161b2c42..e24e8d8eb 100644 --- a/src/utils/pageData.ts +++ b/src/utils/pageData.ts @@ -37,6 +37,7 @@ import { customerCaseID } from "studioShared/schemas/documents/customerCase"; import { emailFromAliasAndHostname, fetchChewbaccaEmployee } from "./employees"; import { isNonNullQueryResponse } from "./queryResponse"; +import { domainFromHostname } from "./url"; type PageFromParams = { queryResponse: D; @@ -150,6 +151,7 @@ async function fetchCompensationsPage({ async function fetchCustomerCase({ language, + hostname, path, perspective, }: PageDataParams): Promise< @@ -166,6 +168,9 @@ async function fetchCustomerCase({ if (path.length === 0) { return null; } + + const domain = hostname === null ? null : domainFromHostname(hostname); + const customerCasesPageResult = await loadStudioQuery( CUSTOMER_CASES_PAGE_QUERY, @@ -197,6 +202,7 @@ async function fetchCustomerCase({ const customerCaseResult = await loadSharedQuery( CUSTOMER_CASE_QUERY, { + domain, slug: path[1], language, }, diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts index c7f4ed9ab..c3b46808c 100644 --- a/studioShared/lib/interfaces/customerCases.ts +++ b/studioShared/lib/interfaces/customerCases.ts @@ -46,6 +46,7 @@ export interface CustomerCaseBase { _id: string; language: string; slug: string; + domains: string[]; basicTitle: string; description: string; image: IImage; diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts index 8477776e2..3ea5efa0e 100644 --- a/studioShared/lib/queries/customerCases.ts +++ b/studioShared/lib/queries/customerCases.ts @@ -13,6 +13,7 @@ const INTERNATIONALIZED_IMAGE_FRAGMENT = groq` const CUSTOMER_CASE_BASE_FRAGMENT = groq` _id, + domains, ${LANGUAGE_FIELD_FRAGMENT}, "slug": ${translatedFieldFragment("slug")}, "basicTitle": ${translatedFieldFragment("basicTitle")}, @@ -23,7 +24,7 @@ const CUSTOMER_CASE_BASE_FRAGMENT = groq` `; export const CUSTOMER_CASES_QUERY = groq` - *[_type == "customerCase"]{ + *[_type == "customerCase" && ($domain == null || $domain in domains)]{ ${CUSTOMER_CASE_BASE_FRAGMENT} } `; @@ -34,7 +35,7 @@ export const SPLIT_SECTIONS_FRAGMENT = groq` "sectionTitle": ${translatedFieldFragment("sectionTitle")}, "text": ${translatedFieldFragment("text")}, url, - textBlockType, + textBlockType, }, _type == "imageBlock" => { "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}}, @@ -43,14 +44,14 @@ export const SPLIT_SECTIONS_FRAGMENT = groq` `; export const CUSTOMER_CASE_QUERY = groq` - *[_type == "customerCase" && ${translatedFieldFragment("slug")} == $slug][0] { + *[_type == "customerCase" && ${translatedFieldFragment("slug")} == $slug && ($domain == null || $domain in domains)][0] { ${CUSTOMER_CASE_BASE_FRAGMENT}, "projectInfo": projectInfo { - customer, + customer, "customerSectors": customerSectors[] { "customerSector": ${translatedFieldFragment("customerSectorItem")} }, - url, + url, "deliveries": { "design": deliveries.design[] { "designDelivery": ${translatedFieldFragment("designDelivery")} @@ -62,7 +63,7 @@ export const CUSTOMER_CASE_QUERY = groq` "projectManagementDelivery": ${translatedFieldFragment("projectManagementDelivery")} } }, - collaborators, + collaborators, consultants }, "sections": sections[] { @@ -72,7 +73,7 @@ export const CUSTOMER_CASE_QUERY = groq` "sections": sections[] { _key, _type, - + ${SPLIT_SECTIONS_FRAGMENT} } }, @@ -95,7 +96,7 @@ export const CUSTOMER_CASE_QUERY = groq` _key, "text": ${translatedFieldFragment("text")}, }, - }, + }, _type == "imageBlock" => { "image": image {${INTERNATIONALIZED_IMAGE_FRAGMENT}}, fullWidth diff --git a/studioShared/schemas/documents/customerCase.ts b/studioShared/schemas/documents/customerCase.ts index 987a891d9..2b37f1df4 100644 --- a/studioShared/schemas/documents/customerCase.ts +++ b/studioShared/schemas/documents/customerCase.ts @@ -9,6 +9,7 @@ import { titleSlug } from "studio/schemas/schemaTypes/slug"; import { buildDraftId, buildPublishedId } from "studio/utils/documentUtils"; import { firstTranslation } from "studio/utils/i18n"; import { customerCaseProjectInfo } from "studioShared/schemas/fields/customerCaseProjectInfo"; +import { domainsField } from "studioShared/schemas/fields/domains"; import imageBlock from "studioShared/schemas/objects/imageBlock"; import listBlock from "studioShared/schemas/objects/listBlock"; import resultsBlock from "studioShared/schemas/objects/resultsBlock"; @@ -38,6 +39,7 @@ const customerCase = defineType({ type: "internationalizedArrayString", title: "Title", }), + defineField({ ...domainsField, validation: (rule) => rule.required() }), defineField({ name: "description", type: "internationalizedArrayText", diff --git a/studioShared/schemas/fields/domains.ts b/studioShared/schemas/fields/domains.ts new file mode 100644 index 000000000..c93ec4219 --- /dev/null +++ b/studioShared/schemas/fields/domains.ts @@ -0,0 +1,18 @@ +import { defineField } from "sanity"; + +export const domains = ["variant.no", "variant.se"] as const; + +export const domainsField = defineField({ + name: "domains", + type: "array", + title: "Domains", + description: + "The customer case will only be shown on the domains checked here. IMPORTANT: Remember to have translations in the language for the domains you add here!", + of: [{ type: "string" }], + options: { + list: domains.map((domain) => { + return { title: domain, value: domain }; + }), + }, + initialValue: domains.map((domain) => domain), +}); From acea2a062e70ef51c12bc62fc98689ed76b9cc70 Mon Sep 17 00:00:00 2001 From: Ane Date: Tue, 26 Nov 2024 12:53:15 +0100 Subject: [PATCH 04/20] temp --- .vscode/settings.json | 7 ++++- messages/en.json | 8 ++++- messages/no.json | 8 ++++- messages/se.json | 10 ++++-- .../customerCasesEntry/CustomerCasesEntry.tsx | 14 ++++++--- .../customerCasesEntry/CustomerCasesList.tsx | 31 ++++++++++++++++--- .../customerCasesEntry.module.css | 13 ++++++++ src/styles/global.css | 1 + 8 files changed, 78 insertions(+), 14 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 4f789f228..d1906ca0a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,8 @@ { - "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"] + "i18n-ally.localesPaths": [ + "i18n", + "messages", + "src/i18n" + ], + "i18n-ally.keystyle": "nested" } diff --git a/messages/en.json b/messages/en.json index 04f5d642d..5a3f52f6b 100644 --- a/messages/en.json +++ b/messages/en.json @@ -1,4 +1,7 @@ { + "linking_words":{ + "for": "for" + }, "navigation": { "home": "Home" }, @@ -14,7 +17,10 @@ "development": "Development", "project_management": "Project management", "url": "Url", - "collaborators": "Collaborators" + "collaborators": "Collaborators", + "customer_case_entry": { + "image": "image" + } }, "contact_information": { "help": "Curious about Variant and want to explore what we offer?", diff --git a/messages/no.json b/messages/no.json index cfb522435..9af351f16 100644 --- a/messages/no.json +++ b/messages/no.json @@ -1,4 +1,7 @@ { + "linking_words":{ + "for": "for" + }, "navigation": { "home": "Hjem" }, @@ -14,7 +17,10 @@ "development": "Utvikling", "project_management": "Prosjektledelse", "url": "Link", - "collaborators": "Samarbeidspartnere" + "collaborators": "Samarbeidspartnere", + "customer_case_entry": { + "image": "bilde" + } }, "contact_information": { "help": "Trenger du hjelp med lignende eller noe helt annet?", diff --git a/messages/se.json b/messages/se.json index 2bfa53704..4b6dc12fa 100644 --- a/messages/se.json +++ b/messages/se.json @@ -1,4 +1,7 @@ -{ +{ + "linking_words":{ + "for": "för" +}, "navigation": { "home": "Hem" }, @@ -14,7 +17,10 @@ "development": "Utveckling", "project_management": "Projektledning", "url": "Link", - "collaborators": "Samarbeidspartnere" + "collaborators": "Samarbeidspartnere", + "customer_case_entry": { + "image": "bild" + } }, "contact_information": { "help": "Nyfiken på Variant och vill utforska vad vi erbjuder?", diff --git a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx index 1513baaec..a842b3393 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx @@ -1,4 +1,8 @@ +import { headers } from "next/headers"; + import { Locale } from "src/i18n/routing"; +import { getDraftModeInfo } from "src/utils/draftmode"; +import { domainFromHostname } from "src/utils/url"; import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; import { CUSTOMER_CASES_QUERY } from "studioShared/lib/queries/customerCases"; import { loadSharedQuery } from "studioShared/lib/store"; @@ -10,20 +14,20 @@ interface CustomerCasesProps { } async function CustomerCasesEntry({ language }: CustomerCasesProps) { + const { perspective } = getDraftModeInfo(); + const domain = domainFromHostname(headers().get("host")); + const [sharedCustomerCases] = await Promise.all([ loadSharedQuery( CUSTOMER_CASES_QUERY, - { language: language }, - {}, + { language: language, domain }, + { perspective }, ), ]); - console.log(sharedCustomerCases.data); - return (

- {/* {sharedCustomerCases} hei */}
); } diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index a3b6352fa..9cc963d10 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -1,5 +1,7 @@ "use client"; +import Image from "next/image"; +import { useTranslations } from "next-intl"; import { useState } from "react"; import Button from "src/components/buttons/Button"; @@ -12,11 +14,14 @@ interface CustomerCasesProps { } const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { + const t = useTranslations(); const [selectedCustomerCase, setSelectedCustomerCase] = - useState(); + useState(customerCases[0]); + + console.log("customerCases", selectedCustomerCase); return ( -
+
{customerCases.map( (customerCase: CustomerCaseBase) => @@ -24,7 +29,7 @@ const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { customerCase.slug && (
- {selectedCustomerCase?.basicTitle} +
+ {selectedCustomerCase.description} + {selectedCustomerCase.basicTitle} + fag: design . prosjektledelse + {selectedCustomerCase.image.metadata?.lqip && ( + { + )} +
); }; diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 34cfcdacb..fa2ab942c 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -1,5 +1,18 @@ +.wrapper { + display: flex; + flex-direction: column; + gap: 1rem; + background-color: var(--background-bg-dark); +} + .buttonRow { display: flex; flex-direction: row; gap: 0rem; +} + +.cardInfo{ + background-color: red; + display: flex; + flex-direction: row; } \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index af1df6e96..5e6577af2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -34,6 +34,7 @@ html { --text-tertiary: #5e5e5e; --background-bg-light-secondary: #eaeaea; + --background-bg-dark: #2D2D2D; /* breakpoints */ --breakpoint-mobile: 767px; From 065c35a094ef37e8c2b29637fbaa27ceb5ff4019 Mon Sep 17 00:00:00 2001 From: Ane Date: Wed, 27 Nov 2024 13:38:26 +0100 Subject: [PATCH 05/20] linting fixes --- .vscode/settings.json | 6 +---- messages/en.json | 6 ++--- messages/no.json | 4 ++-- messages/se.json | 6 ++--- .../customerCasesEntry.module.css | 24 +++++++++---------- src/styles/global.css | 2 +- 6 files changed, 22 insertions(+), 26 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index d1906ca0a..a3b881bde 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,4 @@ { - "i18n-ally.localesPaths": [ - "i18n", - "messages", - "src/i18n" - ], + "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"], "i18n-ally.keystyle": "nested" } diff --git a/messages/en.json b/messages/en.json index 5a3f52f6b..8178da18d 100644 --- a/messages/en.json +++ b/messages/en.json @@ -1,7 +1,7 @@ { - "linking_words":{ + "linking_words": { "for": "for" - }, + }, "navigation": { "home": "Home" }, @@ -17,7 +17,7 @@ "development": "Development", "project_management": "Project management", "url": "Url", - "collaborators": "Collaborators", + "collaborators": "Collaborators", "customer_case_entry": { "image": "image" } diff --git a/messages/no.json b/messages/no.json index 9398d0ffc..c4de53239 100644 --- a/messages/no.json +++ b/messages/no.json @@ -1,7 +1,7 @@ { - "linking_words":{ + "linking_words": { "for": "for" - }, + }, "navigation": { "home": "Hjem" }, diff --git a/messages/se.json b/messages/se.json index 4b6dc12fa..4d5beeb81 100644 --- a/messages/se.json +++ b/messages/se.json @@ -1,7 +1,7 @@ -{ - "linking_words":{ +{ + "linking_words": { "for": "för" -}, + }, "navigation": { "home": "Hem" }, diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index fa2ab942c..7164a96f5 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -1,18 +1,18 @@ .wrapper { - display: flex; - flex-direction: column; - gap: 1rem; - background-color: var(--background-bg-dark); + display: flex; + flex-direction: column; + gap: 1rem; + background-color: var(--background-bg-dark); } .buttonRow { - display: flex; - flex-direction: row; - gap: 0rem; + display: flex; + flex-direction: row; + gap: 0rem; } -.cardInfo{ - background-color: red; - display: flex; - flex-direction: row; -} \ No newline at end of file +.cardInfo { + background-color: red; + display: flex; + flex-direction: row; +} diff --git a/src/styles/global.css b/src/styles/global.css index 447ca9996..b3a59bfc3 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -34,7 +34,7 @@ html { --text-tertiary: #5e5e5e; --background-bg-light-secondary: #eaeaea; - --background-bg-dark: #2D2D2D; + --background-bg-dark: #2d2d2d; /* breakpoints */ --breakpoint-mobile: 425px; From 048f58033a8f2e5c3d4644fcfc27d7a5d542be5b Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 28 Nov 2024 11:00:23 +0100 Subject: [PATCH 06/20] imagerendering and datafetching --- .../customerCasesEntry/CustomerCasesEntry.tsx | 29 ++++--- .../customerCasesEntry/CustomerCasesList.tsx | 81 +++++++++---------- .../customerCasesEntry.module.css | 54 ++++++++++++- .../utils/formatCapitalizedFirstLetter.ts | 3 + src/styles/global.css | 2 +- studioShared/lib/interfaces/customerCases.ts | 4 + studioShared/lib/queries/customerCases.ts | 20 +++++ 7 files changed, 134 insertions(+), 59 deletions(-) create mode 100644 src/components/utils/formatCapitalizedFirstLetter.ts diff --git a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx index a842b3393..6868535a6 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx @@ -3,8 +3,8 @@ import { headers } from "next/headers"; import { Locale } from "src/i18n/routing"; import { getDraftModeInfo } from "src/utils/draftmode"; import { domainFromHostname } from "src/utils/url"; -import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; -import { CUSTOMER_CASES_QUERY } from "studioShared/lib/queries/customerCases"; +import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; +import { CUSTOMER_CASE_ENTRY_QUERY } from "studioShared/lib/queries/customerCases"; import { loadSharedQuery } from "studioShared/lib/store"; import CustomerCasesList from "./CustomerCasesList"; @@ -17,18 +17,23 @@ async function CustomerCasesEntry({ language }: CustomerCasesProps) { const { perspective } = getDraftModeInfo(); const domain = domainFromHostname(headers().get("host")); - const [sharedCustomerCases] = await Promise.all([ - loadSharedQuery( - CUSTOMER_CASES_QUERY, - { language: language, domain }, - { perspective }, - ), - ]); + const customerCaseResult = await loadSharedQuery( + CUSTOMER_CASE_ENTRY_QUERY, + { + domain, + language, + }, + { + perspective, + }, + ); return ( -
- -
+ customerCaseResult && ( +
+ +
+ ) ); } diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 9cc963d10..c0d56ab1c 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -1,63 +1,60 @@ "use client"; -import Image from "next/image"; -import { useTranslations } from "next-intl"; import { useState } from "react"; import Button from "src/components/buttons/Button"; +import { SanitySharedImage } from "src/components/image/SanityImage"; import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; import Text from "src/components/text/Text"; -import { CustomerCaseBase } from "studioShared/lib/interfaces/customerCases"; +import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; +import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; interface CustomerCasesProps { - customerCases: CustomerCaseBase[]; + customerCases: CustomerCaseEntry[]; } const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { - const t = useTranslations(); const [selectedCustomerCase, setSelectedCustomerCase] = - useState(customerCases[0]); + useState(customerCases[0] || null); - console.log("customerCases", selectedCustomerCase); + const deliveryNames = [ + selectedCustomerCase.projectInfo.deliveries.projectManagement && + "Project Management", + selectedCustomerCase.projectInfo.deliveries.design && "Design", + selectedCustomerCase.projectInfo.deliveries.development && "Development", + ].filter(Boolean); return (
-
- {customerCases.map( - (customerCase: CustomerCaseBase) => - //Todo: this should be a better test - customerCase.slug && ( -
- -
- ), - )} -
-
- {selectedCustomerCase.description} - {selectedCustomerCase.basicTitle} - fag: design . prosjektledelse - {selectedCustomerCase.image.metadata?.lqip && ( - { - )} +
+
+ {customerCases.map( + (customerCase: CustomerCaseEntry) => + customerCase && ( +
+ +
+ ), + )} +
+
+ + {" "} + {selectedCustomerCase.basicTitle} + + {deliveryNames} +
+ {selectedCustomerCase.image && ( +
+ +
+ )}
); }; diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 7164a96f5..f8ad10048 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -1,18 +1,64 @@ .wrapper { display: flex; - flex-direction: column; + flex-direction: row; gap: 1rem; background-color: var(--background-bg-dark); + height: fit-content; + justify-content: space-between; + padding: 6px; + + @media (max-width: 834px) { + flex-direction: column; + } + + @media (max-width: 834px) { + flex-direction: column; + } +} + +.heading { + @media (max-width: 1130px) { + font-size: 2.125rem; + } } .buttonRow { display: flex; flex-direction: row; - gap: 0rem; + gap: 1rem; +} + +.info { + padding: 32px 24px; + display: flex; + flex-direction: column; + gap: 24px; } .cardInfo { - background-color: red; + color: var(--text-primary-light); display: flex; - flex-direction: row; + gap: 48px; + flex-direction: column; + height: fit-content; +} + +.imageWrapper { + max-width: 791px !important; + max-height: 27rem !important; + min-height: 27rem !important; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden !important; + padding: 0; + margin: 6px; + border-radius: 24px; +} + +.imageWrapper img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; + border-radius: 24px; } diff --git a/src/components/utils/formatCapitalizedFirstLetter.ts b/src/components/utils/formatCapitalizedFirstLetter.ts new file mode 100644 index 000000000..c83285017 --- /dev/null +++ b/src/components/utils/formatCapitalizedFirstLetter.ts @@ -0,0 +1,3 @@ +export function capitalizeFirstLetter(string: string) { + return string.charAt(0).toUpperCase() + string.slice(1).toLowerCase(); +} diff --git a/src/styles/global.css b/src/styles/global.css index b3a59bfc3..524b7f5b2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -32,7 +32,7 @@ html { --secondary-red: #f0503f; --text-primary: #222424; --text-tertiary: #5e5e5e; - + --text-primary-light: #fafafa; --background-bg-light-secondary: #eaeaea; --background-bg-dark: #2d2d2d; diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts index ec320c9c1..6cd966b1d 100644 --- a/studioShared/lib/interfaces/customerCases.ts +++ b/studioShared/lib/interfaces/customerCases.ts @@ -69,3 +69,7 @@ export interface CustomerCase extends CustomerCaseBase { sections: CustomerCaseSection[]; featuredCases?: CustomerCaseBase[] | null; } + +export interface CustomerCaseEntry extends CustomerCaseBase { + projectInfo: CustomerCaseProjectInfo; +} diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts index fd9055f6b..1007339d3 100644 --- a/studioShared/lib/queries/customerCases.ts +++ b/studioShared/lib/queries/customerCases.ts @@ -113,6 +113,26 @@ export const CUSTOMER_CASE_QUERY = groq` } `; +export const CUSTOMER_CASE_ENTRY_QUERY = groq` + *[_type == "customerCase" && ($domain == null || $domain in domains)] { + ${CUSTOMER_CASE_BASE_FRAGMENT}, + "projectInfo": projectInfo { + customer, + "deliveries": { + "design": deliveries.design[] { + "designDelivery": ${translatedFieldFragment("designDelivery")} + }, + "development": deliveries.development[] { + "developmentDelivery": ${translatedFieldFragment("developmentDelivery")} + }, + "projectManagement": deliveries.projectManagement[] { + "projectManagementDelivery": ${translatedFieldFragment("projectManagementDelivery")} + } + }, + }, + } +`; + export const CUSTOMER_CASES_SITEMAP_QUERY = groq` *[_type == "customerCase"] { _updatedAt, From 09807021a4529c66f44252f27ca699b6289a39cf Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 28 Nov 2024 12:46:37 +0100 Subject: [PATCH 07/20] media --- src/components/text/text.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index 3b181f971..03d2074e3 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -101,7 +101,7 @@ line-height: 18px; letter-spacing: 0.14px; - @media (max-width: 375px) { + @media (max-width: 440px) { font-size: 12px; letter-spacing: 0.12px; } From b9c17c7a9cae0f2b9e28fe44084768c7c280b6ec Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 28 Nov 2024 22:10:43 +0100 Subject: [PATCH 08/20] add tag component --- messages/en.json | 4 +- messages/no.json | 4 +- messages/se.json | 4 +- .../customerCasesEntry/CustomerCasesList.tsx | 22 ++++-- .../customerCasesEntry.module.css | 22 ++++-- src/components/tags/Tag.tsx | 64 ++++++++++++++++ src/components/tags/tag.module.css | 73 +++++++++++++++++++ 7 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 src/components/tags/Tag.tsx create mode 100644 src/components/tags/tag.module.css diff --git a/messages/en.json b/messages/en.json index 2638a38cf..39dcc5384 100644 --- a/messages/en.json +++ b/messages/en.json @@ -19,7 +19,9 @@ "url": "Url", "collaborators": "Collaborators", "customer_case_entry": { - "image": "image" + "image": "image", + "case": "Case", + "field": "Field" } }, "contact_information": { diff --git a/messages/no.json b/messages/no.json index d6b774222..b21f59835 100644 --- a/messages/no.json +++ b/messages/no.json @@ -19,7 +19,9 @@ "url": "Link", "collaborators": "Samarbeidspartnere", "customer_case_entry": { - "image": "bilde" + "image": "bilde", + "case": "Case", + "field": "Fag" } }, "contact_information": { diff --git a/messages/se.json b/messages/se.json index 4ca66ab5a..034b86cee 100644 --- a/messages/se.json +++ b/messages/se.json @@ -19,7 +19,9 @@ "url": "Link", "collaborators": "Samarbeidspartnere", "customer_case_entry": { - "image": "bild" + "image": "bild", + "case": "Case", + "field": "Field" } }, "contact_information": { diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index c0d56ab1c..60e051608 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -1,10 +1,11 @@ "use client"; +import { useTranslations } from "next-intl"; import { useState } from "react"; -import Button from "src/components/buttons/Button"; import { SanitySharedImage } from "src/components/image/SanityImage"; import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; +import Tag from "src/components/tags/Tag"; import Text from "src/components/text/Text"; import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; @@ -14,6 +15,7 @@ interface CustomerCasesProps { } const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { + const t = useTranslations("customer_case"); const [selectedCustomerCase, setSelectedCustomerCase] = useState(customerCases[0] || null); @@ -27,17 +29,24 @@ const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { return (
-
+
+ + {t("customer_case_entry.case")} + {customerCases.map( (customerCase: CustomerCaseEntry) => customerCase && (
- + + {capitalizeFirstLetter(customerCase.projectInfo.customer)} + +
), )} @@ -47,6 +56,7 @@ const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { {" "} {selectedCustomerCase.basicTitle} + {t("customer_case_entry.field")} {deliveryNames}
diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index f8ad10048..3a0894eb1 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -6,13 +6,10 @@ height: fit-content; justify-content: space-between; padding: 6px; + border-radius: 0.375rem; @media (max-width: 834px) { - flex-direction: column; - } - - @media (max-width: 834px) { - flex-direction: column; + flex-direction: column-reverse; } } @@ -22,9 +19,14 @@ } } -.buttonRow { +.font { + color: var(--text-primary-light); +} + +.TagRow { display: flex; flex-direction: row; + align-items: center; gap: 1rem; } @@ -54,6 +56,14 @@ padding: 0; margin: 6px; border-radius: 24px; + + @media (max-width: 834px) { + align-items: start; + max-width: 54.3125rem !important; + min-height: 18rem !important; + max-height: 18rem !important; + margin: 0px; + } } .imageWrapper img { diff --git a/src/components/tags/Tag.tsx b/src/components/tags/Tag.tsx new file mode 100644 index 000000000..fe6e52654 --- /dev/null +++ b/src/components/tags/Tag.tsx @@ -0,0 +1,64 @@ +import React from "react"; + +import styles from "src/components/tags/tag.module.css"; + +type TagBackground = "dark" | "light"; +type Device = "desktop" | "tablet" | "mobile"; +type State = "default" | "focused" | "hover" | "pressed" | "disabled"; +type Size = "normal" | "large"; + +interface ITagProps { + children: React.ReactNode; + background?: "light" | "dark"; + size?: "normal" | "large"; + state?: "default" | "focused" | "hover" | "pressed" | "disabled"; + device?: "desktop" | "mobile"; + onClick?: () => void; + disabled?: boolean; +} + +const backgroundClassMap: { [key in TagBackground]: string } = { + light: styles.light, + dark: styles.dark, +}; + +const deviceClassMap: { [key in Device]: string } = { + desktop: styles.desktop, + tablet: styles.tablet, + mobile: styles.mobile, +}; + +const stateClassMap: { [key in State]: string } = { + default: styles.default, + focused: styles.focused, + hover: styles.hover, + pressed: styles.pressed, + disabled: styles.disabled, +}; + +const sizeClassMap: { [key in Size]: string } = { + normal: styles.normal, + large: styles.large, +}; + +const Tag = ({ + background = "dark", + device = "desktop", + size = "normal", + state = "default", + onClick, + children, + disabled, +}: ITagProps) => { + const className = `${styles.tag} ${backgroundClassMap[background]} ${deviceClassMap[device]} ${stateClassMap[state]} ${sizeClassMap[size]}`; + + console.log(className); + + return ( + + ); +}; + +export default Tag; diff --git a/src/components/tags/tag.module.css b/src/components/tags/tag.module.css new file mode 100644 index 000000000..1b3a55b6f --- /dev/null +++ b/src/components/tags/tag.module.css @@ -0,0 +1,73 @@ +.tag { + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + padding: 0.375rem 0.75rem; + border: 1px solid var(--background-bg-light-primary); + border-radius: 62.4375rem; +} + +.default { + background-color: var(--background-bg-dark); + border: 1px solid var(--background-bg-dark); + color: var(--text-primary-light); +} + +.light { + background-color: var(--background-bg-light-primary); + color: var(--text-primary); + border: 1px solid var(--background-bg-dark); + border-radius: 62.4375rem; +} + +.dark { + background-color: var(--background-bg-dark); + color: var(--text-primary-light); + border: 1px solid var(--background-bg-light-primary); +} + +.focused { + color: var(--text-primary); + border: 1px solid var(--surface-yellow); +} + +.hover:hover { + color: var(--text-primary); + border: 1px solid var(--surface-red); +} + +.pressed { + /* Add styles for pressed state */ +} + +.normal { + /* font-size: 14px; */ + /* padding: 3.5px 9px; */ +} + +.large { + font-size: 1.375rem; + font-style: normal; + font-weight: 400; + line-height: 120%; +} + +.disabled { + opacity: 0.4; + cursor: not-allowed; +} + +.active { + background-color: var(--background-bg-dark); + border-color: var(--background-bg-dark); +} + +.desktop { + margin: 5px; +} + +.mobile { + margin: 3px; + font-size: 12px; +} From 74f2a339ddcbcac1fd09faaa59b5fd8a4f16961f Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 5 Dec 2024 09:09:42 +0100 Subject: [PATCH 09/20] remove tag ad we're replacing it with other tag component --- .../customerCasesEntry/CustomerCasesList.tsx | 6 +- src/components/tags/Tag.tsx | 64 ---------------- src/components/tags/tag.module.css | 73 ------------------- 3 files changed, 3 insertions(+), 140 deletions(-) delete mode 100644 src/components/tags/Tag.tsx delete mode 100644 src/components/tags/tag.module.css diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 60e051608..4fe917ff0 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -3,9 +3,9 @@ import { useTranslations } from "next-intl"; import { useState } from "react"; +import Button from "src/components/buttons/Button"; import { SanitySharedImage } from "src/components/image/SanityImage"; import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; -import Tag from "src/components/tags/Tag"; import Text from "src/components/text/Text"; import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; @@ -37,7 +37,7 @@ const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { (customerCase: CustomerCaseEntry) => customerCase && (
- { {capitalizeFirstLetter(customerCase.projectInfo.customer)} - +
), )} diff --git a/src/components/tags/Tag.tsx b/src/components/tags/Tag.tsx deleted file mode 100644 index fe6e52654..000000000 --- a/src/components/tags/Tag.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React from "react"; - -import styles from "src/components/tags/tag.module.css"; - -type TagBackground = "dark" | "light"; -type Device = "desktop" | "tablet" | "mobile"; -type State = "default" | "focused" | "hover" | "pressed" | "disabled"; -type Size = "normal" | "large"; - -interface ITagProps { - children: React.ReactNode; - background?: "light" | "dark"; - size?: "normal" | "large"; - state?: "default" | "focused" | "hover" | "pressed" | "disabled"; - device?: "desktop" | "mobile"; - onClick?: () => void; - disabled?: boolean; -} - -const backgroundClassMap: { [key in TagBackground]: string } = { - light: styles.light, - dark: styles.dark, -}; - -const deviceClassMap: { [key in Device]: string } = { - desktop: styles.desktop, - tablet: styles.tablet, - mobile: styles.mobile, -}; - -const stateClassMap: { [key in State]: string } = { - default: styles.default, - focused: styles.focused, - hover: styles.hover, - pressed: styles.pressed, - disabled: styles.disabled, -}; - -const sizeClassMap: { [key in Size]: string } = { - normal: styles.normal, - large: styles.large, -}; - -const Tag = ({ - background = "dark", - device = "desktop", - size = "normal", - state = "default", - onClick, - children, - disabled, -}: ITagProps) => { - const className = `${styles.tag} ${backgroundClassMap[background]} ${deviceClassMap[device]} ${stateClassMap[state]} ${sizeClassMap[size]}`; - - console.log(className); - - return ( - - ); -}; - -export default Tag; diff --git a/src/components/tags/tag.module.css b/src/components/tags/tag.module.css deleted file mode 100644 index 1b3a55b6f..000000000 --- a/src/components/tags/tag.module.css +++ /dev/null @@ -1,73 +0,0 @@ -.tag { - display: inline-flex; - align-items: center; - justify-content: center; - cursor: pointer; - padding: 0.375rem 0.75rem; - border: 1px solid var(--background-bg-light-primary); - border-radius: 62.4375rem; -} - -.default { - background-color: var(--background-bg-dark); - border: 1px solid var(--background-bg-dark); - color: var(--text-primary-light); -} - -.light { - background-color: var(--background-bg-light-primary); - color: var(--text-primary); - border: 1px solid var(--background-bg-dark); - border-radius: 62.4375rem; -} - -.dark { - background-color: var(--background-bg-dark); - color: var(--text-primary-light); - border: 1px solid var(--background-bg-light-primary); -} - -.focused { - color: var(--text-primary); - border: 1px solid var(--surface-yellow); -} - -.hover:hover { - color: var(--text-primary); - border: 1px solid var(--surface-red); -} - -.pressed { - /* Add styles for pressed state */ -} - -.normal { - /* font-size: 14px; */ - /* padding: 3.5px 9px; */ -} - -.large { - font-size: 1.375rem; - font-style: normal; - font-weight: 400; - line-height: 120%; -} - -.disabled { - opacity: 0.4; - cursor: not-allowed; -} - -.active { - background-color: var(--background-bg-dark); - border-color: var(--background-bg-dark); -} - -.desktop { - margin: 5px; -} - -.mobile { - margin: 3px; - font-size: 12px; -} From 39e68b0cc0a80ae99fddac4a7004b67984b54145 Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 5 Dec 2024 12:16:52 +0100 Subject: [PATCH 10/20] add link to customercase --- .../customerCasesEntry/CustomerCasesEntry.tsx | 17 ++++++- .../customerCasesEntry/CustomerCasesList.tsx | 47 +++++++++++-------- studio/lib/queries/specialPages.ts | 7 ++- 3 files changed, 48 insertions(+), 23 deletions(-) diff --git a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx index 6868535a6..c1fec4869 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesEntry.tsx @@ -3,6 +3,8 @@ import { headers } from "next/headers"; import { Locale } from "src/i18n/routing"; import { getDraftModeInfo } from "src/utils/draftmode"; import { domainFromHostname } from "src/utils/url"; +import { CUSTOMER_CASES_PAGE_SITEMAP_QUERY } from "studio/lib/queries/specialPages"; +import { loadStudioQuery } from "studio/lib/store"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; import { CUSTOMER_CASE_ENTRY_QUERY } from "studioShared/lib/queries/customerCases"; import { loadSharedQuery } from "studioShared/lib/store"; @@ -28,10 +30,23 @@ async function CustomerCasesEntry({ language }: CustomerCasesProps) { }, ); + const customerCasePageSlug = ( + await loadStudioQuery<{ slug: string } | null>( + CUSTOMER_CASES_PAGE_SITEMAP_QUERY, + { + language, + }, + ) + ).data?.slug; + return ( customerCaseResult && (
- +
) ); diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 4fe917ff0..1a3ec5c7f 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -1,20 +1,26 @@ "use client"; +import Link from "next/link"; import { useTranslations } from "next-intl"; import { useState } from "react"; -import Button from "src/components/buttons/Button"; import { SanitySharedImage } from "src/components/image/SanityImage"; import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; +import { Tag } from "src/components/tag"; import Text from "src/components/text/Text"; -import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; interface CustomerCasesProps { customerCases: CustomerCaseEntry[]; + language: string; + customerCasePageSlug?: string; } -const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { +const CustomerCaseList = ({ + customerCases, + language, + customerCasePageSlug, +}: CustomerCasesProps) => { const t = useTranslations("customer_case"); const [selectedCustomerCase, setSelectedCustomerCase] = useState(customerCases[0] || null); @@ -37,28 +43,29 @@ const CustomerCaseList = ({ customerCases }: CustomerCasesProps) => { (customerCase: CustomerCaseEntry) => customerCase && (
- + text={customerCase.projectInfo.customer} + />
), )}
-
- - {" "} - {selectedCustomerCase.basicTitle} - - {t("customer_case_entry.field")} - {deliveryNames} -
+ +
+ + {" "} + {selectedCustomerCase.basicTitle} + + {t("customer_case_entry.field")} + {deliveryNames} +
+
{selectedCustomerCase.image && (
diff --git a/studio/lib/queries/specialPages.ts b/studio/lib/queries/specialPages.ts index 3c12660b2..094a6266b 100644 --- a/studio/lib/queries/specialPages.ts +++ b/studio/lib/queries/specialPages.ts @@ -1,6 +1,9 @@ import { groq } from "next-sanity"; -import { LANGUAGE_FIELD_FRAGMENT } from "./i18n"; +import { + LANGUAGE_FIELD_FRAGMENT, + TRANSLATED_SLUG_VALUE_FRAGMENT, +} from "./i18n"; import { translatedFieldFragment } from "./utils/i18n"; //Compensations @@ -51,6 +54,6 @@ export const CUSTOMER_CASES_PAGE_QUERY = groq` export const CUSTOMER_CASES_PAGE_SITEMAP_QUERY = groq` *[_type == "customerCasesPage"][0] { _updatedAt, - slug + "slug": ${TRANSLATED_SLUG_VALUE_FRAGMENT} } `; From fef15a66664411d0b72c276528917ebc5309293c Mon Sep 17 00:00:00 2001 From: Ane Date: Thu, 5 Dec 2024 12:53:50 +0100 Subject: [PATCH 11/20] format deliverystrings --- .../employeeCard/employeeCard.module.css | 3 -- .../customerCasesEntry/CustomerCasesList.tsx | 31 ++++++++++++++----- .../customerCasesEntry.module.css | 29 ++++++++++++++++- 3 files changed, 51 insertions(+), 12 deletions(-) diff --git a/src/components/employeeCard/employeeCard.module.css b/src/components/employeeCard/employeeCard.module.css index 920269654..a068f41e1 100644 --- a/src/components/employeeCard/employeeCard.module.css +++ b/src/components/employeeCard/employeeCard.module.css @@ -74,9 +74,6 @@ color: currentColor; } -.employeeRole { -} - .employeeRoleDot::after { content: "·"; margin: 0 0.25rem; diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 1a3ec5c7f..64c4afdd0 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -8,6 +8,7 @@ import { SanitySharedImage } from "src/components/image/SanityImage"; import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; import { Tag } from "src/components/tag"; import Text from "src/components/text/Text"; +import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; interface CustomerCasesProps { @@ -48,7 +49,9 @@ const CustomerCaseList = ({ type="button" background="dark" onClick={() => setSelectedCustomerCase(customerCase)} - text={customerCase.projectInfo.customer} + text={capitalizeFirstLetter( + customerCase.projectInfo.customer, + )} />
), @@ -62,16 +65,28 @@ const CustomerCaseList = ({ {" "} {selectedCustomerCase.basicTitle} - {t("customer_case_entry.field")} - {deliveryNames} +
+ {t("customer_case_entry.field")} +
+ {deliveryNames.map((deliveryName, index) => ( + + {deliveryName} + + ))} +
+
- {selectedCustomerCase.image && ( -
- -
- )} + + {selectedCustomerCase.image && ( +
+ +
+ )} +
); }; diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 3a0894eb1..fc9b32f25 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -14,6 +14,10 @@ } .heading { + &:hover { + text-decoration: underline; + } + @media (max-width: 1130px) { font-size: 2.125rem; } @@ -45,9 +49,31 @@ height: fit-content; } +.deliveries{ + display: flex; + flex-direction: column; + gap: 0.25rem; +} + +.deliveriesList{ + display: flex; + flex-direction: row; +} + +.dotSeparator::after { + content: "·"; + margin: 0.5rem; +} + +.dotSeparator:last-child:after { + content: ""; + margin: 0; +} + + .imageWrapper { max-width: 791px !important; - max-height: 27rem !important; + /* max-height: 27rem !important; */ min-height: 27rem !important; display: flex; justify-content: center; @@ -56,6 +82,7 @@ padding: 0; margin: 6px; border-radius: 24px; + flex:1; @media (max-width: 834px) { align-items: start; From e98424848b8f70c1acff198a35ef4265f6eb3537 Mon Sep 17 00:00:00 2001 From: Ane Date: Fri, 6 Dec 2024 11:30:28 +0100 Subject: [PATCH 12/20] image sizing --- .../customerCasesEntry/CustomerCasesList.tsx | 2 + .../customerCasesEntry.module.css | 37 +++++++++++-------- 2 files changed, 24 insertions(+), 15 deletions(-) diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 64c4afdd0..f0fe8fe2c 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -58,6 +58,7 @@ const CustomerCaseList = ({ )}
@@ -79,6 +80,7 @@ const CustomerCaseList = ({
{selectedCustomerCase.image && ( diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index fc9b32f25..55e7e2681 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -5,19 +5,22 @@ background-color: var(--background-bg-dark); height: fit-content; justify-content: space-between; - padding: 6px; + padding: 0.375rem; border-radius: 0.375rem; + height: 30rem; + overflow: hidden; @media (max-width: 834px) { flex-direction: column-reverse; + height: auto; } } -.heading { - &:hover { - text-decoration: underline; - } +.link:focus-visible .heading { + text-decoration: underline; +} +.heading { @media (max-width: 1130px) { font-size: 2.125rem; } @@ -32,6 +35,7 @@ flex-direction: row; align-items: center; gap: 1rem; + flex-wrap: wrap; } .info { @@ -39,25 +43,29 @@ display: flex; flex-direction: column; gap: 24px; + min-width: 20rem; + max-width: 32rem; } .cardInfo { color: var(--text-primary-light); display: flex; - gap: 48px; + width: fit-content; + gap: 2rem; flex-direction: column; height: fit-content; } -.deliveries{ +.deliveries { display: flex; flex-direction: column; gap: 0.25rem; } -.deliveriesList{ +.deliveriesList { display: flex; flex-direction: row; + flex-wrap: wrap; } .dotSeparator::after { @@ -70,26 +78,25 @@ margin: 0; } - .imageWrapper { - max-width: 791px !important; - /* max-height: 27rem !important; */ - min-height: 27rem !important; + max-width: 46rem; + min-width: 24rem; + height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden !important; padding: 0; - margin: 6px; border-radius: 24px; - flex:1; + flex: 1; @media (max-width: 834px) { align-items: start; max-width: 54.3125rem !important; min-height: 18rem !important; - max-height: 18rem !important; margin: 0px; + width: 100%; + height: 100%; } } From 817dc0d3b91c5c121ce06ae89e4fe3dcb2a4c541 Mon Sep 17 00:00:00 2001 From: Jacob Berglund Date: Fri, 6 Dec 2024 13:20:59 +0100 Subject: [PATCH 13/20] Templatus gridificous! --- .../customerCasesEntry/CustomerCasesList.tsx | 98 ++++++++++--------- .../customerCasesEntry.module.css | 54 ++++++++-- 2 files changed, 95 insertions(+), 57 deletions(-) diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index f0fe8fe2c..1f7bf2054 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -34,61 +34,65 @@ const CustomerCaseList = ({ ].filter(Boolean); return ( -
-
-
- - {t("customer_case_entry.case")} - - {customerCases.map( - (customerCase: CustomerCaseEntry) => - customerCase && ( -
- setSelectedCustomerCase(customerCase)} - text={capitalizeFirstLetter( - customerCase.projectInfo.customer, - )} - /> +
+
+
+
+ + {t("customer_case_entry.case")} + + {customerCases.map( + (customerCase: CustomerCaseEntry) => + customerCase && ( +
+ setSelectedCustomerCase(customerCase)} + text={capitalizeFirstLetter( + customerCase.projectInfo.customer, + )} + /> +
+ ), + )} +
+ +
+ + {" "} + {selectedCustomerCase.basicTitle} + +
+ + {t("customer_case_entry.field")} + +
+ {deliveryNames.map((deliveryName, index) => ( + + {deliveryName} + + ))}
- ), - )} +
+
+
-
- - {" "} - {selectedCustomerCase.basicTitle} - -
- {t("customer_case_entry.field")} -
- {deliveryNames.map((deliveryName, index) => ( - - {deliveryName} - - ))} -
-
+
+ {selectedCustomerCase.image && ( + + )}
- - {selectedCustomerCase.image && ( -
- -
- )} -
); }; diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 55e7e2681..e505b9c2f 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -1,18 +1,37 @@ +.container { + container-type: inline-size; + container-name: customer-case-container; +} + .wrapper { - display: flex; - flex-direction: row; - gap: 1rem; + --container-padding: 0.375rem; background-color: var(--background-bg-dark); - height: fit-content; - justify-content: space-between; - padding: 0.375rem; + padding: var(--container-padding); border-radius: 0.375rem; - height: 30rem; overflow: hidden; + display: grid; + grid-template-areas: + "image" + "tags" + "content"; + /* grid-template-columns: 1.5fr 3fr; + grid-template-rows: auto 1fr; */ + gap: 1rem; - @media (max-width: 834px) { + /* @media (max-width: 834px) { flex-direction: column-reverse; height: auto; + } */ +} +@container customer-case-container (width > 834px) { + .wrapper { + grid-template-areas: + "tags image" + "content image"; + grid-template-columns: calc(40cqw - var(--container-padding)) calc( + 60cqw - var(--container-padding) - 1rem + ); + grid-template-rows: 100px 1fr; } } @@ -34,8 +53,9 @@ display: flex; flex-direction: row; align-items: center; - gap: 1rem; + gap: 0.75rem; flex-wrap: wrap; + grid-area: tags; } .info { @@ -45,9 +65,11 @@ gap: 24px; min-width: 20rem; max-width: 32rem; + display: contents; } .cardInfo { + grid-area: content; color: var(--text-primary-light); display: flex; width: fit-content; @@ -56,6 +78,17 @@ height: fit-content; } +.image { + grid-area: image; +} + +.image img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0.375rem; +} + .deliveries { display: flex; flex-direction: column; @@ -78,7 +111,7 @@ margin: 0; } -.imageWrapper { +/* .imageWrapper { max-width: 46rem; min-width: 24rem; height: 100%; @@ -106,3 +139,4 @@ object-fit: cover !important; border-radius: 24px; } + */ From f187e6ef3660727755ff9a6922a3a7bb7ae3504e Mon Sep 17 00:00:00 2001 From: Ane Date: Sun, 8 Dec 2024 17:20:35 +0100 Subject: [PATCH 14/20] tried fixing scaling on card --- .../customerCases/customerCases.module.css | 2 + src/components/image/SanityImage.tsx | 2 - .../customerCasesEntry/CustomerCasesList.tsx | 13 ++-- .../customerCasesEntry.module.css | 73 +++++-------------- 4 files changed, 26 insertions(+), 64 deletions(-) diff --git a/src/components/customerCases/customerCases.module.css b/src/components/customerCases/customerCases.module.css index 1ad7a4eeb..72a970279 100644 --- a/src/components/customerCases/customerCases.module.css +++ b/src/components/customerCases/customerCases.module.css @@ -26,6 +26,8 @@ .caseImageWrapper { min-width: 20rem; max-width: 20rem; + width: 20rem; + height: 14rem; } .caseImageWrapper img { diff --git a/src/components/image/SanityImage.tsx b/src/components/image/SanityImage.tsx index 676c8279d..fb2aa6ed7 100644 --- a/src/components/image/SanityImage.tsx +++ b/src/components/image/SanityImage.tsx @@ -61,8 +61,6 @@ const SanityAssetImage = ({ objectPosition, maxWidth: "100%", maxHeight: "100%", - height: "auto", - width: "auto", }} /> ); diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 1f7bf2054..77f5ec5bb 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -83,14 +83,15 @@ const CustomerCaseList = ({
-
- {selectedCustomerCase.image && ( - - )} -
+ {/*
*/} + {selectedCustomerCase.image && ( + + )} + {/*
*/}
diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index e505b9c2f..be6c877c2 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -14,15 +14,11 @@ "image" "tags" "content"; - /* grid-template-columns: 1.5fr 3fr; - grid-template-rows: auto 1fr; */ - gap: 1rem; - - /* @media (max-width: 834px) { - flex-direction: column-reverse; - height: auto; - } */ -} + grid-template-columns: 1.5fr; + grid-template-rows: 18rem 1fr; + height: 100%; + width: 100%; + } @container customer-case-container (width > 834px) { .wrapper { grid-template-areas: @@ -31,7 +27,7 @@ grid-template-columns: calc(40cqw - var(--container-padding)) calc( 60cqw - var(--container-padding) - 1rem ); - grid-template-rows: 100px 1fr; + grid-template-rows: 30rem 1fr; } } @@ -56,37 +52,32 @@ gap: 0.75rem; flex-wrap: wrap; grid-area: tags; -} - -.info { - padding: 32px 24px; - display: flex; - flex-direction: column; - gap: 24px; - min-width: 20rem; - max-width: 32rem; - display: contents; + padding: 2rem 2rem 0rem 2.625rem; } .cardInfo { grid-area: content; color: var(--text-primary-light); display: flex; - width: fit-content; gap: 2rem; flex-direction: column; - height: fit-content; + height: fit-content; + padding: 2rem 0rem 0rem 2.625rem; } -.image { - grid-area: image; +.imageWrapper { + grid-area: image; + width: 100%; + max-width: 100%; + max-height: 100%; } -.image img { +.imageWrapper img { width: 100%; height: 100%; - object-fit: cover; border-radius: 0.375rem; + min-width: 40.5rem !important; + max-width: 54.3125rem !important; } .deliveries { @@ -110,33 +101,3 @@ content: ""; margin: 0; } - -/* .imageWrapper { - max-width: 46rem; - min-width: 24rem; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden !important; - padding: 0; - border-radius: 24px; - flex: 1; - - @media (max-width: 834px) { - align-items: start; - max-width: 54.3125rem !important; - min-height: 18rem !important; - margin: 0px; - width: 100%; - height: 100%; - } -} - -.imageWrapper img { - width: 100% !important; - height: 100% !important; - object-fit: cover !important; - border-radius: 24px; -} - */ From c463ea90371fda1cb4b0c3d15697cdbb4efe6bef Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Mon, 9 Dec 2024 11:10:36 +0100 Subject: [PATCH 15/20] fix: responsiveness of costumer case (#957) --- .../customerCasesEntry/CustomerCasesList.tsx | 126 +++++++++++------- .../customerCasesEntry.module.css | 91 +++++++------ 2 files changed, 129 insertions(+), 88 deletions(-) diff --git a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx index 77f5ec5bb..44e15b8de 100644 --- a/src/components/sections/customerCasesEntry/CustomerCasesList.tsx +++ b/src/components/sections/customerCasesEntry/CustomerCasesList.tsx @@ -5,12 +5,13 @@ import { useTranslations } from "next-intl"; import { useState } from "react"; import { SanitySharedImage } from "src/components/image/SanityImage"; -import styles from "src/components/sections/customerCasesEntry/customerCasesEntry.module.css"; import { Tag } from "src/components/tag"; import Text from "src/components/text/Text"; import { capitalizeFirstLetter } from "src/components/utils/formatCapitalizedFirstLetter"; import { CustomerCaseEntry } from "studioShared/lib/interfaces/customerCases"; +import styles from "./customerCasesEntry.module.css"; + interface CustomerCasesProps { customerCases: CustomerCaseEntry[]; language: string; @@ -22,7 +23,6 @@ const CustomerCaseList = ({ language, customerCasePageSlug, }: CustomerCasesProps) => { - const t = useTranslations("customer_case"); const [selectedCustomerCase, setSelectedCustomerCase] = useState(customerCases[0] || null); @@ -37,64 +37,96 @@ const CustomerCaseList = ({
-
- - {t("customer_case_entry.case")} - - {customerCases.map( - (customerCase: CustomerCaseEntry) => - customerCase && ( -
- setSelectedCustomerCase(customerCase)} - text={capitalizeFirstLetter( - customerCase.projectInfo.customer, - )} - /> -
- ), - )} +
+ + + +
- -
- - {" "} - {selectedCustomerCase.basicTitle} - -
- - {t("customer_case_entry.field")} - -
- {deliveryNames.map((deliveryName, index) => ( - - {deliveryName} - - ))} -
-
-
-
- {/*
*/} {selectedCustomerCase.image && ( )} - {/*
*/}
); }; export default CustomerCaseList; + +function CardInfo({ + selectedCustomerCase, + deliveryNames, +}: { + selectedCustomerCase: CustomerCaseEntry; + deliveryNames: string[]; +}) { + const t = useTranslations("customer_case"); + + return ( +
+ + {selectedCustomerCase.basicTitle} + +
+ {t("customer_case_entry.field")} +
+ {deliveryNames.map((deliveryName, index) => ( + + {deliveryName} + + ))} +
+
+
+ ); +} + +function TagRow({ + customerCases, + selectedCustomerCase, + setSelectedCustomerCase, +}: { + customerCases: CustomerCaseEntry[]; + selectedCustomerCase: CustomerCaseEntry; + setSelectedCustomerCase: (customerCase: CustomerCaseEntry) => void; +}) { + const t = useTranslations("customer_case"); + + return ( +
+ + {t("customer_case_entry.case")} + + {customerCases.map( + (customerCase: CustomerCaseEntry) => + customerCase && ( +
+ setSelectedCustomerCase(customerCase)} + text={capitalizeFirstLetter(customerCase.projectInfo.customer)} + /> +
+ ), + )} +
+ ); +} diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 5f5ba1061..48f3a8377 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -8,26 +8,55 @@ background-color: var(--background-bg-dark); padding: var(--container-padding); border-radius: 0.375rem; - overflow: hidden; - display: grid; - grid-template-areas: - "image" - "tags" - "content"; - grid-template-columns: 1.5fr; - grid-template-rows: 18rem 1fr; - height: 100%; + display: flex; + gap: 1rem; +} + +.imageWrapper { + aspect-ratio: 16 / 9; + max-height: 30rem; + flex-shrink: 1; +} +.imageWrapper img { + display: block; width: 100%; + height: 100%; + border-radius: 0.375rem; +} + +.info { + flex: 1; + box-sizing: border-box; + min-width: 28rem; + padding: 2rem 0 2rem 2rem; + + @media (max-width: 500px) { + padding: 1rem 0 1rem 1rem; + min-width: 20rem; + } + @media (max-width: 400px) { + padding: 0.5rem 0 0.5rem 0.5rem; + } +} +/* Used to take all width in flex but limit content width */ +.infoInnerMaxWidth { + max-width: 30.5rem; + + display: flex; + flex-direction: column; + gap: 1.5rem; } -@container customer-case-container (width > 834px) { + +@container customer-case-container (width < 900px) { .wrapper { - grid-template-areas: - "tags image" - "content image"; - grid-template-columns: calc(40cqw - var(--container-padding)) calc( - 60cqw - var(--container-padding) - 1rem - ); - grid-template-rows: 30rem 1fr; + flex-direction: column; + } + .imageWrapper { + order: 1; + } + + .info { + order: 2; } } @@ -36,6 +65,9 @@ } .heading { + text-wrap: balance; + overflow: hidden; + @media (max-width: 1130px) { font-size: 2.125rem; } @@ -52,7 +84,6 @@ gap: 0.75rem; flex-wrap: wrap; grid-area: tags; - padding: 2rem 2rem 0rem 2.625rem; } .cardInfo { @@ -61,23 +92,6 @@ display: flex; gap: 2rem; flex-direction: column; - height: fit-content; - padding: 2rem 0rem 0rem 2.625rem; -} - -.imageWrapper { - grid-area: image; - width: 100%; - max-width: 100%; - max-height: 100%; -} - -.imageWrapper img { - width: 100%; - height: 100%; - border-radius: 0.375rem; - min-width: 40.5rem !important; - max-width: 54.3125rem !important; } .deliveries { @@ -92,12 +106,7 @@ flex-wrap: wrap; } -.dotSeparator::after { +.dotSeparator:not(:last-child)::after { content: "·"; margin: 0.5rem; } - -.dotSeparator:last-child:after { - content: ""; - margin: 0; -} From 0ce9634589ac9a31ce467844faa3d63c0155eb63 Mon Sep 17 00:00:00 2001 From: Ane Date: Mon, 9 Dec 2024 12:39:55 +0100 Subject: [PATCH 16/20] border on image --- messages/en.json | 6 +++--- messages/no.json | 6 +++--- messages/se.json | 6 +++--- .../customerCasesEntry.module.css | 16 +++++++++++++++- 4 files changed, 24 insertions(+), 10 deletions(-) diff --git a/messages/en.json b/messages/en.json index 79d0c7720..dea808977 100644 --- a/messages/en.json +++ b/messages/en.json @@ -54,9 +54,9 @@ "location": "Location", "all": "All", "Project Management": "Project Management", - "Design": "Design", - "Utvikling": "Development", - "Administasjon": "Administration", + "design": "Design", + "development": "Development", + "administration": "Administration", "field": "Field", "showMore": "Show all" }, diff --git a/messages/no.json b/messages/no.json index 5e66390dd..b962c7935 100644 --- a/messages/no.json +++ b/messages/no.json @@ -53,9 +53,9 @@ "location": "Lokasjon", "all": "Alle", "Project Management": "Prosjektledelse", - "Design": "Design", - "Utvikling": "Utvikling", - "Administasjon": "Administrasjon", + "design": "Design", + "development": "Utvikling", + "administration": "Administrasjon", "field": "Fag", "showMore": "Vis alle" }, diff --git a/messages/se.json b/messages/se.json index 6f244a974..8c64fe97f 100644 --- a/messages/se.json +++ b/messages/se.json @@ -53,9 +53,9 @@ "location": "Kontor", "all": "Alla", "Project Management": "Projektledning", - "Design": "Design", - "Utvikling": "Utveckling", - "Administasjon": "Administration", + "design": "Design", + "development": "Utveckling", + "administration": "Administration", "field": "Fält", "showMore": "Vis alla" }, diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 48f3a8377..ee0776ab3 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -21,6 +21,15 @@ display: block; width: 100%; height: 100%; + border-radius: 1.5rem; + transition: all 0.3s ease; + + &:hover { + border-radius: 0.375rem; + } +} + +.link:hover .imageWrapper img { border-radius: 0.375rem; } @@ -38,14 +47,19 @@ padding: 0.5rem 0 0.5rem 0.5rem; } } + /* Used to take all width in flex but limit content width */ .infoInnerMaxWidth { max-width: 30.5rem; - display: flex; flex-direction: column; gap: 1.5rem; } +@container customer-case-container (width > 0) { + .heading { + font-size: min(1.5em, 1.23em + 2cqi); + } +} @container customer-case-container (width < 900px) { .wrapper { From 892201f15c1ea70535bcd0ca600057f10b2b96ae Mon Sep 17 00:00:00 2001 From: Ane Date: Mon, 9 Dec 2024 13:24:15 +0100 Subject: [PATCH 17/20] focus and opacity on images --- .../customerCasesEntry/customerCasesEntry.module.css | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index ee0776ab3..6b3de0bbc 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -23,14 +23,15 @@ height: 100%; border-radius: 1.5rem; transition: all 0.3s ease; - + opacity: 0.8; &:hover { - border-radius: 0.375rem; + border-radius: 0.375rem; } } -.link:hover .imageWrapper img { +.info:hover ~ .imageWrapper img { border-radius: 0.375rem; + opacity: 1; } .info { @@ -57,7 +58,7 @@ } @container customer-case-container (width > 0) { .heading { - font-size: min(1.5em, 1.23em + 2cqi); + font-size: max(2em, 2rem + 1cqi); } } From 0840fee396529298ae50caed094b1b3745d19fc6 Mon Sep 17 00:00:00 2001 From: Ane Date: Mon, 9 Dec 2024 13:29:54 +0100 Subject: [PATCH 18/20] small changes in opacity --- .../sections/customerCasesEntry/customerCasesEntry.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index 6b3de0bbc..b8f35e48b 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -25,6 +25,7 @@ transition: all 0.3s ease; opacity: 0.8; &:hover { + opacity: 1; border-radius: 0.375rem; } } From 221af03dfcf123757a6c8f7869214ed4ccf05133 Mon Sep 17 00:00:00 2001 From: Ane Date: Mon, 9 Dec 2024 13:34:10 +0100 Subject: [PATCH 19/20] remove unused Text component in header to fix lint check --- src/components/navigation/header/Header.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/navigation/header/Header.tsx b/src/components/navigation/header/Header.tsx index a8561a441..ff40317e2 100644 --- a/src/components/navigation/header/Header.tsx +++ b/src/components/navigation/header/Header.tsx @@ -10,7 +10,6 @@ import { defaultLanguage } from "i18n/supportedLanguages"; import LanguageSwitcher from "src/components/languageSwitcher/LanguageSwitcher"; import CustomLink from "src/components/link/CustomLink"; import LinkButton from "src/components/linkButton/LinkButton"; -import Text from "src/components/text/Text"; import useScrollDirection from "src/utils/hooks/useScrollDirection"; import { getHref } from "src/utils/link"; import { Announcement } from "studio/lib/interfaces/announcement"; From cad2efe5add823e8993b0f77db14fd25b7f31342 Mon Sep 17 00:00:00 2001 From: Ane Date: Mon, 9 Dec 2024 14:24:39 +0100 Subject: [PATCH 20/20] swedish translation --- messages/se.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/messages/se.json b/messages/se.json index 8c64fe97f..dd88fcde5 100644 --- a/messages/se.json +++ b/messages/se.json @@ -21,7 +21,7 @@ "customer_case_entry": { "image": "bild", "case": "Case", - "field": "Field" + "field": "Fält" } }, "contact_information": {