Add polished language switcher and multilingual language-test page
This commit is contained in:
40
mandelstudio/templates/mandelstudio/language_test.html
Normal file
40
mandelstudio/templates/mandelstudio/language_test.html
Normal file
@@ -0,0 +1,40 @@
|
||||
{% load i18n %}
|
||||
<!doctype html>
|
||||
<html lang="{{ LANGUAGE_CODE }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% trans "Language Test" %}</title>
|
||||
<style>
|
||||
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; margin: 0; background: #f4f7fb; color: #0f172a; }
|
||||
.wrap { max-width: 860px; margin: 48px auto; padding: 0 20px; }
|
||||
.card { background: #fff; border: 1px solid #dbe3ef; border-radius: 14px; padding: 24px; box-shadow: 0 6px 20px rgba(12, 34, 81, .08); }
|
||||
h1 { margin: 0 0 12px; font-size: 1.8rem; }
|
||||
p { margin: 0 0 16px; color: #334155; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
|
||||
.lang-link { display: block; padding: 10px 12px; border: 1px solid #c7d4e9; border-radius: 10px; text-decoration: none; color: #1e3a8a; background: #f8fbff; font-weight: 600; }
|
||||
.lang-link.active { border-color: #2563eb; background: #eaf2ff; color: #1d4ed8; }
|
||||
.back { margin-top: 18px; display: inline-block; color: #334155; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<div class="card">
|
||||
<h1>{% trans "Language Switch Test Page" %}</h1>
|
||||
<p>{% blocktrans %}Current language code: {{ current_language }}{% endblocktrans %}</p>
|
||||
|
||||
<div class="grid">
|
||||
{% for code, name in languages %}
|
||||
{% language code %}
|
||||
<a class="lang-link {% if current_language|slice::2 == code|slice::2 %}active{% endif %}" href="{% url language_test %}">
|
||||
{{ code|upper }} - {{ name }}
|
||||
</a>
|
||||
{% endlanguage %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<a class="back" href="/">{% trans "Back to homepage" %}</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 %}
|
||||
{% 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">
|
||||
|
||||
@@ -2,12 +2,14 @@ from django.conf.urls.i18n import i18n_patterns
|
||||
from django.urls import include, path
|
||||
|
||||
from ocyan.main.urls import urlpatterns as ocyan_urlpatterns
|
||||
from mandelstudio.views import language_test
|
||||
|
||||
urlpatterns = [
|
||||
path("i18n/", include("django.conf.urls.i18n")),
|
||||
]
|
||||
|
||||
urlpatterns += i18n_patterns(
|
||||
path("language-test/", language_test, name="language_test"),
|
||||
*ocyan_urlpatterns,
|
||||
prefix_default_language=False,
|
||||
)
|
||||
|
||||
14
mandelstudio/views.py
Normal file
14
mandelstudio/views.py
Normal file
@@ -0,0 +1,14 @@
|
||||
from django.conf import settings
|
||||
from django.shortcuts import render
|
||||
from django.utils.translation import get_language
|
||||
|
||||
|
||||
def language_test(request):
|
||||
return render(
|
||||
request,
|
||||
"mandelstudio/language_test.html",
|
||||
{
|
||||
"current_language": get_language(),
|
||||
"languages": settings.LANGUAGES,
|
||||
},
|
||||
)
|
||||
Reference in New Issue
Block a user