[openstreetmap/openstreetmap-website] Add locale selector (PR #5201)

[David Tsiklauri]

This PR addresses "Language switcher on the homepage" issue mentioned in https://github.com/openstreetmap/openstreetmap-website/issues/1115

This PR is mainly based on https://github.com/openstreetmap/openstreetmap-website/pull/5077, https://github.com/openstreetmap/openstreetmap-website/pull/3618 and https://github.com/openstreetmap/openstreetmap-website/pull/4461. As solution using Wikimedia selector added external files, many lines of CSS and JS code, this version takes inspiration from https://github.com/openstreetmap/openstreetmap-website/pull/4461 and creates a reusable language selector using `<select>` tag.

Language selector button, to be consistent, 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, clicking language selector opens language selection menu.

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 https://github.com/openstreetmap/openstreetmap-website/pull/4461. After both PRs will be merged, there will be one smooth simple UX flow for logged in users. Plus, it makes finding language selection page much easier for new users.

Default view of the language selector:

![357859639-0ca3007a-ff80-480b-8b37-1816193dc377](https://github.com/user-attachments/assets/49101573-eb7c-4ade-83e1-6720cd1111f9)

Opened language selector:

![image](https://github.com/user-attachments/assets/0012b643-7b69-47aa-aec2-62bda34179a6)

Mobile view of the selector:

![Screenshot_20240912-144716](https://github.com/user-attachments/assets/cc30cb9f-5197-48e3-ad50-b5ccd04b2b6a)

This PR has many different visual impacts, so to make description shorter instead of directly adding images, I'll add links to them.

LTR screenshots:

[Medium resolution menu](https://github.com/user-attachments/assets/772b883a-7911-4f34-a81f-90a0c46a5f68)
[Medium resolution menu hover](https://github.com/user-attachments/assets/cede63b4-447c-430e-b23a-28904dbdc3a2)
[Small resolution menu](https://github.com/user-attachments/assets/18daace0-c617-4483-b7b0-9137906603bd)

RTL screenshots:

[Default view](https://github.com/user-attachments/assets/6cc3b52d-09a6-4795-ab6c-6c56d2f361c2)
[Medium resolution menu](https://github.com/user-attachments/assets/cb5306c5-96fa-418e-836e-71ef965f7fc5)
[Small resolution menu](https://github.com/user-attachments/assets/7a0e913f-e59d-47a2-85c3-8db9e0e1c3e3)
You can view, comment on, or merge this pull request online at:

  https://github.com/openstreetmap/openstreetmap-website/pull/5201

-- Commit Summary --

  * Add locale selector

-- File Changes --

    M app/assets/images/sprite.svg (9)
    M app/assets/javascripts/application.js (1)
    A app/assets/javascripts/language_selector.js (6)
    M app/assets/stylesheets/common.scss (3)
    M app/controllers/application_controller.rb (2)
    M app/controllers/users_controller.rb (6)
    M app/views/layouts/_header.html.erb (18)
    A app/views/shared/_language_selector.html.erb (4)
    M test/system/site_test.rb (12)

-- Patch Links --

https://github.com/openstreetmap/openstreetmap-website/pull/5201.patch
https://github.com/openstreetmap/openstreetmap-website/pull/5201.diff

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

Message ID: <openstreetmap/openstreetmap-website/pull/5201 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20240912/0bf15f1b/attachment.htm>