<p dir="auto">Currently highlighted in-viewport bboxes change their color to more reddish. Changing their color made sense previously when only one orange color was in use. However now we have different colors, with red being for newer changesets. The problem is that if the highlighted changeset is located on a pile of newer changesets, it's made less noticeable by this color change. I think it's better to do highlights by other means without color changes. In this PR I'm making highlighted outlines bolder fo in-viewport changesets.</p>
<p dir="auto">Before / after:<br>
<a href="https://github.com/user-attachments/assets/27fbdc0e-43ee-4749-82de-f2d7c9f4a653">image.png (view on web)</a> <a href="https://github.com/user-attachments/assets/5f88cfe9-4a69-4ec2-855a-356c8d7bce94">image.png (view on web)</a></p>
<p dir="auto">This should especially helpful for valious cases of color blindness.</p>
<p dir="auto">Before / after for completely colorblind users:<br>
<a href="https://github.com/user-attachments/assets/a0e9784d-a721-4d19-a897-598cef5aa628">image.png (view on web)</a> <a href="https://github.com/user-attachments/assets/58c4e9d8-16c9-40b5-8c27-2ca79f8f24c5">image.png (view on web)</a></p>
<p dir="auto">But I had to do one more thing. Changing the color still made highlighted changesets stand out more among other in-viewport changesets, compared with same color + bolder outline. To compensate for keeping the same color I added shadows to highlighted changesets. This should make sense because they are displayed "above" the rest. Initially I wanted a light shadow, like I do for sticky close buttons, and that's what the PR still has for out-of-viewport changesets. However for in-viewport changesets that wasn't enough and I gave them heavier shadows.</p>
<p dir="auto">Before / after:<br>
<a href="https://github.com/user-attachments/assets/f6a7545e-d30c-405a-9602-49930f73c744">image.png (view on web)</a> <a href="https://github.com/user-attachments/assets/caf64f86-8b90-42ee-b5e4-2918cef791ea">image.png (view on web)</a></p>
<hr>
<h4>You can view, comment on, or merge this pull request online at:</h4>
<p> <a href='https://github.com/openstreetmap/openstreetmap-website/pull/5993'>https://github.com/openstreetmap/openstreetmap-website/pull/5993</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/commits/7a33740e6b174fdcb3439786ced4d51b2d7fc083" class="commit-link">7a33740</a> Split changeset highlight back layer into area and outline</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/commits/5abce08c536e778729e05bef9107cbb80b05b17a" class="commit-link">5abce08</a> Make highlight outline bolder for in-viewport changesets</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/commits/b84f80ad082f7e777fcffcce73a2cfb5f27bbe09" class="commit-link">b84f80a</a> Remove reddish-orange highlight color from in-viewport changesets</li>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/commits/784eb995f89b19a7d5dbc9abd46615060d8ecbc3" class="commit-link">784eb99</a> Add shadows to changeset highlights</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/files">2 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/files#diff-dc12b10289b1608e5deb501050928dc5db8564cb2e09e01de68e949662123404">app/assets/javascripts/index/history-changesets-layer.js</a>
(30)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(9)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5993.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5993.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5993.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5993.diff</a></li>
</ul>
<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5993">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLKCBGYU354PRYF33TL25NS6ZAVCNFSM6AAAAAB4WVRXQWVHI2DSMVQWIX3LMV43ASLTON2WKOZTGA2DSMJYHAZTCNQ">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLNFSM2DB7QI3YXLXW325NS6ZA5CNFSM6AAAAAB4WVRXQWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHLLPXL3Q.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5993</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5993",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5993",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>