wire up language selector
This commit is contained in:
John Hess
parent
b00cc94e73
commit
744ac98289
6 changed files with 114 additions and 27 deletions
|
|
@ -13,6 +13,8 @@ message_board: "Message Board"
|
|||
app_store: 'App Store'
|
||||
offline_maps: 'Offline Maps'
|
||||
|
||||
language_prompt: 'Language'
|
||||
|
||||
apps:
|
||||
breadcrumb: "App Store"
|
||||
footer: The Butter App Store is built on F-Droid free software
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
<div class="header-container">
|
||||
<img src="{{ site.baseurl }}/assets/images/butter-app-icon-large.svg" alt="Paddy, the Butter Box Mascot" class="header-image" />
|
||||
<div class="title">{% t site_name %}</div>
|
||||
<div class="language-selector">
|
||||
<a class="language-selector" href="#" data-micromodal-trigger="language-selector-modal">
|
||||
<img src="{{ site.baseurl }}/assets/images/globe.svg" alt="language selector icon"/>
|
||||
<span class="language-code">{{ site.lang | upcase }}</span>
|
||||
<img src="{{ site.baseurl }}/assets/images/caret-down.svg"/>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</header>
|
||||
|
||||
{% include language-selector.html %}
|
||||
|
|
|
|||
28
_includes/language-selector.html
Normal file
28
_includes/language-selector.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<div class="modal micromodal-slide" id="language-selector-modal" aria-hidden="true">
|
||||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||||
<div class="modal__container language-selector-container" role="dialog" aria-modal="true" aria-labelledby="product-modal-title">
|
||||
<main class="modal__content" id="product-modal-content">
|
||||
<div class="modal__content__header">
|
||||
<div class="header__text">
|
||||
<h2 class="modal__title ls-40" id="product-modal-title">{% t language_prompt %}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal__content__description">
|
||||
{% for lang in site.languages %}
|
||||
{% if forloop.index0 == 0 %}
|
||||
<a class="language-selection" href="{{ page.url | relative_url }}">
|
||||
<input type="radio" id="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
|
||||
<label for="{{ lang }}" onclick="location.href='{{ page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
|
||||
</a href="">
|
||||
{% else %}
|
||||
<a class="language-selection" href="{{ lang + page.url | relative_url }}">
|
||||
<input type="radio" id="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'" name="language" value="{{ lang }}" {% if site.lang == lang %}checked{% endif %}>
|
||||
<label for="{{ lang }}" onclick="location.href='{{ lang + page.url | relative_url }}'">{{ site.data.home.language_selector[lang] }}</label>
|
||||
</a href="">
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,4 +4,4 @@ layout: basic
|
|||
|
||||
{% include header.html %}
|
||||
|
||||
{{ content }}
|
||||
{{ content }}
|
||||
|
|
|
|||
|
|
@ -80,6 +80,10 @@ a:active {
|
|||
padding: 0 10px;
|
||||
width: 100px;
|
||||
}
|
||||
.language-selector:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.language-code {
|
||||
margin: 0 8px;
|
||||
|
|
@ -103,6 +107,56 @@ a:active {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.language-selector-container {
|
||||
h2.modal__title {
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
margin: 20px 0;
|
||||
}
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.language-selection {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin: 15px 0px;
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border: 2px solid #9B9A98;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="radio"]::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #333; /* Change this to your desired color */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 16px;
|
||||
margin-left: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.language-selection:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
|
|||
47
index.html
47
index.html
|
|
@ -6,28 +6,29 @@ layout: default
|
|||
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
<h1 class="homepage-title">{% t butter_box_title %}</h1>
|
||||
<!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
|
||||
<div class="card-set">
|
||||
<a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
|
||||
class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
|
||||
{% t explore %}
|
||||
</a>
|
||||
<div id="usb-butter-placeholder" class="card">
|
||||
{% t explore_missing %}
|
||||
<h1 class="homepage-title">{% t butter_box_title %}</h1>
|
||||
<!-- Defaults to display: none; revealed via JS depending on USB insertion. -->
|
||||
<div class="card-set">
|
||||
<a href="{{ site.usb_butter_url }}" id="usb-butter" style="display: none;" data-url="{{ site.usb_butter_url }}"
|
||||
class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/explore-icon.svg" alt="Explore Icon" class="card-icon-big">
|
||||
{% t explore %}
|
||||
</a>
|
||||
<div id="usb-butter-placeholder" class="card">
|
||||
{% t explore_missing %}
|
||||
</div>
|
||||
<a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
|
||||
{% t message_board %}
|
||||
</a>
|
||||
<a href="{{ site.baseurl }}/apps" class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
|
||||
{% t app_store %}
|
||||
</a>
|
||||
<a href="{{ site.baseurl }}/maps" class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
|
||||
{% t offline_maps %}
|
||||
</a>
|
||||
</div>
|
||||
<a href="/chat/#/room/%23public%3A{{site.data.deployment.chat_server}}" class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/message-icon.svg" alt="Message Icon" class="card-icon">
|
||||
{% t message_board %}
|
||||
</a>
|
||||
<a href="{{ site.baseurl }}/apps" class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/appstore-icon.svg" alt="App Store Icon" class="card-icon">
|
||||
{% t app_store %}
|
||||
</a>
|
||||
<a href="{{ site.baseurl }}/maps" class="card">
|
||||
<img src="{{ site.baseurl }}/assets/images/maps-icon.svg" alt="Maps Icon" class="card-icon">
|
||||
{% t offline_maps %}
|
||||
</a>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue