TudorandClaude Opus 4.8
d4d9ae5252
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 14s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 52s
Build and Push Docker Images / Build Pipeline (Meltano + dbt + Airflow) (push) Successful in 13s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s
Replace the header's at-a-glance stats row with a location map that sits atop the hero and blends into the school title. The map is a static, non-interactive preview (never traps page scroll) with a coral pin; the whole band — or the inline "View on map ↗" link by the address — opens a fullscreen, interactive map. Compare floats glassy over the band. The separate "Location" section (and its nav item) is removed; the map now lives only in the hero. Schools without lat/long render the header with no map band, as before. New: SchoolHeroMap (fullscreen wrapper, forwardRef open handle) + LeafletHeroMapInner (minimal single-school map with interaction toggle). Applied to both primary and secondary detail views; dead heroStats/tone/ mapContainer CSS removed (shared .heroStat* card classes kept). Also drops the orphaned "Latest data" note and does not reintroduce an Ofsted strip in the hero (it would duplicate the Ofsted section directly below). Mockup kept at mockups/header-map-hero.html. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
78 lines
2.8 KiB
TypeScript
78 lines
2.8 KiB
TypeScript
/**
|
|
* SchoolHeroMap
|
|
* The location map that sits atop the school-detail hero. Shows a static
|
|
* preview (pin + tiles) that blends down into the title; the whole band — or
|
|
* the parent's "View on map" link, via the imperative `open()` handle — expands
|
|
* it to a fullscreen, interactive map.
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
import styles from './SchoolHeroMap.module.css';
|
|
|
|
const LeafletHeroMap = dynamic(() => import('./LeafletHeroMapInner'), {
|
|
ssr: false,
|
|
loading: () => <div className={styles.skeleton} aria-hidden="true" />,
|
|
});
|
|
|
|
export interface SchoolHeroMapHandle {
|
|
open: () => void;
|
|
}
|
|
|
|
interface SchoolHeroMapProps {
|
|
lat: number;
|
|
lng: number;
|
|
}
|
|
|
|
export const SchoolHeroMap = forwardRef<SchoolHeroMapHandle, SchoolHeroMapProps>(
|
|
function SchoolHeroMap({ lat, lng }, ref) {
|
|
const wrapperRef = useRef<HTMLDivElement>(null);
|
|
const [isFullscreen, setIsFullscreen] = useState(false);
|
|
|
|
const open = useCallback(() => {
|
|
wrapperRef.current?.requestFullscreen?.().catch(() => {});
|
|
}, []);
|
|
const close = useCallback(() => {
|
|
if (document.fullscreenElement) document.exitFullscreen().catch(() => {});
|
|
}, []);
|
|
|
|
useImperativeHandle(ref, () => ({ open }), [open]);
|
|
|
|
useEffect(() => {
|
|
const onChange = () => setIsFullscreen(!!document.fullscreenElement);
|
|
document.addEventListener('fullscreenchange', onChange);
|
|
return () => document.removeEventListener('fullscreenchange', onChange);
|
|
}, []);
|
|
|
|
return (
|
|
<div ref={wrapperRef} className={styles.wrapper} data-fullscreen={isFullscreen || undefined}>
|
|
<LeafletHeroMap lat={lat} lng={lng} interactive={isFullscreen} />
|
|
|
|
{isFullscreen ? (
|
|
<button type="button" className={styles.closeBtn} onClick={close} aria-label="Close map">
|
|
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M18 6 6 18M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
) : (
|
|
<>
|
|
{/* Whole-band click target that opens the full map. */}
|
|
<button type="button" className={styles.openBtn} onClick={open} aria-label="Open full map">
|
|
<span className={styles.openHint}>
|
|
<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7" />
|
|
</svg>
|
|
Open full map
|
|
</span>
|
|
</button>
|
|
{/* Diffuse blend into the hero body below. */}
|
|
<div className={styles.fade} aria-hidden="true" />
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
},
|
|
);
|