<p dir="auto">Rewrite of <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1359024400" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3674" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/3674/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/3674">#3674</a> - layer buttons as <a href="https://getbootstrap.com/docs/5.3/forms/checks-radios/#radio-toggle-buttons" rel="nofollow">Bootstrap radio toggle buttons</a></p>
<p dir="auto">Enables keyboard navigation for layer buttons which is missing now.</p>
<p dir="auto">The only custom css is to:</p>
<ul dir="auto">
<li>set button heights</li>
<li>override borders to have hover effects because Bootstrap toggle buttons don't have any hover effect (they'd need another color to tell hover states apart from selected states, they solved it by removing hover states)</li>
</ul>
<p dir="auto"><a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/c0775b2d-de2b-49d2-992e-93455ed83028">image.png (view on web)</a><br>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/4158490/fb8c8af0-d742-48f3-b5c4-57bbf25fd34f">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/4674'>https://github.com/openstreetmap/openstreetmap-website/pull/4674</a></p>

<h4>Commit Summary</h4>
<ul>
  <li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4674/commits/f3ea0e14b09880ec824521029bfd47899f9d093b" class="commit-link">f3ea0e1</a>  Use Bootstrap toggle buttons for layers menu</li>
</ul>

<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4674/files">2 files</a>)</p>
<ul>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4674/files#diff-87e33ea7d5e625dd851a78a3192719681de20caea8edd278a10f5342585c98e7">app/assets/javascripts/leaflet.layers.js</a>
    (43)
  </li>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4674/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
    (43)
  </li>
</ul>

<h4>Patch Links:</h4>
<ul>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4674.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4674.patch</a></li>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4674.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4674.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/4674">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLIR3MWOKKVH3HG7USTY4VQDHAVCNFSM6AAAAABGAXYWFWVHI2DSMVQWIX3LMV43ASLTON2WKOZSGIZTKOJWGU4DINY">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLOMFXWLRSDF7X3EPQ3Y4VQDHA5CNFSM6AAAAABGAXYWFWWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIKRRBS4.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/4674</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/4674",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4674",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>