Use ul instead of div and BEM naming

This commit is contained in:
Marvin Dalheimer 2019-08-13 08:44:40 +02:00
parent 270a135fca
commit 28dd0fadf9
3 changed files with 15 additions and 13 deletions

View File

@ -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>

View File

@ -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;

View File

@ -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")) {