Add polished language switcher and multilingual language-test page

This commit is contained in:
MandelBot
2026-03-16 06:44:50 +00:00
parent e97be736b7
commit b3aacdd8fa
4 changed files with 89 additions and 5 deletions

View File

@@ -1,14 +1,42 @@
{% load i18n %}
<style>
.ms-lang-switcher { display: inline-flex; align-items: center; }
.ms-lang-switcher .form-select {
border-radius: 999px;
border: 1px solid #c7d4e9;
background: #ffffff;
color: #0f172a;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.1;
padding: 0.36rem 1.85rem 0.36rem 0.8rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.ms-lang-switcher .form-select:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.18);
}
.ms-lang-switcher-link {
font-size: 0.74rem;
color: #64748b;
text-decoration: none;
margin-right: 0.5rem;
}
.ms-lang-switcher-link:hover { color: #1d4ed8; }
</style>
<div class="header-right">
<form action="{% url 'set_language' %}" method="post" class="language-switcher-form d-inline-flex align-items-center me-2" aria-label="Language switcher">
<a class="ms-lang-switcher-link" href="{% url language_test %}" title="Language test">LANG</a>
<form action="{% url set_language %}" method="post" class="ms-lang-switcher me-2" aria-label="Language switcher">
{% csrf_token %}
<input name="next" type="hidden" value="{{ request.get_full_path }}">
<label for="header-language-switcher" class="visually-hidden">{% trans "Language" %}</label>
<select id="header-language-switcher" name="language" class="form-select form-select-sm" style="width:auto; min-width:84px;" onchange="this.form.submit()">
<select id="header-language-switcher" name="language" class="form-select form-select-sm" onchange="this.form.submit()">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% for code, name in LANGUAGES %}
<option value="{{ code }}" {% if code == LANGUAGE_CODE %}selected{% endif %}>{{ code|upper }}</option>
{% if code in nl,en,de,fr,es,it,pt,ru %}
<option value="{{ code }}" {% if code == LANGUAGE_CODE %}selected{% endif %}>{{ code|upper }}</option>
{% endif %}
{% endfor %}
</select>
</form>
@@ -16,8 +44,8 @@
<a tabindex="0" aria-label="Open Search" role="search" class="search-toggler user-button menu-circle">
<i class="fa fa-search"></i>
</a>
<a href="{% url 'customer:summary' %}" aria-label="{% trans 'Customer summary' %}" class="user-button menu-circle"><i class="fa fa-user-solid"></i></a>
{% include 'oxyan/headers/partials/mini_basket.html' %}
<a href="{% url customer:summary %}" aria-label="{% trans Customer summary %}" class="user-button menu-circle"><i class="fa fa-user-solid"></i></a>
{% include oxyan/headers/partials/mini_basket.html %}
</div>
<div class="alert-messages-header" aria-live="polite">