To showcase the language capabilities of Drupal core, we are adding Spanish translations to Umami in #3028769: [META] Showcase Drupal's Multilingual Capabilities by implementing Umami in a 2nd language (Spanish)

To switch between English and Spanish, Drupal's language switcher block needs to be added to the layout.

This issue should deliver an MVP version of the switcher that works responsively and provides feedback of which language is currently active.

Remaining tasks

  • Add configuration to include the Language Switcher block to the pre-header region
  • Theme the language switcher with suitable MVP support for the various screen sizes
  • Decide whether MVP styling for the language switcher can accept the line wrapping of the switcher, search dialogue, and user menu links that will occur at smaller screen sizes. If not acceptable, style the language switcher as a drop down menu (similar to the hamburger menu) at all screen sizes.
CommentFileSizeAuthor
#6 interdiff-2-6.txt472 byteskjay
#6 drupal_umami-language-switcher-3041699-6.patch4.42 KBkjay
#5 language-switcher-with-longer-search-box.png1.41 MBshaal
#2 Screen Shot 2019-03-20 at 08.34.22.png1.92 MBkjay
#2 Screen Shot 2019-03-20 at 08.34.07.png1.44 MBkjay
#2 Screen Shot 2019-03-20 at 08.33.35.png506.97 KBkjay
#2 drupal_umami-language-switcher-3041699-2.patch4.45 KBkjay
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

kjay created an issue. See original summary.

kjay’s picture

kjay CreditAttribution: kjay commented
FileSize
drupal_umami-language-switcher-3041699-2.patch4.45 KB
Screen Shot 2019-03-20 at 08.33.35.png506.97 KB
Screen Shot 2019-03-20 at 08.34.07.png1.44 MB
Screen Shot 2019-03-20 at 08.34.22.png1.92 MB

And here's a first patch for this work. Proposes placing the language switcher first in order in the pre-header region and keeps the search interface centred.

Does need small refinements if we go with this approach but we need reviews and discussion on the approach.

Here's some screenshots of the result:

Language switcher small

Language switcher medium

Language switcher large

markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented

Hi @kjay

This looks great. Just one tiny issue reported from the linting tool:

profiles/demo_umami/themes/umami/css/components/blocks/language-switcher/language-switcher.css
 30:1  ✖  Unexpected missing end-of-source newline   no-missing-end-of-source-newline

Can you add in that new line and I'll mark RTBC then.

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented

Did you check what will happen when we increase the width of the search input? (#3030936: Search placeholder text is longer than the search box)
Perhaps we should keep search as an icon for a wider breakpoint until it can fit in its full width?

shaal’s picture

shaal
he/him
Primary language English
Location Boca Raton, FL
CreditAttribution: shaal as a volunteer commented
FileSize
language-switcher-with-longer-search-box.png1.41 MB

I tested it together with the (upcoming) patch of wider search box, it looks great.
Language switcher with wider search box

kjay’s picture

kjay CreditAttribution: kjay commented
FileSize
drupal_umami-language-switcher-3041699-6.patch4.42 KB
interdiff-2-6.txt472 bytes

Thanks for the reviews. @markconroy, here's a patch for the missing new line at the end of language-switcher.css

@shaal, for the idea of moving the breakpoint for the search, if what we have is looking ok for MVP, I vote we go with this for now (minimal changes) but do follow up quickly with a language drop down as we're going to need that for users installing with a different language.

kjay’s picture

kjay CreditAttribution: kjay commented
Status: Needs work » Needs review
markconroy’s picture

markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented
Status: Needs review » Reviewed & tested by the community

Great work. Thanks @kjay

  • Gábor Hojtsy committed c45ce0c on 8.8.x 
    Issue #3041699 by kjay, shaal, markconroy: Add the language switcher...
Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy at Acquia commented
Version: 8.8.x-dev » 8.7.x-dev

Thanks, committed to 8.8. Leaving RTBC for merge to 8.7 once the freeze is lifted.

  • Gábor Hojtsy committed 3f6305e on 8.7.x 
    Issue #3041699 by kjay, shaal, markconroy: Add the language switcher...
Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy at Acquia commented
Status: Reviewed & tested by the community » Fixed
Issue tags: +Out of the Box Initiative

Thanks all!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.