Skip to content

Commit 2a92276

Browse files
ThomasEgMatthiesenThomasEgMatthiesen
committed
feat: update Info page layout and remove address and CVR details; MAJOR Map component UPDATE with conditional rendering for project info and labels
1 parent 7276d5c commit 2a92276

5 files changed

Lines changed: 92 additions & 29 deletions

File tree

‎src/app/info/page.js‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default function Info() {
3030
</div>
3131
</section>
3232

33-
<section className="flex flex-wrap gap-4 p-2 md:p-4">
33+
<section className="flex flex-col gap-4 p-2 md:p-8">
3434
<div>
3535
<LabelSmall>Email</LabelSmall>
3636
<p className="text-xs md:text-sm font-light pt-1">hej@genhoer.dk</p>
@@ -41,16 +41,6 @@ export default function Info() {
4141
<p className="text-xs md:text-sm font-light pt-1">+45 91 61 10 93</p>
4242
</div>
4343

44-
<div>
45-
<LabelSmall>Adresse</LabelSmall>
46-
<p className="text-xs md:text-sm font-light pt-1">Sofiendalvej 120, 5500 Middelfart</p>
47-
</div>
48-
49-
<div>
50-
<LabelSmall>CVR</LabelSmall>
51-
<p className="text-xs md:text-sm font-light pt-1">44733196</p>
52-
</div>
53-
5444
<div>
5545
<LabelSmall>Sociale medier</LabelSmall>
5646
<div className="flex gap-4 text-xs md:text-sm font-light pt-1">
@@ -65,7 +55,6 @@ export default function Info() {
6555
</a>
6656
</div>
6757
</div>
68-
6958
</section>
7059

7160
<section className="mb-10 md:mb-0 md:p-4 bg-ink text-paper">

‎src/components/Map/Map.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default function Map() {
4141
{isPortrait
4242
? <MapSmall activeProject={activeProject} setActiveProject={setActiveProject} onMarkerNavigate={handleMarkerNavigate} />
4343
: <MapLarge setActiveProject={setActiveProject} onMarkerNavigate={handleMarkerNavigate} />}
44-
<MapInfo project={activeProject} />
44+
{isPortrait && <MapInfo project={activeProject} />}
4545
{isPortrait && <MapControls activeProject={activeProject} setActiveProject={setActiveProject} onMarkerNavigate={handleMarkerNavigate} />}
4646
</Overlay>
4747
);

‎src/components/Map/MapLarge.js‎

Lines changed: 74 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import { useRouter } from "next/navigation";
55
import * as d3 from "d3";
66
import * as topojson from "topojson-client";
77
import { projects } from "@/data/projects";
8+
import { formatDates } from "@/utilities/formatDates"; // NY: bruges til at formatere datoer i label
9+
10+
const ZOOM_SCALE = 4; // NY: udtrukket som konstant (var før en variabel inde i renderMap)
11+
const DEFAULT_LABEL_OFFSET = { x: 60, y: 0 }; // NY: fallback-placering hvis et projekt ikke har labelOffset sat
812

913
export default function MapLarge({ setActiveProject, onMarkerNavigate }) {
1014
const svgRef = useRef(null);
@@ -65,8 +69,6 @@ export default function MapLarge({ setActiveProject, onMarkerNavigate }) {
6569
.attr("stroke-width", .25)
6670
.attr("stroke-opacity", 1);
6771

68-
const zoomScale = 4;
69-
7072
// Draw upcoming markers
7173
const upcomingMarkers = g.selectAll(".upcoming-marker")
7274
.data(upcomingProjects)
@@ -81,31 +83,77 @@ export default function MapLarge({ setActiveProject, onMarkerNavigate }) {
8183
.attr("stroke-width", 2)
8284
.attr("stroke-dasharray", 3.14)
8385

84-
// Draw the finished markers
85-
const finishedMarkers = g.selectAll(".finished-marker")
86+
// NY: cirkel flyttet fra direkte g.selectAll(".finished-marker") ind i en fælles <g> pr. marker,
87+
// så cirkel + label kan style/animeres/håndteres samlet
88+
const finishedGroups = g.selectAll(".finished-marker-group")
8689
.data(finishedProjects)
8790
.enter()
88-
.append("circle")
91+
.append("g")
92+
.attr("class", "finished-marker-group")
93+
.style("cursor", "pointer"); // NY: flyttet hertil fra den gamle .finished-marker selection
94+
95+
// NY: appendes nu på finishedGroups i stedet for direkte på g
96+
const finishedMarkers = finishedGroups.append("circle")
8997
.attr("class", "finished-marker")
9098
.attr("cx", d => projection(d.coordinates)[0])
9199
.attr("cy", d => projection(d.coordinates)[1])
92100
.attr("r", 6)
93101
.attr("fill", "#71717A")
94102
.attr("stroke", "#FAFAFA")
95-
.attr("stroke-width", 2)
96-
.style("cursor", "pointer")
103+
.attr("stroke-width", 2);
104+
105+
// NY: hele denne label-blok er tilføjet fra bunden
106+
// Label-gruppe pr. marker, kontra-skaleret ift. ZOOM_SCALE så teksten forbliver fast størrelse
107+
// uanset hvor meget kortet zoomer ind (transform-skaleringerne ganges sammen til 1)
108+
const finishedLabels = finishedGroups.append("g")
109+
.attr("class", "marker-label")
110+
.attr("transform", d => {
111+
const [x, y] = projection(d.coordinates);
112+
return `translate(${x},${y}) scale(${1 / ZOOM_SCALE})`;
113+
})
114+
.style("opacity", 0) // NY: skjult som udgangspunkt, vises kun ved hover
115+
.style("pointer-events", "none");
116+
117+
// NY: bruger hardcoded offset fra projects.js (d.labelOffset) i stedet for
118+
// automatisk beregnet retning ud fra afstand til kortets centrum
119+
finishedLabels.each(function (d) {
120+
const offset = d.labelOffset ?? DEFAULT_LABEL_OFFSET;
121+
const group = d3.select(this);
122+
123+
group.append("text")
124+
.attr("class", "marker-label-title fill-paper text-xs uppercase") // NY: Tailwind i stedet for .attr("fill"/"font-size"/"font-weight")
125+
.attr("x", offset.x)
126+
.attr("y", offset.y + 6)
127+
.text(d.title);
128+
129+
group.append("text")
130+
.attr("class", "marker-label-location fill-paper text-[0.5rem] uppercase") // NY
131+
.attr("x", offset.x + 1)
132+
.attr("y", offset.y + 20)
133+
.text(d.location);
134+
135+
group.append("text")
136+
.attr("class", "marker-label-date fill-paper text-[0.5rem] uppercase") // NY
137+
.attr("x", offset.x + 1)
138+
.attr("y", offset.y + 32)
139+
.text(formatDates(d.startDate, d.endDate));
140+
});
141+
142+
// NY: event-håndtering flyttet fra finishedMarkers til finishedGroups,
143+
// så både cirkel og label reagerer på samme hover-flade
144+
finishedGroups
97145
.on("mouseenter", function (event, d) {
98146
const [x, y] = projection(d.coordinates);
99-
const [mouseX, mouseY] = d3.pointer(event);
100-
const translateX = mouseX - x * zoomScale;
101-
const translateY = mouseY - y * zoomScale;
147+
const [mouseX, mouseY] = d3.pointer(event, g.node()); // NY: reference ændret fra event til (event, g.node())
148+
const translateX = mouseX - x * ZOOM_SCALE;
149+
const translateY = mouseY - y * ZOOM_SCALE;
102150

103151
setActiveProject(d);
104152

105153
g.transition()
106154
.delay(200)
107155
.duration(500)
108-
.attr("transform", `translate(${translateX},${translateY}) scale(${zoomScale})`);
156+
.attr("transform", `translate(${translateX},${translateY}) scale(${ZOOM_SCALE})`);
109157

110158
g.selectAll("path")
111159
.transition()
@@ -119,17 +167,22 @@ export default function MapLarge({ setActiveProject, onMarkerNavigate }) {
119167
finishedMarkers.transition()
120168
.delay(200)
121169
.duration(500)
122-
.attr("r", r => r === d ? 4 : 0)
170+
.attr("r", p => p === d ? 4 : 0)
123171
.attr("fill", "#27272A")
124172
.attr("stroke-width", 1);
125-
173+
126174
upcomingMarkers.transition()
127175
.delay(200)
128176
.duration(500)
129177
.attr("r", 0)
130178
.attr("stroke-width", 1);
131-
132179

180+
// NY: vis kun label for den markør, der hoveres over
181+
finishedLabels
182+
.transition()
183+
.delay(200)
184+
.duration(300)
185+
.style("opacity", p => p === d ? 1 : 0);
133186
})
134187
.on("mouseleave", function () {
135188
g.transition()
@@ -155,10 +208,16 @@ export default function MapLarge({ setActiveProject, onMarkerNavigate }) {
155208
.attr("r", 6)
156209
.attr("stroke-width", 2);
157210

211+
// NY: skjul label igen ved mouseleave
212+
finishedLabels
213+
.transition()
214+
.duration(150)
215+
.style("opacity", 0);
216+
158217
setActiveProject(null);
159218
})
160219
.on("click", (event, d) => {
161-
onMarkerNavigate?.(); // Fade overlay ved navigation til projektside
220+
onMarkerNavigate?.();
162221
router.push(`/${d.slug}`);
163222
});
164223
};

‎src/components/Overlay.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export default function Overlay({ active, exit = 'slide', children }) {
4646

4747
return (
4848
<article ref={ref} onTransitionEnd={handleTransitionEnd} style={instant ? { transitionDuration: '0ms' } : undefined} className={`fixed inset-0 transition-all duration-300 z-10 ${active ? 'translate-y-0 opacity-100' : closedClasses}`}>
49-
<section className="relative flex justify-center items-center w-screen min-h-svh bg-paper/80 backdrop-blur-md backdrop-grayscale">
49+
<section className="relative flex justify-center items-center w-screen min-h-svh bg-paper">
5050
{children}
5151
</section>
5252
</article>

‎src/data/projects.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const projects = [
44
title: 'Kolding',
55
location: 'Kolding, Kolding Kommune',
66
coordinates: [9.4776, 55.4899],
7+
labelOffset: { x: 130, y: 60 },
78
komkode: '0621',
89
startDate: '2026-11-13',
910
endDate: '2026-12-18',
@@ -27,6 +28,7 @@ export const projects = [
2728
title: 'Næstved',
2829
location: 'Næstved, Næstved Kommune',
2930
coordinates: [11.7489, 55.2231],
31+
labelOffset: { x: 130, y: 60 },
3032
komkode: '0370',
3133
startDate: '2026-11-04',
3234
endDate: '2026-12-18',
@@ -50,6 +52,7 @@ export const projects = [
5052
title: 'Nakskov',
5153
location: 'Nakskov, Lolland Kommune',
5254
coordinates: [11.1381, 54.8297],
55+
labelOffset: { x: 130, y: 60 },
5356
komkode: '0360',
5457
startDate: '2026-10-08',
5558
endDate: '2026-12-03',
@@ -73,6 +76,7 @@ export const projects = [
7376
title: 'Viborg',
7477
location: 'Viborg, Viborg Kommune',
7578
coordinates: [9.4061, 56.4494],
79+
labelOffset: { x: 130, y: 60 },
7680
komkode: '0791',
7781
startDate: '2026-09-10',
7882
endDate: '2026-11-30',
@@ -96,6 +100,7 @@ export const projects = [
96100
title: 'Hvide Sande',
97101
location: 'Hvide Sande, Ringkøbing-Skjern Kommune',
98102
coordinates: [8.1308, 56.0084],
103+
labelOffset: { x: 130, y: 60 },
99104
komkode: '0760',
100105
startDate: '2026-08-04',
101106
endDate: '2026-09-26', // skift til null på et tidspunkt, så står der permanent installation
@@ -119,6 +124,7 @@ export const projects = [
119124
title: 'Troldetoner',
120125
location: 'Esterhøj, Odsherred Kommune',
121126
coordinates: [11.4840, 55.8361],
127+
labelOffset: { x: 130, y: 0 },
122128
komkode: '0306',
123129
startDate: '2026-06-24',
124130
endDate: '2026-07-31',
@@ -143,6 +149,7 @@ export const projects = [
143149
title: 'Kanon i G3',
144150
location: 'Kanonstilling G3, Bornholms Regionskommune',
145151
coordinates: [15.0806, 55.0009],
152+
labelOffset: { x: -320, y: 0 },
146153
komkode: '0400',
147154
startDate: '2026-05-30',
148155
endDate: '2026-09-28',
@@ -167,6 +174,7 @@ export const projects = [
167174
title: 'Under overfladen',
168175
location: 'Huset, Esbjerg Kommune',
169176
coordinates: [8.4554, 55.4694],
177+
labelOffset: { x: 220, y: 0 },
170178
komkode: '0561',
171179
startDate: '2026-03-31',
172180
endDate: '2026-07-31',
@@ -191,6 +199,7 @@ export const projects = [
191199
title: 'Bülows Kaserne',
192200
location: 'Kulturkasernen, Fredericia Kommune',
193201
coordinates: [9.7482, 55.5657],
202+
labelOffset: { x: 60, y: 0 },
194203
komkode: '0607',
195204
startDate: '2025-11-07',
196205
endDate: '2025-12-19',
@@ -230,6 +239,7 @@ export const projects = [
230239
title: 'Kirkestræde',
231240
location: 'Kirkestræde, Køge Kommune',
232241
coordinates: [12.1821, 55.4561],
242+
labelOffset: { x: 40, y: 0 },
233243
komkode: '0259',
234244
startDate: '2025-10-11',
235245
endDate: '2025-11-22',
@@ -261,6 +271,7 @@ export const projects = [
261271
title: 'Unge stemmer',
262272
location: 'Gangtunnelen, Holbæk Kommune',
263273
coordinates: [11.7167, 55.7167],
274+
labelOffset: { x: 80, y: 20 },
264275
komkode: '0316',
265276
startDate: '2025-10-04',
266277
endDate: '2025-11-28',
@@ -297,6 +308,7 @@ export const projects = [
297308
title: 'Vi vokser og flytter os',
298309
location: 'Slagteribygningen, Faaborg-Midtfyn Kommune',
299310
coordinates: [10.2394, 55.0958],
311+
labelOffset: { x: 100, y: 0 },
300312
komkode: '0430',
301313
startDate: '2025-06-20',
302314
endDate: '2025-09-27',
@@ -328,6 +340,7 @@ export const projects = [
328340
title: 'Slotsgade 20',
329341
location: 'Ehlers Samlingen, Haderslev Kommune',
330342
coordinates: [9.4891, 55.2493],
343+
labelOffset: { x: 140, y: 0 },
331344
komkode: '0510',
332345
startDate: '2025-06-19',
333346
endDate: '2025-08-01',
@@ -358,6 +371,7 @@ export const projects = [
358371
title: 'Vordingborg Station',
359372
location: 'Vordingborg Station, Vordingborg Kommune',
360373
coordinates: [11.9167, 55.0167],
374+
labelOffset: { x: -300, y: 0 },
361375
komkode: '0390',
362376
startDate: '2025-04-05',
363377
endDate: '2025-09-06',
@@ -392,6 +406,7 @@ export const projects = [
392406
title: 'Grindsted Station',
393407
location: 'Grindsted Station, Billund Kommune',
394408
coordinates: [8.9222, 55.7579],
409+
labelOffset: { x: 130, y: 0 },
395410
komkode: '0530',
396411
startDate: '2024-06-14',
397412
endDate: '2024-10-31',

0 commit comments

Comments
 (0)