Use ul instead of div and BEM naming
This commit is contained in:
parent
270a135fca
commit
28dd0fadf9
@ -29,17 +29,16 @@
|
||||
|
||||
{{ if $.Site.Params.showLanguageSelector }}
|
||||
<div class="spacer"></div>
|
||||
<div class="language-selector">
|
||||
|
||||
<div class="language-selector-actual">
|
||||
<li class="list-inline-item">{{ .Language.LanguageName }} ▾</li>
|
||||
</div>
|
||||
<div class="language-selector-more hidden">
|
||||
<ul class="language-selector">
|
||||
<ul class="language-selector-current">
|
||||
<li>{{ .Language.LanguageName }} ▾</li>
|
||||
</ul>
|
||||
<ul class="language-selector__more hidden">
|
||||
{{ range $.Site.Home.AllTranslations }}
|
||||
<li class="list-inline-item"><a class="text-dark" href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
|
||||
<li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</ul>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
||||
|
@ -127,16 +127,19 @@
|
||||
|
||||
.language-selector {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
.language-selector-actual {
|
||||
&-current {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: var(--accent);
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.language-selector-more {
|
||||
&__more {
|
||||
@mixin menu;
|
||||
top: 35px;
|
||||
right: 0;
|
||||
|
@ -2,8 +2,8 @@ const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWid
|
||||
const isMobile = () => window.matchMedia(mobileQuery).matches;
|
||||
|
||||
if(!isMobile()) {
|
||||
languageSelector = document.getElementsByClassName("language-selector-actual")[0];
|
||||
moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0];
|
||||
languageSelector = document.querySelector(".language-selector-current");
|
||||
moreLanguagesContainer = document.querySelector(".language-selector__more");
|
||||
|
||||
document.body.addEventListener("click", () => {
|
||||
if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {
|
||||
|
Loading…
Reference in New Issue
Block a user