[openstreetmap/openstreetmap-website] Fix issue #6256: Add info icon with Wiki links to map layers menu (PR #6669)

[Marwin Hochfelsner]

@hlfan requested changes on this pull request.



> @@ -7,6 +7,20 @@
         <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">
           <%= t "javascripts.map.base.#{layer['nameId']}" %>
         </span>
+
+        <% if layer['wiki'] %>
+          <a href="<%= layer['wiki'] %>"

This should use the link to helper for consistency.

> @@ -7,6 +7,20 @@
         <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">
           <%= t "javascripts.map.base.#{layer['nameId']}" %>
         </span>
+
+        <% if layer['wiki'] %>
+          <a href="<%= layer['wiki'] %>"
+             target="_blank"
+             rel="noopener"
+             title="<%= t 'layouts.layer_info' %>"
+             class="position-absolute z-3"
+             style="top: 4px; right: 4px; color: #ffffff90; mix-blend-mode: difference; text-decoration: none; line-height: 1;"

This has to come from a stylesheet to apply outside of development.

> @@ -7,6 +7,20 @@
         <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">
           <%= t "javascripts.map.base.#{layer['nameId']}" %>
         </span>
+
+        <% if layer['wiki'] %>
+          <a href="<%= layer['wiki'] %>"
+             target="_blank"
+             rel="noopener"
+             title="<%= t 'layouts.layer_info' %>"
+             class="position-absolute z-3"
+             style="top: 4px; right: 4px; color: #ffffff90; mix-blend-mode: difference; text-decoration: none; line-height: 1;"
+             onclick="event.stopPropagation()">

1. Why is this needed?
2. This would also be blocked by the CSP in production, so this handler would need to be added in the pane JS file.

> @@ -7,6 +7,20 @@
         <span class="badge position-absolute top-0 start-0 rounded-top-0 rounded-start-0 py-1 px-2 bg-body bg-opacity-75 text-body text-wrap text-start fs-6 lh-base">
           <%= t "javascripts.map.base.#{layer['nameId']}" %>
         </span>
+
+        <% if layer['wiki'] %>
+          <a href="<%= layer['wiki'] %>"
+             target="_blank"
+             rel="noopener"
+             title="<%= t 'layouts.layer_info' %>"
+             class="position-absolute z-3"
+             style="top: 4px; right: 4px; color: #ffffff90; mix-blend-mode: difference; text-decoration: none; line-height: 1;"
+             onclick="event.stopPropagation()">
+             <svg width="20" height="20" viewBox="0 0 512 512" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

You can use `i` elements for bootstrap icons without needing to copy the SVG.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6669#pullrequestreview-3624285204
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6669/review/3624285204 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20260103/1f347c89/attachment.htm>