From e3c00b38a774f3615bfe99a91b11141c2fac1596 Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Wed, 18 Dec 2024 15:56:41 +0100 Subject: [PATCH 1/8] Fix: Scroll Bar can't receive event --- .../components/Aside/Aside.styles.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx index 3bcc24f7c..f44c464b2 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx @@ -99,6 +99,7 @@ export const AsideWrapper = styled.div<{ overflow-x: hidden; overflow-y: auto; scroll-snap-type: x mandatory; + pointer-events: auto; ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 8rem;`}; } From c388679727bdcc09db3f564adda3a7f1520fc12b Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Wed, 18 Dec 2024 22:12:34 +0100 Subject: [PATCH 2/8] Update Map Popup Style --- .../ban-map/Popups/ParcellesList.styles.tsx | 20 ------ .../ban-map/Popups/ParcellesList.tsx | 23 ------ .../ban-map/Popups/PlotsList.styles.tsx | 33 +++++++++ .../components/ban-map/Popups/PlotsList.tsx | 33 +++++++++ .../ban-map/Popups/Popups.styles.tsx | 72 +++++++++++++------ .../components/ban-map/Popups/Popups.tsx | 54 +++++++++----- 6 files changed, 150 insertions(+), 85 deletions(-) delete mode 100644 src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.styles.tsx delete mode 100644 src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.tsx create mode 100644 src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.styles.tsx create mode 100644 src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.tsx diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.styles.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.styles.tsx deleted file mode 100644 index f93e2b68c..000000000 --- a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.styles.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client' - -import styled from 'styled-components' - -import theme from '@/theme' - -export const ParcellesWrapper = styled.div` - display: flex; - justify-content: space-between; - flex-flow: wrap; -` - -export const Parcelle = styled.div` - padding: 0 8px; - margin: 2px 4px; - background-color: ${theme.colors.primary.bg}; - color: ${theme.colors.primary.main}; - border-radius: 4px; - font-weight: 600; -` diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.tsx deleted file mode 100644 index 0a633a5c4..000000000 --- a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/ParcellesList.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ParcellesWrapper, Parcelle } from './ParcellesList.styles' - -interface ParcellesListProps { - parcelles: string[] -} - -function ParcellesList({ parcelles }: ParcellesListProps) { - return ( -
- {parcelles.length > 0 - ? ( - - {parcelles.map(parcelle => ( - {parcelle} - ))} - - ) - : 'Aucune parcelle cadastrale n’est référencée'} -
- ) -} - -export default ParcellesList diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.styles.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.styles.tsx new file mode 100644 index 000000000..25adfabba --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.styles.tsx @@ -0,0 +1,33 @@ +'use client' + +import styled from 'styled-components' + +export const PlotsListTitle = styled.b` + font-size: 1em; + font-weight: 700; + margin: 1em 0 .5em; + display: block; +` + +export const PlotsListWrapper = styled.div` + display: flex; + justify-content: space-between; + flex-flow: wrap; +` + +export const Plot = styled.div` + padding: 0 8px; + margin: 2px 4px; + background-color: var(--background-alt-blue-france); + color: var(--text-action-high-blue-france); + border-radius: 4px; + font-size: 0.875rem; + font-weight: 600; +` + +export const PlotsRest = styled.div` + padding: 0 8px; + margin: 2px 4px; + font-size: 0.875rem; + font-weight: 600; +` diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.tsx new file mode 100644 index 000000000..c07c8ebd7 --- /dev/null +++ b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/PlotsList.tsx @@ -0,0 +1,33 @@ +import { PlotsListTitle, PlotsListWrapper, Plot, PlotsRest } from './PlotsList.styles' + +interface ParcellesListProps { + plots: string[] +} + +function PlotsList({ plots = [] }: ParcellesListProps) { + const plotLlimit = 5 + const plotsSubList = plots.slice(0, plotLlimit) + const plotsRest = plots.length > plotLlimit ? plots.length - plotLlimit : 0 + + return ( +
+ {plots.length > 0 + ? ( + <> + {plots.length} {plots.length > 1 ? 'Parcelles cadastrales' : 'Parcelle cadastrale'} + + {plotsSubList.map(parcelle => ( + {parcelle} + ))} + {plotsRest > 0 && ( + ... et {plotsRest} {plotsRest > 1 ? 'autres parcelles' : 'autre parcelle'}. + )} + + + ) + : 'Aucune parcelle cadastrale n’est référencée'} +
+ ) +} + +export default PlotsList diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.styles.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.styles.tsx index ad2a0d441..0938573ce 100644 --- a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.styles.tsx @@ -2,23 +2,52 @@ import styled from 'styled-components' -const colors = { - almostBlack: '#26353f', - blue: '#0053B3', -} - export const PopupWrapper = styled.div` + margin: .5rem 0; .heading { - display: grid; - grid-template-columns: 3fr 1fr; - grid-gap: .5em; align-items: flex-start; + margin: .5rem 0; } - .commune { - font-style: italic; - color: ${colors.almostBlack}; + .addr-num { + font-weight: 300; + font-size: 1.5em; + line-height: 1; + + &.with-suffix { + display: block; + } + + .addr-num-suffix { + font-size: .75em; + vertical-align: top; + margin-left: .15em; + } +} + .addr-main-topo { + font-weight: 700; + } + .addr-secondary-topo { + font-weight: 300; + font-size: .8em; + } + .addr-district { + margin-top: .25em; + font-weight: 500; + font-size: .9em; + + .addr-district-prefix { + display: block; + font-weight: 300; + font-size: .8em; + line-height: 1.25; + } + + .addr-district-cog-prefix { + font-size: 0.8em; + letter-spacing: 0.05em; + } } .infos-container { @@ -29,7 +58,7 @@ export const PopupWrapper = styled.div` .separator { width: 0px; - border: 1px solid ${colors.blue}; + border: 1px solid var(--text-action-high-blue-france); } .infos { @@ -40,17 +69,14 @@ export const PopupWrapper = styled.div` ` export const PopupVoieWrapper = styled(PopupWrapper)` -.heading { - display: grid; - grid-template-columns: 3fr 1fr; - grid-gap: .5em; - margin-bottom: 1em; -} - -.address { - display: flex; - flex-direction: column; -} + .toponym-desc { + display: block; + border-top: 1px solid var(--border-plain-grey); + margin: 0.7em 0 0; + padding: 0.7em 0; + font-size: .9em; + font-weight: 300; + } ` export const BadgeIcon = styled.span` diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx index 88c6fb473..07514c3df 100644 --- a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx +++ b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx @@ -1,4 +1,4 @@ -import ParcellesList from './ParcellesList' +import PlotsList from './PlotsList' import { PopupWrapper, @@ -51,17 +51,29 @@ function PopupNumero(properties: PropsPopupNumero) { certifie, } = properties + console.log('properties >>>', properties) + return (
- {numero}{suffixe} {nomVoie} +
+ + {numero} + {suffixe && {suffixe}} + {' '} + + {nomVoie} +
+ { + lieuDitComplementNom && ( +
{lieuDitComplementNom}{', '}
+ ) + } +
+ Commune de + {nomCommune} - (COG {codeCommune}) +
- { - lieuDitComplementNom && ( -

{lieuDitComplementNom}

- ) - } -
{nomCommune} - (COG {codeCommune})
@@ -74,28 +86,32 @@ function PopupNumero(properties: PropsPopupNumero) {
- {parcelles && } + {parcelles && } ) } -function PopupVoie({ nomVoie, nomCommune, codeCommune, parcelles, nbNumeros, type }: PorpsPopupVoie) { +function PopupVoie({ nomVoie, nomCommune, codeCommune, parcelles, nbNumeros }: PorpsPopupVoie) { return (
-
-
{nomVoie}
-
{nomCommune} {codeCommune}
-
-
+
{nomVoie}
+
+ Commune de + {nomCommune} - (COG {codeCommune})
+
- {parcelles && } + {parcelles && } - {nbNumeros && ( -
Cette voie contient {nbNumeros} numéro{nbNumeros > 1 ? 's' : ''}
- )} +
+ { + nbNumeros + ? <>{nbNumeros} {nbNumeros > 1 ? 'adresses' : 'adresse'} sur cet odonyme + : <>Odonyme sans adresse + } +
) } From c38748e456a1c3270b966921e6e52e61260a0a7d Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Wed, 18 Dec 2024 22:13:20 +0100 Subject: [PATCH 3/8] Fix: Postal Code have not good size for departement 01 to 09. --- .../components/PanelAddress/PanelAddressHeader.tsx | 2 +- .../components/PanelDistrict/PanelDistrict.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx index 72cb5e9ce..546172354 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx @@ -52,7 +52,7 @@ function AddressCard({ address }: AddressCardProps) { {address?.lieuDitComplementNom && ({address?.lieuDitComplementNom},)} - CP {formatNumber(address.codePostal)} + CP {formatNumber(address.codePostal).padStart(6, '0')} {address.nomAncienneCommune && address.nomAncienneCommune !== district.nom && address.codeAncienneCommune diff --git a/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrict.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrict.tsx index a58370af2..b34ec8662 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrict.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrict.tsx @@ -35,7 +35,7 @@ function PanelDistrict({ district }: PanelDistrictProps) { ? <>{formatNumber(district.codesPostaux.length)} codes Postaux : <>{district.codesPostaux.length || 'Aucune'} code Postal }{' '} - ({district.codesPostaux.map(formatNumber).join(', ')}) + ({district.codesPostaux.map(cp => formatNumber(cp).padStart(6, '0')).join(', ')})
From 2fe6aa4cce17e0071b7a4495d18a5363720bc6d2 Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Thu, 19 Dec 2024 13:55:08 +0100 Subject: [PATCH 4/8] Map: Add auto-scroll top for aside panel on page transition --- .../components/Aside/Aside.tsx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx index 7f8042e91..9deb1c495 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/Aside.tsx @@ -1,3 +1,5 @@ +import { useCallback, useEffect, useRef } from 'react' + import AsideHeader from './AsideHeader' import { @@ -40,6 +42,20 @@ function Aside({ isOpen = true, isInfo, }: AsideProps | AsideInfoProps) { + const asideWrapperRef = useRef(null) + const asideBodyRef = useRef(null) + + const onTargetClick = useCallback(() => { + asideWrapperRef.current?.scrollTo(0, 0) + }, []) + + useEffect(() => { + if (path) { + asideWrapperRef.current?.scrollTo(0, 0) + asideBodyRef.current?.scrollTo(0, 0) + } + }, [path]) + const withTogglerButton = Boolean(onClickToggler) return ( @@ -48,6 +64,7 @@ function Aside({ $isVisible={Boolean(children)} $withTogglerButton={withTogglerButton} $isTypeInfo={isInfo} + ref={asideWrapperRef} > {withTogglerButton && ( @@ -65,7 +82,7 @@ function Aside({ )}
-
+
{header && ( {header} @@ -79,9 +96,15 @@ function Aside({ {children} )} + + {footer && ( + + {footer} + + )}
{footer && ( - + {footer} )} From 849a7b1c0eb1ffbf97c831d280145e953d73b34a Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Thu, 19 Dec 2024 14:48:43 +0100 Subject: [PATCH 5/8] Map Panel & PopUp : Multiple fix - Add Certification Icon - Fix: Certification icons are differents in many zone - Fix: In panel, Footer zone can hide body content - Map PopUp Content style --- .../components/Aside/Aside.styles.tsx | 26 ++- .../components/Aside/AsideHeader.styles.tsx | 1 + .../DistrictLink/DistrictLink.styles.tsx | 2 +- .../components/DistrictLink/DistrictLink.tsx | 4 +- .../PanelAddress/PanelAddress.styles.tsx | 74 ++++++++- .../components/PanelAddress/PanelAddress.tsx | 7 +- .../PanelAddressHeader.styles.tsx | 153 +++++++++++++++++- .../PanelAddress/PanelAddressHeader.tsx | 98 ++++++----- .../PanelMicroToponymAddressList.tsx | 6 +- .../components/PanelStyles/PanelStyles.tsx | 2 + .../components/ban-map/Popups/Popups.tsx | 18 +-- .../layout.styles.tsx | 17 ++ .../page.styles.tsx | 1 - src/app/layout.styles.tsx | 1 + 14 files changed, 342 insertions(+), 68 deletions(-) diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx index f44c464b2..a7ff8c8df 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx @@ -93,15 +93,14 @@ export const AsideWrapper = styled.div<{ } .body { + display:flex; + flex-direction: column; justify-content: flex-start; height: 100%; - padding-bottom: 8rem; - overflow-x: hidden; - overflow-y: auto; scroll-snap-type: x mandatory; pointer-events: auto; - ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 8rem;`}; + ${({ $isTypeInfo }) => $isTypeInfo && css`padding-top: 8rem;`} } } ` @@ -214,11 +213,16 @@ export const AsideWrapperTogglerButton = styled.button.attrs<{ $isOpen: boolean ` export const AsideBody = styled.div` + flex: 1 1 auto; background: var(--background-default-grey); pointer-events: auto; ` -export const AsideFooter = styled.footer` +export const AsideFooter = styled.footer<{ + $onTargetClick?: () => void + $isForLargeScreen?: boolean + $isForSmallScreen?: boolean +}>` position: sticky; z-index: 1; bottom: 0; @@ -229,4 +233,16 @@ export const AsideFooter = styled.footer` box-shadow: 0 0 .5rem -0.125rem rgba(0, 0, 0, 0.7); background: var(--background-default-grey); pointer-events: auto; + + ${({ $isForSmallScreen }) => $isForSmallScreen && css` + @media (min-width: ${({ theme }) => theme.breakpoints.md}) { + display: none; + } + `} + + ${({ $isForLargeScreen }) => $isForLargeScreen && css` + @media (max-width: ${({ theme }) => theme.breakpoints.md}) { + visibility: hidden; + } + `} ` diff --git a/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx index da301a99e..bd0dc5d53 100644 --- a/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx @@ -8,6 +8,7 @@ export const AsideHeader = styled.div` flex-direction: column-reverse; overflow: hidden; width: 100%; + min-height: fit-content; padding: 0 1rem 1rem; font-size: 1rem; transform: translateY(-100%); diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx index 45ec43274..e9bb61cc9 100644 --- a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx @@ -6,7 +6,7 @@ import Link from 'next/link' export const DistrictLinkWrapper = styled.span` position: relative; font-size: 1em; - display: inline-flex; + display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx index 59eb0c031..a3e43f678 100644 --- a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx +++ b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx @@ -1,3 +1,5 @@ +import { type ReactNode } from 'react' + import { DistrictLinkWrapper, DistrictName, @@ -10,7 +12,7 @@ interface District { } interface DistrictLinkProps { - children?: React.ReactNode + children?: ReactNode district: District } diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx index 6eadd9d54..7c948b394 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx @@ -19,6 +19,19 @@ const AddressDetailsItemStyle = styled.li` font-size: 1.1em; } + &.isSuccessful { + color: var(--text-default-success); + } + + &.isBAL { + color: var(--text-label-blue-france); + } + + &.isIsolated { + margin-top: 1rem; + margin-bottom: 1rem; + } + &::before { margin-right: 0.5em; width: 1.25em; @@ -40,14 +53,67 @@ export const AddressDetailsItem = ({ children, ...props }: AddressDetailsItemPro ) interface AddressDetailsCertificationProps extends React.HTMLAttributes { - children: React.ReactNode isCertified: boolean } -export const AddressDetailsCertification = ({ children, isCertified, ...props }: AddressDetailsCertificationProps) => ( - +const AddressDetailsDesc = styled.div` + display: block; + font-size: 0.9em; + font-style: italic; + line-height: 1.5rem; + padding-right: 1em; + color: var(--text-mention-grey); +` + +export const AddressDetailsCertification = ({ isCertified, className, ...props }: AddressDetailsCertificationProps) => ( +
- {children} + {isCertified ? `Cette adresse est certifiée` : 'Cette adresse n’est pas certifiée'} + + Une adresse certifiée indique que la commune a validé l’exactitude des informations de l’adresse. + +
+ +) + +interface AddressDetailsOriginProps extends React.HTMLAttributes { + origin: string +} + +export const AddressDetailsOrigin = ({ origin, className, ...props }: AddressDetailsOriginProps) => ( + +
+ {origin === 'bal' + ? ( + <> + Cette adresse est issue d’une Base Adresse Locale (BAL) + + Les Base Adresse Locale (BAL) sont directement produites par les communes. + + + ) + : ( + <> + Cette adresse à été produite par l’IGN à partir de sources diverses + + La commune n’a pas encore produit de Base Adresse Locale (BAL). + + + )}
) diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx index 921bdb991..e4513c471 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx @@ -2,6 +2,7 @@ import { AddressDetailsItemValue, AddressDetailsWrapper, AddressDetailsItem, + AddressDetailsOrigin, AddressDetailsCertification, } from './PanelAddress.styles' @@ -47,9 +48,9 @@ function PanelAddress({ address }: PanelAddressProps) { return ( - - {address.certifie ? `Adresse certifiée` : 'Adresse non certifiée'} - + + + Identifiant BAN :
diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.styles.tsx index 2c61d9e4d..5324514e9 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.styles.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.styles.tsx @@ -2,8 +2,141 @@ import styled, { css } from 'styled-components' -export const AddressLabelWrapper = styled.div` +export const BadgeWrapper = styled.div` + font-size: 0.6em; + float: right; + margin: 0.5em; +` + +export const Badge = styled.div` + --size: 3.75em; + --border-size: 0.35em; + + --color-gradient-from: #aaa; + --color-gradient-to: #ddd; + --color: #ccc; + --color-contrast: #222; + + &.green { + --color-gradient-from: var(--background-contrast-success-hover); + --color-gradient-to: var(--background-contrast-success); + --color: var(--background-contrast-success-active); + --color-contrast: var(--text-default-success); + } + + position: relative; + font-size: 1em; + margin: 0em 1.6em; + width: 4em; + height: 6.2em; + border-radius: 10px; + display: inline-block; + top: 0; + background: linear-gradient(to bottom right, var(--color-gradient-from) 0%, var(--color-gradient-to) 100%); + color: var(--color); + + &:before, + &:after { + position: absolute; + width: inherit; + height: inherit; + border-radius: inherit; + background: inherit; + content: ""; + inset: 0; + margin: auto; + } + + &:before { + transform: rotate(60deg); + } + + &:after { + transform: rotate(-60deg); + } + + .circle { + width: calc(var(--size) + var(--border-size)); + height: calc(var(--size) + var(--border-size)); + position: absolute; + background: #fff; + z-index: 10; + border-radius: 50%; + border: var(--border-size) solid var(--color-contrast); + + display: flex; + align-items: center; + justify-content: center; + + inset: 0; + margin: auto; + + i { + font-size: 2.25em; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + + &::before { + flex: 0 0 auto; + display: inline-block; + vertical-align: calc((0.75em - var(--icon-size))* 0.5); + background-color: currentColor; + width: 80%; + height: 100%; + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + } + &::after {} + } + } + + .font { + display: inline-block; + margin-top: 1em; + } + + .ribbon { + position: absolute; + border-radius: 0.35em; + padding: 0.5em; + z-index: 11; + color: #fff; + bottom: 0.8em; + left: -2.25em; + right: -2.25em; + text-align: center; + height: 2.25em; + font-size: 0.6em; + font-weight: 700; + text-transform: uppercase; + box-shadow: 0 0 1.3em -0.5em rgba(0,0,0,0.27); + background-color: var(--color-gradient-to); + background-image: linear-gradient(to bottom, var(--color-gradient-from) 0%, transparent 70%); + color: var(--color-contrast); + cursor: default; + + span { + font-size: 1.5em; + line-height: 1; + } + } +` + +export const AddressLabelWrapper = styled.div<{ $isCertified: boolean }>` + position: relative; + display: block; + flex: 1; font-size: 1rem; + + &::after { + content: ''; + display: block; + height: 0; + clear: both; + } ` export const AddressNumber = styled.span` @@ -21,3 +154,21 @@ export const AddressMicroTopoLabel = styled.span<{ $isOnNewLine: boolean }>` font-size: 1em; ${({ $isOnNewLine }) => $isOnNewLine && css`display: block;`} ` + +export const AddressParentsWrapper = styled.div` + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; +` + +export const AddressParents = styled.div` + display: flex; + flex-direction: column; + flex: 1; +` + +export const AddressCertification = styled.div` + align-self: flex-end; + justify-self: flex-end; +` diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx index 546172354..d0366e6a4 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.tsx @@ -15,6 +15,11 @@ import { AddressNumber, AddressNumberSuffix, AddressMicroTopoLabel, + AddressParentsWrapper, + AddressParents, + AddressCertification, + BadgeWrapper, + Badge, } from './PanelAddressHeader.styles' import type { TypeAddressExtended } from '../../types/LegacyBan.types' @@ -28,48 +33,63 @@ function AddressCard({ address }: AddressCardProps) { const microToponym = address.voie return ( - <> - - - {(address.numero || address.suffixe) && ( - <> - - {address.numero ? `${address.numero}` : ''} - {address.suffixe && {address.suffixe}} - - {' '} - - )} - - {microToponym.nomVoie}, - - {microToponym?.nomVoieAlt && Object.entries(microToponym.nomVoieAlt).map(([lang, odonyme]) => ( - - {' '} - {odonyme} - - ))} - {address?.lieuDitComplementNom && ({address?.lieuDitComplementNom},)} - + + + {(address.numero || address.suffixe) && ( + <> + + {address.numero ? `${address.numero}` : ''} + {address.suffixe && {address.suffixe}} + + {' '} + + )} + + {microToponym.nomVoie}, + + {microToponym?.nomVoieAlt && Object.entries(microToponym.nomVoieAlt).map(([lang, odonyme]) => ( + + {' '} + {odonyme} + + ))} + {address?.lieuDitComplementNom && ({address?.lieuDitComplementNom},)} + - CP {formatNumber(address.codePostal).padStart(6, '0')} + + + CP {formatNumber(address.codePostal).padStart(6, '0')} - - {address.nomAncienneCommune && address.nomAncienneCommune !== district.nom && address.codeAncienneCommune - ? ( - <> - Commune historique de - {address.nomAncienneCommune} - - ) - : ( - Commune de - )} - {district.nom} - + + {address.nomAncienneCommune && address.nomAncienneCommune !== district.nom && address.codeAncienneCommune + ? ( + <> + Commune historique de + {address.nomAncienneCommune} + + ) + : ( + Commune de + )} + {district.nom} + + + { + address.certifie && ( + + + +
+
Certifiée
+ + + + ) + } - - + + + ) } diff --git a/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx index 748b3e4b8..a42eec61d 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelMicroToponym/PanelMicroToponymAddressList.tsx @@ -142,14 +142,14 @@ function PanelMicroToponymAddressList({ microToponym }: PanelMicroToponymAddress address?.certifie ? ( ) : ( diff --git a/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx b/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx index 5f7f62eca..4d8101a16 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelStyles/PanelStyles.tsx @@ -69,6 +69,8 @@ export const PanelDistrictLabelPrefix = styled.span` ` const PanelDistrictCogPrefix = styled.span` + white-space: nowrap; + &::before { content: 'COG '; font-size: 0.8em; diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx index 07514c3df..b62592503 100644 --- a/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx +++ b/src/app/carte-base-adresse-nationale/components/ban-map/Popups/Popups.tsx @@ -51,8 +51,6 @@ function PopupNumero(properties: PropsPopupNumero) { certifie, } = properties - console.log('properties >>>', properties) - return (
@@ -77,11 +75,11 @@ function PopupNumero(properties: PropsPopupNumero) {
- + {sourcePosition === 'bal' ? 'BAL' : 'Assemblage IGN'} {' '} - + {certifie ? 'Certifiée' : 'Non certifiée'}
@@ -105,12 +103,12 @@ function PopupVoie({ nomVoie, nomCommune, codeCommune, parcelles, nbNumeros }: P {parcelles && } -
- { - nbNumeros - ? <>{nbNumeros} {nbNumeros > 1 ? 'adresses' : 'adresse'} sur cet odonyme - : <>Odonyme sans adresse - } +
+ { + nbNumeros + ? <>{nbNumeros} {nbNumeros > 1 ? 'adresses' : 'adresse'} sur cet odonyme + : <>Odonyme sans adresse + }
) diff --git a/src/app/carte-base-adresse-nationale/layout.styles.tsx b/src/app/carte-base-adresse-nationale/layout.styles.tsx index 908296d04..3a342d687 100644 --- a/src/app/carte-base-adresse-nationale/layout.styles.tsx +++ b/src/app/carte-base-adresse-nationale/layout.styles.tsx @@ -46,6 +46,23 @@ export const CartoWrapper = styled.div` box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.5) inset; pointer-events: none; } + + // --------------------------------- + // --- Fix for MaplibreGL styles --- + // --------------------------------- + + .maplibregl-map{ + font:1rem/1.5 "Marianne", arial, sans-serif; + } + .maplibregl-popup-content { + background: var(--background-default-grey); + border-radius: 0.5rem; + padding: 0.75rem + } + + .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { + border-top-color: var(--background-default-grey); + } ` export const CartoMenu = styled.div` diff --git a/src/app/carte-base-adresse-nationale/page.styles.tsx b/src/app/carte-base-adresse-nationale/page.styles.tsx index c4d45624d..2c831f133 100644 --- a/src/app/carte-base-adresse-nationale/page.styles.tsx +++ b/src/app/carte-base-adresse-nationale/page.styles.tsx @@ -3,7 +3,6 @@ import styled from 'styled-components' export const MapSearchResultsWrapper = styled.div` - min-height: 200%; padding: 1rem; scroll-snap-align: start; diff --git a/src/app/layout.styles.tsx b/src/app/layout.styles.tsx index 04e4814e1..bd85d6911 100644 --- a/src/app/layout.styles.tsx +++ b/src/app/layout.styles.tsx @@ -12,4 +12,5 @@ export const PageWrapper = styled.div` display: flex; flex-direction: column; height: 100%; + overflow: auto; ` From f208c3b8a0c8f30391f1a9a721376dfdc417a8cd Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Thu, 19 Dec 2024 14:50:04 +0100 Subject: [PATCH 6/8] Map : Wording Quick Fix - "Voies place et lieux-dits" for "Odonyme" - "Source IGN" on legend --- .../PanelDistrict/PanelDistrictMicroToponymList.tsx | 4 +++- src/app/carte-base-adresse-nationale/layout.tsx | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx index aae40ee63..f39de0eb3 100644 --- a/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx +++ b/src/app/carte-base-adresse-nationale/components/PanelDistrict/PanelDistrictMicroToponymList.tsx @@ -47,7 +47,9 @@ function PanelDistrictMicroToponymList({ district }: PanelDistrictMicroToponymLi return ( <> -

Odonymes

+

+ Voies, places et lieux-dits +

Les odonymes correspondent aux voies, places, lieux-dits, et autres micro-toponymes circulables et/ou porteurs d’adresses. diff --git a/src/app/carte-base-adresse-nationale/layout.tsx b/src/app/carte-base-adresse-nationale/layout.tsx index a04c9e7af..fa7fecffe 100644 --- a/src/app/carte-base-adresse-nationale/layout.tsx +++ b/src/app/carte-base-adresse-nationale/layout.tsx @@ -76,7 +76,7 @@ function Carto({ children }: { children: JSX.Element }) {
  • Source BAL
    • -
  • Source Assemblage IGN
    • +
  • Source IGN
  • Adresse certifiée
  • Adresse non certifiée
    •  From d08c588afef9fcd02f1e6a84ca5a87f00badc1bd Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Thu, 19 Dec 2024 14:50:26 +0100 Subject: [PATCH 7/8] Clean `Console.log` --- .../components/ban-map/BanMap.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx b/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx index 0dd1d7214..1e4397331 100644 --- a/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx +++ b/src/app/carte-base-adresse-nationale/components/ban-map/BanMap.tsx @@ -34,7 +34,6 @@ function BanMap({ address, onSelect, isCadastreLayersShown }: BanMapProps) { useEffect(() => { const currentMap = map.current const itemLayers = ['adresse', 'adresse-label', 'voie', 'toponyme'] - console.log('CurrentMap Effect', currentMap) const highLightAdressesByProperties: HighLightAdressesByProperties = ( isHovered: boolean, @@ -95,7 +94,6 @@ function BanMap({ address, onSelect, isCadastreLayersShown }: BanMapProps) { const onLeave = () => { if (currentMap) { - console.log('onLeave') if (hoveredFeature.current) { highLightAdressesByProperties(false, hoveredFeature.current) } @@ -125,8 +123,6 @@ function BanMap({ address, onSelect, isCadastreLayersShown }: BanMapProps) { } return () => { - console.log('CurrentMap Stop Effect', currentMap) - if (currentMap) { itemLayers.forEach((itemLayer) => { currentMap.off('mouseleave', itemLayer, onLeave) From 88c0e93b38d111410fced7328a5feef90ccadf9a Mon Sep 17 00:00:00 2001 From: Nicolas KOKLA Date: Thu, 19 Dec 2024 14:53:14 +0100 Subject: [PATCH 8/8] Search Input : Support for 'enter' key (select the first purpose item) --- .../SearchBAN/search-input/SearchInput.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/SearchBAN/search-input/SearchInput.tsx b/src/components/SearchBAN/search-input/SearchInput.tsx index 3c7609f98..a076d3945 100644 --- a/src/components/SearchBAN/search-input/SearchInput.tsx +++ b/src/components/SearchBAN/search-input/SearchInput.tsx @@ -38,6 +38,10 @@ interface TypeItem { properties: { name: string } } +interface TypeActionAndChanges extends UseComboboxStateChangeOptions { + props: { items: TypeItem[] } +} + export default function SearchInput({ children, placeholder, @@ -69,12 +73,14 @@ export default function SearchInput({ } case useCombobox.stateChangeTypes.ItemClick: case useCombobox.stateChangeTypes.InputKeyDownEnter: - onSelect(changes.selectedItem) + console.log('selectedItem', changes.selectedItem, (actionAndChanges as TypeActionAndChanges)?.props?.items?.[0], actionAndChanges) + const selectedValue = changes.selectedItem || (actionAndChanges as TypeActionAndChanges)?.props?.items?.[0] + onSelect(selectedValue) return { ...changes, - ...(changes.selectedItem + ...(selectedValue ? { - inputValue: changes.selectedItem.properties.name, + inputValue: selectedValue.properties.name, } : null), }