Skip to content

Commit 4a8ac4f

Browse files
minhtri0795minhtri0795
authored
Merge pull request #154 from Saigon-Digital/mechanical-single-template
feat: ui rework Gallery block
2 parents d77d977 + e8bd7fd commit 4a8ac4f

File tree

21 files changed

+654
-131
lines changed

21 files changed

+654
-131
lines changed

‎frontend/next.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,15 @@ const nextConfig = withFaust({
2222
}
2323
]
2424
},
25+
async rewrites() {
26+
return [
27+
{
28+
source: '/dienstleistungen/drehen',
29+
destination: '/dienstleistungen/drehen-2',
30+
31+
},
32+
]
33+
},
2534
reactStrictMode: true,
2635
webpack(config) {
2736
const fileLoaderRule = config.module.rules.find((rule) =>

‎frontend/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"get-data": "ts-node ./src/script/generateData.ts",
99
"deploy": "netlify deploy --build --prod",
1010
"trigger-deploy": "ts-node ./src/script/triggerDeploy.ts",
11-
"prepare": "npm run codegen && npm run generate && npm run get-data",
12-
"build": "npm run trigger-deploy && npm run prepare && faust build && npm run sitemap ",
11+
"prepare": "npm run codegen && npm run generate",
12+
"build": "npm run prepare && faust build && npm run sitemap",
1313
"generate": "faust generatePossibleTypes",
1414
"start": "faust start",
1515
"lint": "next lint",

‎frontend/src/components/Gallery/GalleryFullWidth.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import React, {RefObject, useLayoutEffect, useRef} from "react"
2+
3+
import {GalleryBlock} from "@/__generated__/graphql"
4+
5+
import dynamic from "next/dynamic"
6+
import {twMerge} from "tailwind-merge"
7+
import {useRouter} from "next/router"
8+
import {allLowercase} from "@/utils"
9+
10+
const Image = dynamic(() => import("next/image"))
11+
const zoomOut = []
12+
const GalleryFullWidth = ({title, gallery, reverseLayout}: GalleryBlock) => {
13+
const params = useRouter().asPath
14+
const ref = useRef(null)
15+
// const isMobile = useMediaQuery("()")
16+
const scrollTo = (element: RefObject<HTMLDivElement>) => {
17+
if (typeof document === undefined || typeof window === undefined) return
18+
19+
if (element.current) {
20+
const top =
21+
element?.current?.getBoundingClientRect().top + window.pageYOffset - 80
22+
23+
window.scrollTo({top: top, behavior: "smooth"})
24+
}
25+
}
26+
27+
useLayoutEffect(() => {
28+
if (params) {
29+
const pSplit = params.split("#")
30+
let id = pSplit.at(pSplit.length - 1)?.toLowerCase()
31+
// console.log(pSplit);
32+
var fixedstring
33+
34+
try {
35+
// If the string is UTF-8, this will work and not throw an error.
36+
fixedstring = encodeURIComponent(
37+
title?.toLocaleLowerCase().replaceAll(" ", "") || ""
38+
)
39+
} catch (e) {
40+
// If it isn't, an error will be thrown, and we can assume that we have an ISO string.
41+
fixedstring = title?.toLocaleLowerCase().replaceAll(" ", "")
42+
}
43+
id = allLowercase(id || "")
44+
fixedstring = allLowercase(fixedstring || "")
45+
46+
if (
47+
id === fixedstring ||
48+
(id && fixedstring && fixedstring?.includes(id))
49+
) {
50+
scrollTo(ref)
51+
}
52+
}
53+
}, [params])
54+
return (
55+
<div ref={ref} className="relative py-14 md:py-20 lg:pb-24">
56+
<div className="relative">
57+
<div className="container-fluid grid grid-cols-12 gap-5 gap-y-6 lg:gap-6">
58+
{title && <div className="relative col-span-full flex justify-start text-left md:justify-start xl:col-span-3 2xl:col-span-3">
59+
<h2 className="max-w-[579px] whitespace-pre-wrap break-words text-left text-2xl font-bold tracking-tight xl:text-left xl:text-5xl xl:leading-[67px] 2xl:w-[4/5]">
60+
{title}
61+
</h2>
62+
</div>}
63+
<div
64+
className={`col-span-full grid grid-cols-6 gap-5 md:ml-[50px] lg:grid-cols-8 xl:ml-0`}>
65+
{gallery?.map((ele, id) => {
66+
return (
67+
<div
68+
key={id}
69+
className={twMerge(
70+
"col-span-full lg:h-[480px] flex flex-col justify-start gap-3 rounded-[5px] border border-primary-blue-main p-3 sm:col-span-3 sm:p-3 lg:col-span-2 xl:p-5 3xl:p-6 ",
71+
!reverseLayout
72+
? id === 1 || id === 2
73+
? "lg:col-span-5"
74+
: "lg:col-span-3 "
75+
: id === 0 || id === 3
76+
? "lg:col-span-5"
77+
: "lg:col-span-3",
78+
id === 2 && gallery.length < 4 ? "lg:col-span-full" : "",
79+
ele?.textOrImge === "text" &&
80+
"border-none bg-primary-blue-100 text-primary-midBlue-main"
81+
)}>
82+
{ele?.textOrImge === "image" ? (
83+
<>
84+
<div className="relative h-[390px] w-full overflow-hidden">
85+
<div className="relative h-full w-full">
86+
<Image
87+
fill
88+
src={ele?.galleryImage?.node?.sourceUrl || ""}
89+
className="object-cover object-center"
90+
alt="gallery image"
91+
/>
92+
</div>
93+
</div>
94+
<span className="text-2xl font-semibold text-primary-blue-main">
95+
0{id + 1}
96+
</span>
97+
<p className="lg:text-lg xl:text-xl xl:leading-[28px]">
98+
{ele?.imageTitle}
99+
</p>
100+
</>
101+
) : (
102+
<div className="[&>p]:text-lg [&>p]:leading-[24px]">
103+
<h3 className="mb-3 text-xl font-bold text-primary-midBlue-main 2xl:text-2xl">
104+
{ele?.text?.title}
105+
</h3>
106+
<p className="text-base xl:text-lg">
107+
{ele?.text?.content}
108+
</p>
109+
</div>
110+
)}
111+
</div>
112+
)
113+
})}
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
)
119+
}
120+
121+
export default GalleryFullWidth

‎frontend/src/components/Gallery/index.tsx‎

Lines changed: 62 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,16 @@ import dynamic from "next/dynamic"
66
import {twMerge} from "tailwind-merge"
77
import {useRouter} from "next/router"
88
import {allLowercase} from "@/utils"
9+
import Link from "next/link"
10+
import GalleryFullWidth from "./GalleryFullWidth"
911

1012
const Image = dynamic(() => import("next/image"))
11-
const zoomOut = []
12-
const Gallery = ({title, gallery, reverseLayout}: GalleryBlock) => {
13+
const Gallery = ({
14+
title,
15+
gallery,
16+
fullWidthLayout,
17+
reverseLayout,
18+
}: GalleryBlock) => {
1319
const params = useRouter().asPath
1420
const ref = useRef(null)
1521
// const isMobile = useMediaQuery("()")
@@ -51,10 +57,22 @@ const Gallery = ({title, gallery, reverseLayout}: GalleryBlock) => {
5157
}
5258
}
5359
}, [params])
60+
61+
const linkToUri = (link: string) => {
62+
return link.replace("https://www.vulcanus-stahl.de", "")
63+
}
64+
if (fullWidthLayout)
65+
return (
66+
<GalleryFullWidth
67+
title={title}
68+
reverseLayout={reverseLayout}
69+
gallery={gallery}
70+
/>
71+
)
5472
return (
55-
<div ref={ref} className="relative py-14 md:py-20 lg:pb-28">
73+
<div ref={ref} className="relative py-14 md:py-20 lg:pb-24">
5674
<div className="relative">
57-
<img
75+
<Image
5876
src={"/shapes/left-shape.svg"}
5977
width={47}
6078
height={155}
@@ -63,33 +81,51 @@ const Gallery = ({title, gallery, reverseLayout}: GalleryBlock) => {
6381
/>
6482

6583
<div className="container-fluid grid grid-cols-12 gap-5 gap-y-6 lg:gap-6">
66-
<div className="relative col-span-full flex justify-start text-left md:justify-start xl:col-span-3 2xl:col-span-3">
67-
<h2 className="max-w-[579px] whitespace-pre-wrap break-words text-left text-2xl font-bold tracking-tight md:ml-[50px] xl:ml-10 xl:text-left xl:text-2xl 2xl:w-[4/5] 2xl:text-3xl 3xl:text-4xl 3xl:leading-[67px]">
84+
<div className="relative col-span-full flex flex-col justify-start text-left md:justify-start xl:col-span-3 2xl:col-span-3">
85+
<h2 className="max-w-[579px] text-left text-3xl font-bold md:ml-[50px] xl:ml-10 xl:text-left xl:text-5xl xl:leading-[67px] 2xl:w-[4/5]">
6886
{title}
6987
</h2>
88+
<div className="mb-10 md:ml-[50px] xl:mb-0 xl:ml-10">
89+
{gallery?.map((ele, id) => {
90+
if (ele?.textOrImge === "text")
91+
return (
92+
<>
93+
<div className="" key={id}>
94+
<h2 className="mb-8 text-xl font-bold text-primary-blue-200">
95+
{ele?.text?.title}
96+
</h2>
97+
<p className="text-primary-blue-200">
98+
{ele?.text?.content}
99+
</p>
100+
</div>
101+
{ele?.text?.button && (
102+
<Link
103+
href={linkToUri(ele?.text?.button?.url || "/")}
104+
className="fit-content mt-8 inline-flex w-[fit-content] items-center justify-center whitespace-nowrap bg-primary-blue-main px-10 py-[17px] text-center font-bold uppercase leading-[125%] text-secondary-offWhite-white transition-all duration-300 hover:bg-primary-blue-400 lg:px-[60px] xl:mt-16">
105+
{ele?.text?.button?.title}
106+
</Link>
107+
)}
108+
</>
109+
)
110+
})}
111+
</div>
70112
</div>
71113
<div
72114
className={`col-span-full grid grid-cols-6 gap-5 md:ml-[50px] lg:col-span-11 lg:grid-cols-8 xl:col-span-8 xl:col-start-5 xl:ml-0 `}>
73115
{gallery?.map((ele, id) => {
74-
return (
75-
<div
76-
key={id}
77-
className={twMerge(
78-
"col-span-full flex flex-col justify-start gap-3 rounded-[5px] border border-primary-blue-main p-3 sm:col-span-3 sm:p-3 lg:col-span-2 xl:p-5 3xl:p-6 ",
79-
!reverseLayout
80-
? id === 1 || id === 2
81-
? "lg:col-span-5"
82-
: "lg:col-span-3 "
83-
: id === 0 || id === 3
84-
? "lg:col-span-5"
85-
: "lg:col-span-3",
86-
id === 2 && gallery.length < 4 ? "lg:col-span-full" : "",
87-
ele?.textOrImge === "text" &&
88-
"border-none bg-primary-blue-100 text-primary-midBlue-main"
89-
)}>
90-
{ele?.textOrImge === "image" ? (
116+
if (ele?.textOrImge === "image")
117+
return (
118+
<div
119+
key={id}
120+
className={twMerge(
121+
"col-span-full flex flex-col justify-start gap-3 rounded-[5px] border border-primary-blue-main p-3 sm:col-span-3 sm:p-3 lg:col-span-2 xl:p-5 3xl:p-6 ",
122+
id === 0 && "lg:col-span-3",
123+
id === 1 && "lg:col-span-5",
124+
125+
id === 2 && "lg:col-span-8"
126+
)}>
91127
<>
92-
<div className="relative h-[390px] w-full overflow-hidden lg:h-[420px] 2xl:h-[500px] 3xl:h-[550px] ">
128+
<div className="relative h-[352px] w-full overflow-hidden">
93129
<div className="relative h-full w-full">
94130
<Image
95131
fill
@@ -106,18 +142,8 @@ const Gallery = ({title, gallery, reverseLayout}: GalleryBlock) => {
106142
{ele?.imageTitle}
107143
</p>
108144
</>
109-
) : (
110-
<div className="[&>p]:text-lg [&>p]:leading-[24px]">
111-
<h3 className="mb-3 text-xl font-bold text-primary-midBlue-main 2xl:text-2xl">
112-
{ele?.text?.title}
113-
</h3>
114-
<p className="text-base xl:text-lg">
115-
{ele?.text?.content}
116-
</p>
117-
</div>
118-
)}
119-
</div>
120-
)
145+
</div>
146+
)
121147
})}
122148
</div>
123149
</div>

0 commit comments

Comments
 (0)