diff --git a/umap/static/umap/css/popup.css b/umap/static/umap/css/popup.css new file mode 100644 index 00000000..0f53d473 --- /dev/null +++ b/umap/static/umap/css/popup.css @@ -0,0 +1,125 @@ +.umap-popup { + display: flex; + flex-flow: column nowrap; + height:100%; +} + +.umap-popup-footer { + position: relative; + background-color: rgb(68, 68, 68); + color: white; + display: flex; + width: 100%; + margin-top: auto; + min-width: 99px; + border-radius: 2px; + max-height: 24px; + justify-content: space-around; +} +.umap-popup a:hover { + text-decoration: underline; +} +.popup-title { + display: flex; + align-items: center; +} +.popup-title .icon { + margin: 5px; +} +a[href^='mailto']::before { + content: '✉︎ '; +} +a[href^='tel']::before { + content: '☎︎ '; +} +address span { + padding-inline-end: 5px; +} +.osm-link { + margin-top: 10px; + text-align: end; + font-style: italic; +} +.wikipedia-link a::before { + content: '⇒ '; +} +span.popup-icon { + padding: 5px; +} +.leaflet-popup-content { + min-width: 200px; + line-height: inherit; +} +.leaflet-popup-content-wrapper, .leaflet-popup-tip { + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); +} +.leaflet-popup-content-wrapper { + border-radius: 4px; +} +.umap-popup-content { + max-height: 500px; + flex-grow: 1; + margin-bottom: 4px; + display: flex; + flex-direction: column; + overflow-y: auto; + overflow-x: hidden; +} +.umap-popup-content iframe { + min-width: 300px; + max-width: 100%; +} +.umap-popup-content tr:nth-child(odd) { + background-color: #f6f6f6; +} +.umap-popup-content th { + text-align: start; +} +.umap-popup-content td { + word-break: break-word; +} +.umap-popup-content th, +.umap-popup-content td { + padding: 1px 3px; +} +.umap-popup-container { + flex-grow: 1; + margin-bottom: 10px; +} +.umap-popup-container ul { + list-style-type: disc; +} +.leaflet-control-toolbar, +.leaflet-bar { + box-shadow: none; +} +.marker-cluster { + background-color: white; + width: 40px; + height: 40px; +} +.leaflet-contextmenu-icon { + display: none; +} +.umap-popup-large iframe { + /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */ + max-width: 100% !important; + min-width: 500px; +} +.umap-popup-large .umap-popup-content { + width: 500px; +} +.umap-popup-content img { + max-width: 100%; +} +.umap-georss-link .popup-title { + text-align: center; +} +@media all and (max-width: 480px) { + .umap-popup-large iframe { + min-width: 300px; + } + .umap-popup-large .umap-popup-content { + width: 300px; + } +} diff --git a/umap/static/umap/js/modules/rendering/template.js b/umap/static/umap/js/modules/rendering/template.js index f14b7eeb..838ad66e 100644 --- a/umap/static/umap/js/modules/rendering/template.js +++ b/umap/static/umap/js/modules/rendering/template.js @@ -175,6 +175,7 @@ class OSM extends TitleMixin(PopupTemplate) { renderBody(feature) { const props = feature.properties const body = document.createElement('div') + const locale = getLocale() const street = props['addr:street'] if (street) { const row = DomUtil.add('address', 'address', body) @@ -218,6 +219,14 @@ class OSM extends TitleMixin(PopupTemplate) { ) ) } + const wikipedia = props[`wikipedia:${locale}`] || props.wikipedia + if (wikipedia) { + body.appendChild( + Utils.loadTemplate( + `` + ) + ) + } const id = props['@id'] || props.id if (id) { body.appendChild( diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 7faf6210..e58ba798 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -789,54 +789,6 @@ a.umap-control-caption, text-align: center; } -/* ********************************* */ -/* Popup */ -/* ********************************* */ -.umap-popup { - display: flex; - flex-flow: column nowrap; - height:100%; -} - -.umap-popup-footer { - position: relative; - background-color: rgb(68, 68, 68); - color: white; - display: flex; - width: 100%; - margin-top: auto; - min-width: 99px; - border-radius: 2px; - max-height: 24px; - justify-content: space-around; -} -.umap-popup a:hover { - text-decoration: underline; -} -.popup-title { - display: flex; - align-items: center; -} -.popup-title .icon { - margin: 5px; -} -a[href^='mailto']::before { - content: '✉︎ '; -} -a[href^='tel']::before { - content: '☎︎ '; -} -address span { - padding-inline-end: 5px; -} -.osm-link { - margin-top: 10px; - text-align: end; - font-style: italic; -} -span.popup-icon { - padding: 5px; -} /* ************* */ @@ -1167,75 +1119,6 @@ span.popup-icon { .leaflet-top, .leaflet-bottom { z-index: var(--zindex-controls); } -.leaflet-popup-content { - min-width: 200px; - line-height: inherit; -} -.leaflet-popup-content-wrapper, .leaflet-popup-tip { - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); -} -.leaflet-popup-content-wrapper { - border-radius: 4px; -} -.umap-popup-content { - max-height: 500px; - flex-grow: 1; - margin-bottom: 4px; - display: flex; - flex-direction: column; - overflow-y: auto; - overflow-x: hidden; -} -.umap-popup-content iframe { - min-width: 300px; - max-width: 100%; -} -.umap-popup-content tr:nth-child(odd) { - background-color: #f6f6f6; -} -.umap-popup-content th { - text-align: start; -} -.umap-popup-content td { - word-break: break-word; -} -.umap-popup-content th, -.umap-popup-content td { - padding: 1px 3px; -} -.umap-popup-container { - flex-grow: 1; - margin-bottom: 10px; -} -.umap-popup-container ul { - list-style-type: disc; -} -.leaflet-control-toolbar, -.leaflet-bar { - box-shadow: none; -} -.marker-cluster { - background-color: white; - width: 40px; - height: 40px; -} -.leaflet-contextmenu-icon { - display: none; -} -.umap-popup-large iframe { - /* See https://github.com/Leaflet/Leaflet/commit/61d746818b99d362108545c151a27f09d60960ee#commitcomment-6061847 */ - max-width: 100% !important; - min-width: 500px; -} -.umap-popup-large .umap-popup-content { - width: 500px; -} -.umap-popup-content img { - max-width: 100%; -} -.umap-georss-link .popup-title { - text-align: center; -} .leaflet-inplace-toolbar { z-index: var(--zindex-toolbar)!important; } @@ -1311,12 +1194,6 @@ span.popup-icon { .umap-permanent-credits-container { max-width: 100%; } - .umap-popup-large iframe { - min-width: 300px; - } - .umap-popup-large .umap-popup-content { - width: 300px; - } .attribution-toggle { display: inline-block; diff --git a/umap/templates/umap/css.html b/umap/templates/umap/css.html index 66840380..67be78bf 100644 --- a/umap/templates/umap/css.html +++ b/umap/templates/umap/css.html @@ -24,6 +24,7 @@ +