<p dir="auto">I looked into making the edit button visible on small screen <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="448420961" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2233" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2233/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2233">#2233</a> and ran into a few issues that are making this less straight forward than I was hoping it to be.</p>
<ol dir="auto">
<li>Bootstrap does not provide responsive classes to change the button group to vertical.
<ul dir="auto">
<li>There is an issue on this at <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1904289660" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/39213" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/39213/hovercard" href="https://github.com/twbs/bootstrap/issues/39213">twbs/bootstrap#39213</a></li>
<li>We could change the layout of course.</li>
<li>We could also change the classes in JavaScript, which I did for this draft.</li>
</ul>
</li>
<li>Bootstrap has a bug with vertical button list when the first button is a dropdown.
<ul dir="auto">
<li>I reported this in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2316695819" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/40487" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/40487/hovercard" href="https://github.com/twbs/bootstrap/issues/40487">twbs/bootstrap#40487</a> and my PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2316713072" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/40488" data-hovercard-type="pull_request" data-hovercard-url="/twbs/bootstrap/pull/40488/hovercard" href="https://github.com/twbs/bootstrap/pull/40488">twbs/bootstrap#40488</a> might fix it.</li>
<li>I added this fix as a workaround to our css for this draft.</li>
</ul>
</li>
<li>Bootstrap does not support vertical button groups with split buttons ATM.
<ul dir="auto">
<li>See <a href="https://getbootstrap.com/docs/5.2/components/button-group/#vertical-variation" rel="nofollow">https://getbootstrap.com/docs/5.2/components/button-group/#vertical-variation</a> <em>"Split button dropdowns are not supported here."</em>.</li>
<li>We can work around this by adding a few utility classes, which I did for this draft.</li>
<li>But since the way we do responsive design on the website is a bit special, there are slight changes to what we have right now in certain edge case screen sizes. We could use more JS to fix this if needed…</li>
</ul>
</li>
<li>Bootstrap does not handle hidden items in a group.
<ul dir="auto">
<li>We are hiding the "Export" Page on the button group via CSS ATM and Bootstrap does not handle the case of hidden elements, so the button group borders are wrong.</li>
<li>For this draft I made all menu items visible. Following the logic that the reason why we have an export page so prominently on the page at all is to showcase the story of OSM, which is just as true on mobile. Hiding part of the story is worse than showing it so users can learn about it an realize they need a different device to use this part of the website. – We could continue hiding the page, of course, but need to add more custom css or JS to make bootstrap work.</li>
</ul>
</li>
</ol>
<p dir="auto"><strong>This is what it looks like:</strong></p>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/111561/7f1e4fb8-e330-4fa5-bc73-1069d0b80c91">image.png (view on web)</a>
<a href="https://github.com/openstreetmap/openstreetmap-website/assets/111561/a1657b76-d981-4f1b-9862-fb9d532711ab">image.png (view on web)</a>
<hr>
<p dir="auto"><strong>Where do go from here?</strong></p>
<p dir="auto">I consider hiding the Edit button in 2024 a bug which we should fix. And this PR is a way to do this.</p>
<p dir="auto">In the near future we will need to reconsider this part of the menu, especially the screen usually visible on mobile to incorporate editors in the menu (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1680851619" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/operations/issues/877" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/operations/issues/877/hovercard?comment_id=2130858478&comment_type=issue_comment" href="https://github.com/openstreetmap/operations/issues/877#issuecomment-2130858478">openstreetmap/operations#877 (comment)</a>).</p>
<hr>
<p dir="auto"><span class="issue-keyword tooltipped tooltipped-se" aria-label="This pull request closes issue #2233.">Closes</span> <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="448420961" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/2233" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/2233/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/2233">#2233</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/4839'>https://github.com/openstreetmap/openstreetmap-website/pull/4839</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/4839/commits/3bbf5b24c1ba0b67b04f602f2649d1c4c1d94798" class="commit-link">3bbf5b2</a> Show edit and export in small-nav</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4839/files">3 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4839/files#diff-0e145ba000e96b1a45d230275e350e4e8514efb4db7dbcfa228fe1003896c9b4">app/assets/javascripts/application.js</a>
(3)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4839/files#diff-e86a39e6d0b163f152db8843fc7d647a3f5d648de4a74f1732bef4474b6e5bc8">app/assets/stylesheets/common.scss</a>
(19)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/4839/files#diff-6d2ef58207c92d1533287af551a075122ba98240a861819047a2ae77b7674f0b">app/views/layouts/_header.html.erb</a>
(8)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4839.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/4839.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/4839.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/4839.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/4839">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLPNP3ON7KTX6ZLHT6DZEFUZTAVCNFSM6AAAAABIJPIIQKVHI2DSMVQWIX3LMV43ASLTON2WKOZSGMYTONBYGU2DEMI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLLDGGL6KUFHXJC3BCDZEFUZTA5CNFSM6AAAAABIJPIIQKWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHIUIQFNU.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/4839</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/4839",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/4839",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>