<p dir="auto">This PR addresses "Language switcher on the homepage" issue mentioned in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="123230266" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/1115" data-hovercard-type="issue" data-hovercard-url="/openstreetmap/openstreetmap-website/issues/1115/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/issues/1115">#1115</a></p>
<p dir="auto">The code is based on <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomhughes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomhughes">@tomhughes</a> 's PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1315878630" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3618" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/3618/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/3618">#3618</a>, which, as Tom mentioned in the <a href="https://github.com/openstreetmap/openstreetmap-website/pull/4461#issuecomment-1879660419" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4461/hovercard">comment</a>, after rebasing had some styling issues. Most of the functional part of this PR was written by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/tomhughes/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/tomhughes">@tomhughes</a>.</p>
<p dir="auto">Language selector button, to be consistent, now is not hidden when the user is logged in. Instead, it redirects to the "My Preferences" page, where user can change language preferences. When the user is logged out, it still works like in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1315878630" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/3618" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/3618/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/3618">#3618</a> _ shows "jquery uls" language selector popup / dropdown.</p>
<p dir="auto">The reason for logged in user redirection instead of any complex functionality of preferred language change while clicking language selector, was compatibility with the PR <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2068551504" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/4461" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/4461/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/4461">#4461</a>. After both PRs will be merged, there will be one smooth simple UX flow for logged in users.</p>
<p dir="auto">In addition to these, this PR also adds:</p>
<ul dir="auto">
<li>Tests for checking if redirection works correctly</li>
<li>Both LTR and RTL language supported icon</li>
<li>Language selector icon with the same default and hover colors as other menu items</li>
</ul>
<p dir="auto">Default view of the language selector:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/0ca3007a-ff80-480b-8b37-1816193dc377">image.png (view on web)</a></p>
<p dir="auto">This PR has many different visual impacts, so to make description shorter instead of directly adding images, I'll add links to them.</p>
<p dir="auto">LTR screenshots:</p>
<ul dir="auto">
<li><a href="https://github.com/user-attachments/assets/92b0fe32-0f14-42e0-a924-9ec4cee737e5">Opened language selector</a></li>
<li><a href="https://github.com/user-attachments/assets/772b883a-7911-4f34-a81f-90a0c46a5f68">Medium resolution menu</a></li>
<li><a href="https://github.com/user-attachments/assets/cede63b4-447c-430e-b23a-28904dbdc3a2">Medium resolution menu hover</a></li>
<li><a href="https://github.com/user-attachments/assets/18daace0-c617-4483-b7b0-9137906603bd">Small resolution menu</a></li>
</ul>
<p dir="auto">RTL screenshots:</p>
<ul dir="auto">
<li><a href="https://github.com/user-attachments/assets/6cc3b52d-09a6-4795-ab6c-6c56d2f361c2">Default view</a></li>
<li><a href="https://github.com/user-attachments/assets/cb5306c5-96fa-418e-836e-71ef965f7fc5">Medium resolution menu</a></li>
<li><a href="https://github.com/user-attachments/assets/7a0e913f-e59d-47a2-85c3-8db9e0e1c3e3">Small resolution menu</a></li>
</ul>
<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/5077'>https://github.com/openstreetmap/openstreetmap-website/pull/5077</a></p>
<h4>Commit Summary</h4>
<ul>
<li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/commits/a7f27128e87a782dc4282978380f00172e50189d" class="commit-link">a7f2712</a> Add locale selector</li>
</ul>
<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files">23 files</a>)</p>
<ul>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-97d92457f6d9fdf1f937ddfe97aad5f7313ac0cee8894400f984d86f9dfa462c">Vendorfile</a>
(8)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-0e145ba000e96b1a45d230275e350e4e8514efb4db7dbcfa228fe1003896c9b4">app/assets/javascripts/application.js</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-a9b88a8a3644f944b9bd54361da588c69fa6a210cf7327194c17895a8ad2b0d6">app/assets/javascripts/osm.js.erb</a>
(1)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-50e45e25b0fed069c7b10902b14b389cf070d318e22333a6103da07d710943c3">app/assets/javascripts/uls.js</a>
(30)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-696de97d252c66e034ff8c9cf59ffb3675680e7c0d076468f43797273b7be118">app/assets/stylesheets/screen-ltr.scss</a>
(1)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-8fc6c67a892f90f5336824019ace8ffb32c9d560a4bf8b76faf921858fc65230">app/assets/stylesheets/screen-rtl.rtlcss.scss</a>
(1)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-be6488904686cc9d2e4c6c8a7c20b9338e3250813f0ff592956107e561bbc93b">app/assets/stylesheets/uls.scss</a>
(74)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-766c34fd6533171eaf54300c153f89d6002c35c02cfc9c5b219251f85180ad07">app/controllers/application_controller.rb</a>
(2)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-cfdccd0a9d5df5a43aaad2a35d36ebbe187c52ad5fdc9846fa189d04537adb6e">app/controllers/users_controller.rb</a>
(6)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-6d2ef58207c92d1533287af551a075122ba98240a861819047a2ae77b7674f0b">app/views/layouts/_header.html.erb</a>
(14)
</li>
<li>
<strong>M</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-43c6cbf1d8474dfd3889f066ee578a693a1b3ca863f407b07663e0f59102b4ed">test/system/site_test.rb</a>
(16)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-145e2f8ce5167dcdd101b2269684d322e806df3da0b695719041ac8700229b64">vendor/assets/jquery.uls/css/jquery.uls.css</a>
(117)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-2d94a9cffcc3652bb941688206f829fc1e7fa2ec25cd2eed282c8d8f15020f05">vendor/assets/jquery.uls/css/jquery.uls.grid.css</a>
(307)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-6f4bc26baeba9e13d5e8fa40953fd1efaed2b1cec84a9117ea520de84c9a36cf">vendor/assets/jquery.uls/css/jquery.uls.lcd.css</a>
(144)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-5be2886eb3a1996f516297eeac86a6c64b0ba3979b39435f0edf7ee4034547d9">vendor/assets/jquery.uls/css/jquery.uls.mobile.css</a>
(307)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-fa3e57b6e4557df32a48e864132210515500cb46666cf0450b84bbdb8850a3ea">vendor/assets/jquery.uls/images/close.svg</a>
(8)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-4cce587f9f6c5ad5fd403279b2dd92b41747b083d3809af68690a91d79c4fa77">vendor/assets/jquery.uls/images/language.svg</a>
(7)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-9fe47d1520128e5dbefb6f8f5d7b0943bf8a2220cb61535a9cb3d290ec1c6309">vendor/assets/jquery.uls/images/search.svg</a>
(7)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-8466f0c7d77c761b471a7f29bd362a203d52df4f451f5a8c0a48413a305e5859">vendor/assets/jquery.uls/src/jquery.uls.core.js</a>
(504)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-2e45a4fbc1465a284850e7509b83c8f16b39af8d6bedd30778c725d600e7141f">vendor/assets/jquery.uls/src/jquery.uls.data.js</a>
(7191)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-2b9233a821597641cc982c7772d9d418e6eda9bb13378bd708e0e0efa9643b1b">vendor/assets/jquery.uls/src/jquery.uls.data.utils.js</a>
(335)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-726684217af47a730afa909b948f80c0f963af90e09667160f4859d8f99a1089">vendor/assets/jquery.uls/src/jquery.uls.languagefilter.js</a>
(380)
</li>
<li>
<strong>A</strong>
<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5077/files#diff-1058896b3c3ef9291f926cbe1944e67db32f3eb8306c0dc563e5e9768e74dccb">vendor/assets/jquery.uls/src/jquery.uls.lcd.js</a>
(622)
</li>
</ul>
<h4>Patch Links:</h4>
<ul>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5077.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5077.patch</a></li>
<li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5077.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5077.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/5077">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLIMMN52NH46Q3VMLI3ZRNURPAVCNFSM6AAAAABMQQIQX2VHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ3DMMBYGIYTKNI">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLI57IZJVPWJOGNRNCLZRNURPA5CNFSM6AAAAABMQQIQX2WGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHJF7LNNM.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/5077</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/5077",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5077",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>