@nertc commented on this pull request.
> @@ -0,0 +1,15 @@
+<label class="position-relative d-flex <%= classes %>" role="button">
+ <svg width="20" height="20" fill="currentColor">
+ <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1
2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89
9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58
4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0
2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6
1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87
1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63
5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z" />
+ </svg>
+ <% unless disabled %>
+ <select role="button" class="p-0 position-absolute top-0 start-0 w-100
h-100 language-change-trigger text-transparent bg-transparent <%= classes %>">
I tried several different methods to solve it, but still for me the best one is
the current solution. If you prefer any of them, I can change code accordingly:
1. Showing dropdown next to the icon.
Pros:
* Both Icon and selected language are shown
* Doesn't use absolute position and dropdown hiding
Cons:
* Takes more space in the menu
* Clicking icon doesn't automatically open dropdown (it is only focused),
therefore, needs more JS to add opening functionality
2. Adding `<svg>` or `<img>` tag directly in the `<select><option>` tag and
show icon as selected.
Cons:
* Browser blocks such cases and doesn't render `<svg>` and `<img>` in the
`<option>`
3. Use Bootstrap dropdown.
Pros:
* Icon and selection button are shown
* Icon and selection button are same item
* Uses Bootstrap
Cons:
* As there are many languages, dropdown gets too long and exceeds website
height
* Needs some custom CSS to achieve good sizing and consistent visuals
* In terms of the responsive design, `<select>` tag has much better and
familiar UX than Bootstrap Dropdown
--
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5201#discussion_r1984911828
You are receiving this because you are subscribed to this thread.
Message ID:
<openstreetmap/openstreetmap-website/pull/5201/review/2667003...@github.com>_______________________________________________
rails-dev mailing list
rails-dev@openstreetmap.org
https://lists.openstreetmap.org/listinfo/rails-dev
