butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wire up language selector

Browse source
This commit is contained in:
John Hess 2024-06-25 17:59:04 -05:00
parent b00cc94e73
commit 744ac98289
6 changed files with 114 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

8
_includes/header.html
View file

@ -2,10 +2,12 @@
<div class="header-container">
<img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
<div class="title">{% t site_name %}</div>
<div class="language-selector">
<a class="language-selector" href="#" data-micromodal-trigger="language-selector-modal">
<img src="{{ site.baseurl }}/assets/images/globe.svg" alt="language selector icon"/>
<span class="language-code">{{ site.lang | upcase }}</span>
<img src="{{ site.baseurl }}/assets/images/caret-down.svg"/>
</div>
</a>
</div>
</header>
</header>
{% include language-selector.html %}

28
_includes/language-selector.html Normal file
View file

@ -0,0 +1,28 @@
<div class="modal micromodal-slide" id="language-selector-modal" aria-hidden="true">
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
<div class="modal__container language-selector-container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
<main class="modal__content" id="product-modal-content">
<div class="modal__content__header">
<div class="header__text">
<h2 class="modal__title ls-40" id="product-modal-title">{% t language_prompt %}</h2>
</div>
</div>
<div class="modal__content__description">
{% for lang in site.languages %}
{% if forloop.index0 == 0 %}
<a class="language-selection" href="{{ page.url | relative_url }}">
<input type="radio" id="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
<label for="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
</a href="">
{% else %}
<a class="language-selection" href="{{ lang + page.url | relative_url }}">
<input type="radio" id="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
<label for="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
</a href="">
{% endif %}
{% endfor %}
</div>
</main>
</div>
</div>
</div>