From 9cfed9d625e661bc113d9ec7f0606f7e00a8ff33 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 19:45:22 +0100 Subject: [PATCH 01/11] fix: image size hotspot for case entyr --- .../sections/customerCasesEntry/customerCasesEntry.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css index b6eb07f2f..1b2216d7a 100644 --- a/src/components/sections/customerCasesEntry/customerCasesEntry.module.css +++ b/src/components/sections/customerCasesEntry/customerCasesEntry.module.css @@ -16,7 +16,6 @@ } .imageWrapper { - aspect-ratio: 16 / 9; max-height: 30rem; flex-shrink: 1; } From ad5f16100a391fd61a21132626a9a927abd957e2 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 19:45:48 +0100 Subject: [PATCH 02/11] chore: renames project metadata --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index af770646b..1244041c8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "sankitty", - "version": "0.1.0", + "name": "@variant/homepage", + "version": "3.0.0", "private": true, "scripts": { "dev": "next dev", From 7e2eb48e175d11313af69ae6d999a730fcd65225 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 19:59:01 +0100 Subject: [PATCH 03/11] fix: min width for learning component --- src/components/sections/learning/learning.module.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/sections/learning/learning.module.css b/src/components/sections/learning/learning.module.css index 83eb16d65..efdba54df 100644 --- a/src/components/sections/learning/learning.module.css +++ b/src/components/sections/learning/learning.module.css @@ -10,14 +10,14 @@ } .title { - width: 40rem; + max-width: 40rem; @media (max-width: 834px) { - width: 25.875rem; + max-width: 25.875rem; } @media (max-width: 425px) { - width: 19.4375rem; + max-width: 19.4375rem; } } @@ -25,13 +25,11 @@ display: flex; flex-direction: row; align-items: flex-start; - padding: 0.25rem; gap: 1rem; @media (max-width: 768px) { display: flex; flex-direction: column; - padding: 1.5rem; } } @@ -56,7 +54,7 @@ .textContainer { display: flex; height: 30rem; - min-width: 26.625rem; + min-width: 20rem; max-width: 33.5625rem; padding: 1.5rem 0.375rem; flex-direction: column; From 06b3314a304082449b00358c0637f29df267577e Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:01:28 +0100 Subject: [PATCH 04/11] fix: footer offices should wrap on smaller screens --- src/components/navigation/footer/footer.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/navigation/footer/footer.module.css b/src/components/navigation/footer/footer.module.css index 7779e1b92..c3284cf80 100644 --- a/src/components/navigation/footer/footer.module.css +++ b/src/components/navigation/footer/footer.module.css @@ -165,6 +165,7 @@ font-weight: 500; line-height: 120%; padding: 0; + flex-wrap: wrap; } .dotSeparator:not(:last-child)::after { From e7db98c1c7747c0fadb4cb5737d6ed80b21e6fd7 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:17:49 +0100 Subject: [PATCH 05/11] fix: reduces widht for section hero components --- src/components/sections/generosity/generosity.module.css | 8 +++----- src/components/sections/learning/learning.module.css | 2 +- src/components/sections/openness/openness.module.css | 8 +++----- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/sections/generosity/generosity.module.css b/src/components/sections/generosity/generosity.module.css index e224d1bcd..6990bae2f 100644 --- a/src/components/sections/generosity/generosity.module.css +++ b/src/components/sections/generosity/generosity.module.css @@ -11,15 +11,15 @@ } .title { - width: 45rem; + max-width: 45rem; color: var(--text-primary); @media (max-width: 834px) { - width: 25.875rem; + max-width: 25.875rem; } @media (max-width: 425px) { - width: 19.4375rem; + max-width: 19.4375rem; } } @@ -27,7 +27,6 @@ display: flex; flex-direction: row; align-items: flex-start; - padding: 0.25rem; gap: 1rem; height: 30rem; @@ -48,7 +47,6 @@ @media (max-width: 768px) { display: flex; flex-direction: column; - padding: 1.5rem; height: unset; } } diff --git a/src/components/sections/learning/learning.module.css b/src/components/sections/learning/learning.module.css index efdba54df..96cfe89fb 100644 --- a/src/components/sections/learning/learning.module.css +++ b/src/components/sections/learning/learning.module.css @@ -54,7 +54,7 @@ .textContainer { display: flex; height: 30rem; - min-width: 20rem; + min-width: 19rem; max-width: 33.5625rem; padding: 1.5rem 0.375rem; flex-direction: column; diff --git a/src/components/sections/openness/openness.module.css b/src/components/sections/openness/openness.module.css index 5043c17d3..b264fac8d 100644 --- a/src/components/sections/openness/openness.module.css +++ b/src/components/sections/openness/openness.module.css @@ -11,15 +11,15 @@ } .title { - width: 40rem; + max-width: 40rem; color: var(--text-primary); @media (max-width: 834px) { - width: 25.875rem; + max-width: 25.875rem; } @media (max-width: 425px) { - width: 19.4375rem; + max-width: 19.4375rem; } } @@ -27,13 +27,11 @@ display: flex; flex-direction: row; align-items: flex-start; - padding: 0.25rem; gap: 1rem; @media (max-width: 768px) { display: flex; flex-direction: column; - padding: 1.5rem; } } From 031a1fce36dc5eb0fd26990b14e3d4c90fd7858f Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:23:19 +0100 Subject: [PATCH 06/11] fix: adds spacing above employee --- src/components/sections/employees/employees.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sections/employees/employees.module.css b/src/components/sections/employees/employees.module.css index d3c6b637e..23c8e6dc1 100644 --- a/src/components/sections/employees/employees.module.css +++ b/src/components/sections/employees/employees.module.css @@ -7,7 +7,7 @@ flex-wrap: wrap; max-width: var(--max-content-width-large); - margin: 0 auto; + margin: var(--padding-l) auto 0; background: var(--background-employees-green); padding: 3rem; From 15c2f8269100028ae4f37028ea65f49734808bb4 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:27:47 +0100 Subject: [PATCH 07/11] fix: wrapping tag row in contact box --- src/components/sections/contact-box/contact-box.module.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/sections/contact-box/contact-box.module.css b/src/components/sections/contact-box/contact-box.module.css index 0010f3ea3..849380fa2 100644 --- a/src/components/sections/contact-box/contact-box.module.css +++ b/src/components/sections/contact-box/contact-box.module.css @@ -23,6 +23,10 @@ border-radius: var(--radius-small); background: var(--_contactBox__background); color: var(--_contactBox__color); + + @media (max-width: 400px) { + padding: 1rem 1rem; + } } .contactBox__inner--light { --_contactBox__background: var(--background-bg-light-secondary); @@ -53,7 +57,8 @@ .tagList { display: flex; flex-direction: column; - gap: 0.75rem; + gap: var(--padding-s); + flex-wrap: wrap; align-items: flex-start; min-width: 120px; From 3921e4c4785472f126e78b6039073a809c9770e6 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:30:55 +0100 Subject: [PATCH 08/11] fix: shorten links --- .../customerCase/projectInfo/CustomerCaseProjectInfo.tsx | 6 +++++- .../projectInfo/customerCaseProjectInfo.module.css | 1 + 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx index db084dadb..266fadff6 100644 --- a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx +++ b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx @@ -104,7 +104,7 @@ export default async function CustomerCaseProjectInfo({ _key: "go-to-external-link", _type: "link", linkType: LinkType.External, - linkTitle: projectInfo.url, + linkTitle: shortenUrl(projectInfo.url), url: projectInfo.url, ariaLabel: projectInfo.url, }} @@ -175,3 +175,7 @@ export default async function CustomerCaseProjectInfo({ ); } + +function shortenUrl(url: string) { + return url.replace(/^https?:\/\/(www\.)?/, ""); +} diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css index 5bf885637..6ca3e25dd 100644 --- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css +++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css @@ -85,4 +85,5 @@ display: flex; flex-direction: column; gap: 0.25rem; + overflow: hidden; } From aef68c0464504f3e1432e151a7cd05f19c06e464 Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:39:47 +0100 Subject: [PATCH 09/11] fix: improves top info section in case and on smaller screens --- .../projectInfo/customerCaseProjectInfo.module.css | 12 ++++-------- src/utils/hooks/useScrollDirection.ts | 1 - 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css index 6ca3e25dd..a96673156 100644 --- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css +++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css @@ -1,21 +1,18 @@ .projectInfo { - display: flex; - flex-direction: row; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; + row-gap: 3rem; width: 100%; max-width: var(--max-content-width-medium); - @media (max-width: 425px) { - flex-direction: column; - gap: 3rem; - } + margin: var(--padding-m) auto; } .projectInfoInner { gap: 1.5rem; display: flex; flex-direction: column; - width: 50%; } .badgeWrapper { @@ -70,7 +67,6 @@ flex-direction: column; gap: 1.5rem; flex-wrap: wrap; - width: 50%; } .preFancyCharacter { diff --git a/src/utils/hooks/useScrollDirection.ts b/src/utils/hooks/useScrollDirection.ts index b955d57f6..998f02701 100644 --- a/src/utils/hooks/useScrollDirection.ts +++ b/src/utils/hooks/useScrollDirection.ts @@ -2,7 +2,6 @@ import { useEffect, useState } from "react"; export default function useScrollDirection() { const [scrollDirection, setScrollDirection] = useState(null); - useEffect(() => { let lastScrollY = window.scrollY; From 87fc8410720ca05c96981943d7acebec48cad4fc Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 20:46:31 +0100 Subject: [PATCH 10/11] fix: legacy image for employees in case --- .../CustomerCaseEmployeeCard.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx index 0a0ffc819..606a8e057 100644 --- a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx +++ b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx @@ -1,6 +1,6 @@ -import Image from "next/image"; import { useTranslations } from "next-intl"; +import { SanityImage } from "src/components/image/SanityImage"; import Text from "src/components/text/Text"; import formatPhoneNumber from "src/components/utils/formatPhoneNumber"; import { ChewbaccaEmployee } from "src/types/employees"; @@ -26,11 +26,11 @@ export default function CustomerCaseEmployeeCard({ employee.email && (
- {employee.name}
From 259df06a6ce803f849601ba2311570ac6872343b Mon Sep 17 00:00:00 2001 From: Mikael Brevik Date: Thu, 12 Dec 2024 21:09:56 +0100 Subject: [PATCH 11/11] feat: adds link to employees on employee page --- messages/en.json | 4 +- messages/no.json | 3 +- messages/se.json | 3 +- src/app/(main)/[locale]/[...path]/page.tsx | 4 +- src/components/employeePage/EmployeePage.tsx | 55 ++++++++++++++----- .../employeePage/employeePage.module.css | 37 +++++-------- 6 files changed, 65 insertions(+), 41 deletions(-) diff --git a/messages/en.json b/messages/en.json index dedc34154..e6aff85e7 100644 --- a/messages/en.json +++ b/messages/en.json @@ -46,7 +46,6 @@ "master": "Master" } }, - "employee_card": { "show": "Showing", "of": "out of", @@ -59,7 +58,8 @@ "Prosjekt- og produktledelse": "Project and product management", "Strategi": "Strategy", "field": "Field", - "showMore": "Show all" + "showMore": "Show all", + "see_all_employees": "See all people" }, "job_posting": { "office": "Office", diff --git a/messages/no.json b/messages/no.json index 29d66c73b..6bf2433ec 100644 --- a/messages/no.json +++ b/messages/no.json @@ -58,7 +58,8 @@ "Prosjekt- og produktledelse": "Prosjekt- og produktledelse", "Strategi": "Strategi", "field": "Fag", - "showMore": "Vis alle" + "showMore": "Vis alle", + "see_all_employees": "Se alle folk" }, "job_posting": { "office": "Kontor", diff --git a/messages/se.json b/messages/se.json index bc2305655..0172c8005 100644 --- a/messages/se.json +++ b/messages/se.json @@ -58,7 +58,8 @@ "Ledelse": "Ledelse", "Strategi": "Strategi", "field": "Fält", - "showMore": "Vis alla" + "showMore": "Vis alla", + "see_all_employees": "Se alla folk" }, "job_posting": { "office": "Kontor", diff --git a/src/app/(main)/[locale]/[...path]/page.tsx b/src/app/(main)/[locale]/[...path]/page.tsx index ea5caf95b..af3a02f41 100644 --- a/src/app/(main)/[locale]/[...path]/page.tsx +++ b/src/app/(main)/[locale]/[...path]/page.tsx @@ -138,7 +138,9 @@ async function Page({ params }: Props) { ); case "employee": - return ; + return ( + + ); } return Page404; })()} diff --git a/src/components/employeePage/EmployeePage.tsx b/src/components/employeePage/EmployeePage.tsx index b85793e4a..60a77a347 100644 --- a/src/components/employeePage/EmployeePage.tsx +++ b/src/components/employeePage/EmployeePage.tsx @@ -1,19 +1,26 @@ -import Image from "next/image"; -import { useTranslations } from "next-intl"; - import Text from "src/components/text/Text"; import formatPhoneNumber from "src/components/utils/formatPhoneNumber"; import { ChewbaccaEmployee } from "src/types/employees"; +import { getTranslations } from "next-intl/server"; +import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings"; +import { loadStudioQuery } from "studio/lib/store"; +import { SanityImage } from "../image/SanityImage"; +import LinkButton from "../linkButton/LinkButton"; import styles from "./employeePage.module.css"; export interface EmployeePageProps { employee: ChewbaccaEmployee; + language: string; } -export default function EmployeePage({ employee }: EmployeePageProps) { +export default async function EmployeePage({ + employee, + language, +}: EmployeePageProps) { + const employeePageSlug = await getEmployeePageSlug(language); const image = employee.imageUrl ?? employee.imageThumbUrl ?? null; - const t = useTranslations("employee_card"); + const t = await getTranslations("employee_card"); return ( employee.name && ( @@ -22,11 +29,11 @@ export default function EmployeePage({ employee }: EmployeePageProps) {
{image != null && (
- {employee.name}
)} @@ -34,12 +41,14 @@ export default function EmployeePage({ employee }: EmployeePageProps) { {employee.name} {employee.email && ( - {employee.email} + {employee.email} )} {employee.telephone && ( - {formatPhoneNumber(employee.telephone)} + + {formatPhoneNumber(employee.telephone)} + )} {employee.officeName && ( @@ -49,13 +58,33 @@ export default function EmployeePage({ employee }: EmployeePageProps) { )} {employee.competences.map((competence) => ( - {t(competence)} + {t.has(competence) ? t(competence) : competence} ))}
+ +
+ +
) ); } + +export async function getEmployeePageSlug(language: string) { + const employeePageSlug = + ( + await loadStudioQuery<{ slug: string } | null>(EMPLOYEE_PAGE_SLUG_QUERY, { + language, + }) + ).data?.slug ?? ""; + + return employeePageSlug; +} diff --git a/src/components/employeePage/employeePage.module.css b/src/components/employeePage/employeePage.module.css index 2b52d1bff..869ff659b 100644 --- a/src/components/employeePage/employeePage.module.css +++ b/src/components/employeePage/employeePage.module.css @@ -7,7 +7,7 @@ .content { width: 100%; - max-width: 1200px; + max-width: var(--max-content-width-small); display: flex; flex-direction: column; align-items: center; @@ -15,33 +15,16 @@ } .employee { - display: flex; + display: grid; gap: 3rem; - flex-direction: column; - margin: 1rem; - - @media (min-width: 1024px) { - flex-direction: row; - align-items: center; - } + width: 100%; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .employeeImage { - display: flex; - flex-direction: column; - align-items: center; background-color: var(--Dark-500); - border-radius: 12px; - width: 300px; - height: 300px; - padding: 1rem; - position: relative; - - @media (max-width: 1024px) { - flex-direction: column; - width: 200px; - height: 200px; - } + border-radius: var(--radius-medium); + overflow: hidden; } .employeeInfo { @@ -66,3 +49,11 @@ color: var(--Dark-500); font-weight: 300; } + +.backToEmployees { + display: flex; + justify-content: center; + width: 100%; + + margin-top: var(--padding-l); +}