maride/hugo-theme-terminal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use ul instead of div and BEM naming

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
layouts/partials/menu.html
View File

@ -29,17 +29,16 @@
{{ if $.Site.Params.showLanguageSelector }} {{ if $.Site.Params.showLanguageSelector }}
<div class="spacer"></div> <div class="spacer"></div>
<div class="language-selector"> <ul class="language-selector">
<ul class="language-selector-current">
<div class="language-selector-actual"> <li>{{ .Language.LanguageName }} ▾</li>
<li class="list-inline-item">{{ .Language.LanguageName }} ▾</li> </ul>
</div> <ul class="language-selector__more hidden">
<div class="language-selector-more hidden">
{{ range $.Site.Home.AllTranslations }} {{ 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 }} {{ end }}
</div> </ul>
</div> </ul>
{{ end }} {{ end }}
</ul> </ul>

7
source/css/header.css
View File

@ -127,16 +127,19 @@
.language-selector { .language-selector {
position: relative; position: relative;
list-style: none;
margin: 0;
.language-selector-actual { &-current {
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
color: var(--accent); color: var(--accent);
cursor: pointer; cursor: pointer;
margin: 0;
} }
.language-selector-more { &__more {
@mixin menu; @mixin menu;
top: 35px; top: 35px;
right: 0; right: 0;

4
source/js/languageSelector.js
View File

@ -2,8 +2,8 @@ const mobileQuery = getComputedStyle(document.body).getPropertyValue("--phoneWid
const isMobile = () => window.matchMedia(mobileQuery).matches; const isMobile = () => window.matchMedia(mobileQuery).matches;
if(!isMobile()) { if(!isMobile()) {
languageSelector = document.getElementsByClassName("language-selector-actual")[0]; languageSelector = document.querySelector(".language-selector-current");
moreLanguagesContainer = document.getElementsByClassName("language-selector-more")[0]; moreLanguagesContainer = document.querySelector(".language-selector__more");
document.body.addEventListener("click", () => { document.body.addEventListener("click", () => {
if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) { if (moreLanguagesContainer && !moreLanguagesContainer.classList.contains("hidden")) {