Fix language toggle: use body class instead of inline styles
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

- EN mode no longer shows Russian subtitle under mineral name
- RU mode now correctly reveals all lang-ru elements via CSS body.mode-ru rules
- Subtitle in RU mode shows English name as reference below Russian heading

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-31 08:45:33 +03:00
parent 8a162afe2a
commit 1e5453f62d

View File

@@ -243,6 +243,9 @@
/* Language content */ /* Language content */
.lang-ru { display: none; } .lang-ru { display: none; }
body.mode-ru .lang-en { display: none; }
body.mode-ru span.lang-ru { display: inline; }
body.mode-ru div.lang-ru { display: block; }
.mineral-name-ru { .mineral-name-ru {
font-size: 1.1rem; font-size: 1.1rem;
@@ -492,10 +495,7 @@
</button> </button>
</div> </div>
{% if mineral.name_ru %} {% if mineral.name_ru %}
<div class="mineral-name-ru"> <div class="mineral-name-ru lang-ru">{{ mineral.name }}</div>
<span class="lang-en">{{ mineral.name_ru }}</span>
<span class="lang-ru">{{ mineral.name }}</span>
</div>
{% endif %} {% endif %}
{% if mineral.formula %}<div class="formula">{{ mineral.formula|chem_formula }}</div>{% endif %} {% if mineral.formula %}<div class="formula">{{ mineral.formula|chem_formula }}</div>{% endif %}
<div class="date">{{ today|date:"F j, Y" }}</div> <div class="date">{{ today|date:"F j, Y" }}</div>
@@ -677,15 +677,12 @@
} }
function setLang(lang) { function setLang(lang) {
var en = document.querySelectorAll('.lang-en'); document.body.classList.toggle('mode-ru', lang === 'ru');
var ru = document.querySelectorAll('.lang-ru');
for (var i = 0; i < en.length; i++) en[i].style.display = lang === 'en' ? '' : 'none';
for (var i = 0; i < ru.length; i++) ru[i].style.display = lang === 'ru' ? '' : 'none';
var btns = document.querySelectorAll('.lang-toggle button'); var btns = document.querySelectorAll('.lang-toggle button');
for (var i = 0; i < btns.length; i++) { for (var i = 0; i < btns.length; i++) {
btns[i].classList.toggle('active', btns[i].getAttribute('data-lang') === lang); btns[i].classList.toggle('active', btns[i].getAttribute('data-lang') === lang);
} }
document.documentElement.lang = lang; document.documentElement.lang = lang === 'ru' ? 'ru' : 'en';
try { localStorage.setItem('dailystone-lang', lang); } catch(e) {} try { localStorage.setItem('dailystone-lang', lang); } catch(e) {}
} }