From d9da821d251e9ba3790f1227c7bf1040048275c2 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 13 Sep 2023 10:23:43 +0200 Subject: [PATCH 1/3] fix: force table cell content to wrap --- src/components/map/layers/EventPopup.js | 17 ++++++++++------ .../map/layers/styles/EventPopup.module.css | 20 +++++++++++++++++++ src/components/map/styles/Popup.css | 8 ++------ 3 files changed, 33 insertions(+), 12 deletions(-) create mode 100644 src/components/map/layers/styles/EventPopup.module.css diff --git a/src/components/map/layers/EventPopup.js b/src/components/map/layers/EventPopup.js index c74069b33..9a1dc2a3b 100644 --- a/src/components/map/layers/EventPopup.js +++ b/src/components/map/layers/EventPopup.js @@ -5,6 +5,7 @@ import React, { useEffect } from 'react' import { EVENT_ID_FIELD } from '../../../util/geojson.js' import { formatTime, formatCoordinate } from '../../../util/helpers.js' import Popup from '../Popup.js' +import classes from './styles/EventPopup.module.css' // Returns true if value is not undefined or null; const hasValue = (value) => value !== undefined || value !== null @@ -47,7 +48,7 @@ const getDataRows = ({ displayElements, dataValues, styleDataItem, value }) => { dataRows.push( - {name} + {name} {formattedValue} ) @@ -87,7 +88,7 @@ const EventPopup = ({ {error && {i18n.t('Could not retrieve event data')}} {!error && ( @@ -102,10 +103,10 @@ const EventPopup = ({ })} {type === 'Point' && ( - + {eventCoordinateFieldName || i18n.t('Event location')} - + {coord[0].toFixed(6)} {coord[1].toFixed(6)} @@ -113,13 +114,17 @@ const EventPopup = ({ )} {orgUnitName && ( - {i18n.t('Organisation unit')} + + {i18n.t('Organisation unit')} + {orgUnitName} )} {eventDate && ( - {i18n.t('Event time')} + + {i18n.t('Event time')} + {formatTime(eventDate)} )} diff --git a/src/components/map/layers/styles/EventPopup.module.css b/src/components/map/layers/styles/EventPopup.module.css new file mode 100644 index 000000000..7f618e8ef --- /dev/null +++ b/src/components/map/layers/styles/EventPopup.module.css @@ -0,0 +1,20 @@ +.eventPopup { + max-height: 300px; + overflow: auto; + line-height: 14px; + max-width: 400px; +} + +.eventPopup tr td { + text-align: left; + vertical-align: top; +} + +.eventPopup tr td:first-child { + font-weight: 500; + padding-right: var(--spacers-dp4); +} + +.eventPopup tr td:last-child { + min-width: 120px; +} diff --git a/src/components/map/styles/Popup.css b/src/components/map/styles/Popup.css index 854912430..d2e1ee13f 100644 --- a/src/components/map/styles/Popup.css +++ b/src/components/map/styles/Popup.css @@ -7,10 +7,6 @@ min-width: 150px; } -.dhis2-map-popup-event { - overflow-x: auto; -} - -.dhis2-map-popup-event th { - text-align: left; +.maplibregl-popup-close-button:focus { + outline: none; } From ab89a4645cbc05d6420e20e1c74066ea9b69b365 Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Wed, 13 Sep 2023 10:28:44 +0200 Subject: [PATCH 2/3] fix: unneeded class --- src/components/map/layers/EventPopup.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/src/components/map/layers/EventPopup.js b/src/components/map/layers/EventPopup.js index 9a1dc2a3b..1566a3929 100644 --- a/src/components/map/layers/EventPopup.js +++ b/src/components/map/layers/EventPopup.js @@ -27,7 +27,7 @@ const getDataRows = ({ displayElements, dataValues, styleDataItem, value }) => { ) { dataRows.push( - {styleDataItem.name} + {styleDataItem.name} {hasValue(value) ? value : i18n.t('Not set')} ) @@ -48,7 +48,7 @@ const getDataRows = ({ displayElements, dataValues, styleDataItem, value }) => { dataRows.push( - {name} + {name} {formattedValue} ) @@ -103,7 +103,7 @@ const EventPopup = ({ })} {type === 'Point' && ( - + {eventCoordinateFieldName || i18n.t('Event location')} @@ -114,17 +114,13 @@ const EventPopup = ({ )} {orgUnitName && ( - - {i18n.t('Organisation unit')} - + {i18n.t('Organisation unit')} {orgUnitName} )} {eventDate && ( - - {i18n.t('Event time')} - + {i18n.t('Event time')} {formatTime(eventDate)} )} From ddd8ea803e39c25e520bb3fb53ec9d5bc345c9ed Mon Sep 17 00:00:00 2001 From: Jen Jones Arnesen Date: Thu, 14 Sep 2023 10:13:02 +0200 Subject: [PATCH 3/3] chore: restore th --- src/components/map/layers/EventPopup.js | 12 ++++++------ .../map/layers/styles/EventPopup.module.css | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/map/layers/EventPopup.js b/src/components/map/layers/EventPopup.js index 1566a3929..1e48cf6d6 100644 --- a/src/components/map/layers/EventPopup.js +++ b/src/components/map/layers/EventPopup.js @@ -27,7 +27,7 @@ const getDataRows = ({ displayElements, dataValues, styleDataItem, value }) => { ) { dataRows.push( - {styleDataItem.name} + {styleDataItem.name} {hasValue(value) ? value : i18n.t('Not set')} ) @@ -48,7 +48,7 @@ const getDataRows = ({ displayElements, dataValues, styleDataItem, value }) => { dataRows.push( - {name} + {name} {formattedValue} ) @@ -103,10 +103,10 @@ const EventPopup = ({ })} {type === 'Point' && ( - + {eventCoordinateFieldName || i18n.t('Event location')} - + {coord[0].toFixed(6)} {coord[1].toFixed(6)} @@ -114,13 +114,13 @@ const EventPopup = ({ )} {orgUnitName && ( - {i18n.t('Organisation unit')} + {i18n.t('Organisation unit')} {orgUnitName} )} {eventDate && ( - {i18n.t('Event time')} + {i18n.t('Event time')} {formatTime(eventDate)} )} diff --git a/src/components/map/layers/styles/EventPopup.module.css b/src/components/map/layers/styles/EventPopup.module.css index 7f618e8ef..2b0976f80 100644 --- a/src/components/map/layers/styles/EventPopup.module.css +++ b/src/components/map/layers/styles/EventPopup.module.css @@ -5,16 +5,16 @@ max-width: 400px; } -.eventPopup tr td { +.eventPopup th, .eventPopup td { text-align: left; vertical-align: top; } -.eventPopup tr td:first-child { +.eventPopup tr th { font-weight: 500; padding-right: var(--spacers-dp4); } -.eventPopup tr td:last-child { +.eventPopup tr td { min-width: 120px; }