Improve tooltips style

src/components/details.page.tsx

@@ -1,16 +1,12 @@
-import Image from 'next/image';
 import { Attachement } from '@/api/settings';
 import { LatLngTuple } from 'leaflet';
-import { useTranslations } from 'next-intl';
 
 import { convertAttachementsToImages } from '@/lib/utils';
-import { Badge } from '@/components/ui/badge';
-import { Icons, propsForSVGPresentation } from '@/components/icons';
 
 import ButtonCenterView from './button-center-view';
 import ButtonClose from './button-close';
 import Carousel from './carousel';
-import MeterLength from './length';
+import { MetadataList } from './metadata-list';
 
 type Props = {
   content: {
@@ -34,91 +30,6 @@ type Props = {
   };
 };
 
-export type MetadataListProps = {
-  length?: number;
-  descent?: number;
-  flow?: string;
-  type?: {
-    label: string;
-    category: {
-      label: string;
-    };
-    pictogram?: string;
-  };
-};
-
-export const MetadataList = ({
-  length,
-  descent,
-  flow,
-  type,
-}: MetadataListProps) => {
-  const t = useTranslations('details');
-  return (
-    <dl className="flex items-center gap-2 py-2">
-      {length !== undefined && (
-        <>
-          <dt>
-            <Icons.chevronsLeftRight
-              className="text-primary"
-              {...propsForSVGPresentation}
-            />
-            <span className="sr-only">{t('length')}</span>
-          </dt>
-          <dd className="mr-2">
-            <MeterLength length={length} />
-          </dd>
-        </>
-      )}
-      {descent !== undefined && (
-        <>
-          <dt>
-            <Icons.arrowDownRight
-              className="text-primary"
-              {...propsForSVGPresentation}
-            />
-            <span className="sr-only">{t('descent')}</span>
-          </dt>
-          <dd className="mr-2">
-            <MeterLength length={descent} />
-          </dd>
-        </>
-      )}
-      {flow && (
-        <>
-          <dt>
-            <Icons.waves
-              className="text-primary"
-              {...propsForSVGPresentation}
-            />
-            <span className="sr-only">{t('flow')}</span>
-          </dt>
-          <dd className="mr-2">{flow}</dd>
-        </>
-      )}
-      {type && (
-        <>
-          <dt>{type.category.label} :</dt>
-          <dd>
-            <Badge className="gap-2">
-              {type.pictogram && (
-                <Image
-                  loading="lazy"
-                  src={type.pictogram}
-                  width={24}
-                  height={24}
-                  alt=""
-                />
-              )}
-              <span>{type.label}</span>
-            </Badge>
-          </dd>
-        </>
-      )}
-    </dl>
-  );
-};
-
 export default function DetailsPageUI({ content }: Props) {
   return (
     <article>

src/components/map/geometry-item.tsx

@@ -115,7 +115,7 @@ export const GeometryItem = ({
                     mouseout: e => e.target.setStyle({ opacity: 0 }),
                     ...featureEventHandler,
                   }}
-                  className={layer.type}
+                  className="streams-hover"
                 >
                   <GeometryTooltip properties={properties} layer={layer} />
                 </Polyline>

src/components/map/geometry-tooltip.tsx

@@ -3,7 +3,7 @@ import { Layer } from '@/api/settings';
 import { GeoJsonProperties } from 'geojson';
 import { Tooltip } from 'react-leaflet';
 
-import { MetadataList } from '../details.page';
+import { MetadataList } from '../metadata-list';
 
 export const GeometryTooltip = ({
   properties,
@@ -21,7 +21,7 @@ export const GeometryTooltip = ({
   return (
     <Tooltip
       sticky
-      className="w-72 !overflow-hidden !whitespace-normal !rounded-xl !border-0 !p-0"
+      className="w-64 !overflow-hidden !whitespace-normal !rounded-xl !border-0 !p-0"
     >
       <div className="flex flex-col">
         {properties.attachments?.[0]?.thumbnail && (
@@ -43,6 +43,7 @@ export const GeometryTooltip = ({
             flow={properties.flow}
             length={properties.length}
             type={properties.type}
+            small
           />
           {properties.description && (
             <span

src/components/metadata-list.tsx

@@ -0,0 +1,110 @@
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+
+import { Badge } from '@/components/ui/badge';
+import { Icon, Icons, propsForSVGPresentation } from '@/components/icons';
+
+import MeterLength from './length';
+
+export type MetadataListProps = {
+  length?: number;
+  descent?: number;
+  flow?: string;
+  type?: {
+    label: string;
+    category: {
+      label: string;
+    };
+    pictogram?: string;
+  };
+  small?: boolean;
+};
+
+type MetadataItemProps = {
+  show?: boolean;
+  icon: Icon;
+  type: string;
+  value?: string | number;
+  meters?: number;
+  small?: boolean;
+};
+
+const MetadataItem = ({
+  show,
+  icon: Icon,
+  type,
+  value,
+  meters,
+  small,
+}: MetadataItemProps) => {
+  const t = useTranslations('details');
+  if (!show) return null;
+
+  return (
+    <div className="flex flex-row flex-wrap items-center justify-center gap-1">
+      <dt>
+        <Icon
+          className="text-primary"
+          {...propsForSVGPresentation}
+          {...(small ? { width: 18, height: 18 } : {})}
+        />
+        <span className="sr-only">{t(type)}</span>
+      </dt>
+      <dd>{meters ? <MeterLength length={meters} /> : value}</dd>
+    </div>
+  );
+};
+
+export const MetadataList = ({
+  length,
+  descent,
+  flow,
+  type,
+  small,
+}: MetadataListProps) => {
+  const t = useTranslations('details');
+  return (
+    <dl className="flex items-center justify-evenly gap-2 py-2">
+      <MetadataItem
+        show={length !== undefined}
+        icon={Icons.chevronsLeftRight}
+        type="length"
+        meters={length}
+        small={small}
+      />
+      <MetadataItem
+        show={descent !== undefined}
+        icon={Icons.arrowDownRight}
+        type="descent"
+        meters={descent}
+        small={small}
+      />
+      <MetadataItem
+        show={!!flow}
+        icon={Icons.waves}
+        type="flow"
+        value={flow}
+        small={small}
+      />
+      {type && (
+        <div className="flex flex-row flex-wrap items-center justify-center gap-1">
+          <dt>{type.category.label} :</dt>
+          <dd>
+            <Badge className="gap-2">
+              {type.pictogram && (
+                <Image
+                  loading="lazy"
+                  src={type.pictogram}
+                  width={24}
+                  height={24}
+                  alt=""
+                />
+              )}
+              <span>{type.label}</span>
+            </Badge>
+          </dd>
+        </div>
+      )}
+    </dl>
+  );
+};

src/styles/globals.css

@@ -104,17 +104,31 @@ body .leaflet-container a.leaflet-popup-close-button {
 
 .streams-animation.leaflet-interactive {
   stroke-width: 2;
-  stroke: rgba(255, 255, 255, 0.6);
-  stroke-dasharray: 10;
-  stroke-dashoffset: 200;
+  stroke: rgba(255, 255, 255, 0.75);
+  stroke-dasharray: 1 15;
+  stroke-dashoffset: 208;
   animation-name: dash;
-  animation-duration: 20s;
+  animation-duration: 40s;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
 
+.streams-hover.leaflet-interactive:focus {
+  outline: none !important;
+  stroke-opacity: 0.5;
+}
+
 @keyframes dash {
   to {
     stroke-dashoffset: 0;
   }
 }
+
+/*
+leaflet bug: tooltips stay open if hovering an element while panning.
+As new tooltips are added at the end of .leaflet-tooltip-pane,
+just hide all tooltips that aren't the last one
+*/
+.leaflet-tooltip-pane > .leaflet-tooltip:not(:last-child) {
+  display: none;
+}