Fix language toggle: use body class instead of inline styles
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
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:
@@ -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) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user