mnalis/organicmaps-website
1
Fork 0
forked from organicmaps/website
Code Pull requests Activity

Explicit naming and horizontal items for language menu

Browse source 
Signed-off-by: Alexander Borsuk <me@alex.bio>
This commit is contained in:
Alexander Borsuk 2022-11-29 13:27:11 +01:00
parent 3e6f5966a3
commit 2ae9607f02
2 changed files with 17 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
sass/_language_selector.scss
View file

@ -23,43 +23,42 @@ $baseBgColor: black;
color: red;
}
.menu {
.lang-menu {
display: none;
// It's a list, so remove list padding (where bullets are usually drawn).
padding: 0;
list-style: none;
&__item {
// Stretch/shrink all menu items proportionally.
flex: 1 1 auto;
margin-left: 20px;
&-item {
margin-left: 1em;
&:first-child {
margin-left: 0;
}
}
&__link {
&-link {
@include MenuItemsTextStyling;
text-decoration: none;
}
}
input.menu_trigger {
input.lang-menu-trigger {
// Hide input checkbox, label is used for touch events instead.
position: absolute;
clip: rect(0, 0, 0, 0);
// Show menu on checkbox click.
&:checked ~ .menu {
&:checked ~ .lang-menu {
// Turn flexbox ul again into a block and reset it's properties.
display: block;
display: flex;
flex-wrap: wrap;
justify-content: center;
z-index: 999;
.menu__item {
.lang-menu-item {
text-align: center;
margin: 1em;
}
}
@ -69,6 +68,6 @@ input.menu_trigger {
}
// Menu button
label[for="menu_trigger"] {
label[for="lang-menu-trigger"] {
@include MenuItemsTextStyling;
}

12
templates/language_selector.html
View file

@ -6,16 +6,16 @@
}
</script>
<!-- Hidden checkbox is used for pure CSS toggle menu. -->
<input type="checkbox" id="menu_trigger" class="menu_trigger" />
<label class="no-print" for="menu_trigger">
<input type="checkbox" id="lang-menu-trigger" class="lang-menu-trigger" />
<label class="no-print" for="lang-menu-trigger">
 🌐 {{ lang | upper }}
</label>
<ul class="menu no-print" role="navigation">
{% for translation in resource.translations %}
<ul class="lang-menu no-print" role="navigation">
{% for translation in resource.translations | sort(attribute="lang") %}
{% if lang != translation.lang %}
<li class="menu__item" role="menuitem">
<a class="menu__link" onclick="return onLanguageClick('{{translation.lang}}');" href="{{ translation.permalink }}">
<li class="lang-menu-item" role="menuitem">
<a class="lang-menu-link" onclick="return onLanguageClick('{{ translation.lang }}');" href="{{ translation.permalink }}">
{{ trans(key="language", lang=translation.lang) }}
</a>
</li>