search

hotosm / website

Other
2 stars 0 forks source link

Feat/issue 12/language switcher - Responsive Language Switcher with Custom SVG and Padding #18

Closed katporks closed 8 months ago

katporks commented 8 months ago

This PR introduces a responsive language switcher that utilizes Django's set_language redirect view to handle language changes.

A new CSS class, .language-select, has been added to the language switcher component. This class enables us to use a custom SVG as the dropdown arrow for the select element and to provide custom padding to properly position this SVG.

The select element's default appearance varies across different browsers and doesn't allow for much customization. To address this, we've used the -moz-appearance, -webkit-appearance, and appearance properties to remove the default browser styling.

A background-image property with an SVG encoded as a data URL has been added. This SVG serves as our custom dropdown arrow. We've used background-repeat: no-repeat to ensure the SVG only appears once, and background-size: 18px 18px to control the size of the SVG.

The padding-right: 27.25px property is used to add space on the right side of the select element, ensuring the SVG doesn't overlap with the text.

We've also added a rule for .language-select::-ms-expand to handle Internet Explorer, which uses a different method to render the dropdown arrow. This rule hides the default dropdown arrow in IE.

Finally, we've added .language-select:focus to remove the default focus outline and box-shadow, as they interfere with our custom styling. Please note that this could impact accessibility, and we should consider adding a custom focus style in the future.

This change enhances the visual consistency of our language switcher across different browsers and aligns with our branding. It also ensures a seamless user experience when changing languages on our platform.

image image image

spwoodcock commented 8 months ago

Thanks for the detailed descriptions and screenshots to help review by the way 😁

katporks commented 8 months ago

Looks good!

Two small things:

  • If you use many icons in the site, then you could consider using an icon library like material, font-awesome etc to make your life easier. But if not used much the svg approach is good too - requires one less dependency and is future proof.
  • I think you can safely drop internet explorer support. Many sites have done so since it's last official update mid 2022 (it's dead).

Great suggestion! I'll bring it up with Swoon to see if they're happy with the font-awesome or material icons. I'll drop the IE workaround 👍🏼