Add locale switcher on mobile

This commit is contained in:
montylion 2021-08-23 10:10:50 +02:00
parent f2dd459d6b
commit 8dadac73dd
No known key found for this signature in database
GPG Key ID: E259C2F34CE17F04
2 changed files with 31 additions and 10 deletions

View File

@ -541,11 +541,6 @@ footer {
display: none;
}
.locale-dropdown {
/* You don't really need this either on mobile IMHO */
display: none;
}
.hero-meta {
margin-top: 100px;
}
@ -633,3 +628,29 @@ footer {
}
}
@media screen and (max-width: 500px) {
.selected-locale .locale-names {
display: none;
}
.selected-locale {
width: 80px;
margin-left: auto;
margin-right: 12px;
}
}
@media screen and (max-width: 400px) {
.select-box .options-container {
width: 125px;
right: 12px;
}
}
@media screen and (max-width: 330px) {
.locale-dropdown {
display: none;
}
}

View File

@ -36,33 +36,33 @@
<div class="option">
<input type="radio" class="radio" id="en-US" name="category" />
<label for="en-US">
<div class="item"><span class="lang">🇺🇸</span>English</div>
<div class="item"><span class="lang">🇺🇸</span><span class="locale-names">English</span></div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="es-ES" name="category" />
<label for="es-ES">
<div class="item"><span class="lang">🇪🇸</span>Español</div>
<div class="item"><span class="lang">🇪🇸</span><span class="locale-names">Español</span></div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="it-IT" name="category" />
<label for="it-IT">
<div class="item"><span class="lang">🇮🇹</span>Italiano</div>
<div class="item"><span class="lang">🇮🇹</span><span class="locale-names">Italiano</span></div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="ru-RU" name="category" />
<label for="ru-RU">
<div class="item"><span class="lang">🇷🇺</span>Pусский</div>
<div class="item"><span class="lang">🇷🇺</span><span class="locale-names">Pусский</span></div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="tr-TR" name="category" />
<label for="tr-TR">
<div class="item"><span class="lang">🇹🇷</span>Türkçe</div>
<div class="item"><span class="lang">🇹🇷</span><span class="locale-names">Türkçe</span></div>
</label>
</div>
</div>