Locale select panel mock

This commit is contained in:
Piero Toffanin 2023-01-05 16:06:19 -05:00
parent f0457da7b6
commit aa5936dae5
3 changed files with 67 additions and 3 deletions

View file

@ -1,2 +1,3 @@
**/*.mo
.langs.py
.langs.py
.swag.py

View file

@ -39,6 +39,61 @@ h3.header {
position: relative;
}
.top-nav .locale-panel{
position: absolute;
top: 64px;
height: 68px;
left: -9px;
padding: 0 16px;
background: #1565c0;
width: 240px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0px 4px 5px 0 rgb(0 0 0 / 20%);
}
.locale-panel select{
display: block;
height: 32px;
font-size: 14px;
background-color: #fff;
}
.locale-panel a{
line-height: normal;
font-size: 90%;
padding: 0;
margin-top: 6px;
text-align: right;
}
.locale-panel a i.material-icons{
display: inline-block;
line-height: initial;
line-height: 14px;
font-size: 100%;
position: relative;
top: 2px;
left: 2px;
}
.locale-panel a:hover{
background-color: transparent;
}
#nav-mobile .locale-panel{
color: rgba(0,0,0,0.87);
padding: 0 32px;
}
#nav-mobile .locale-panel a{
padding: 0;
}
#nav-mobile .locale-panel a i.material-icons{
float: none;
}
.language-select {
display: inline-flex;
align-items: center;

View file

@ -62,7 +62,7 @@
<img src="{{ url_for('static', filename='icon.svg') }}" alt="LibreTranslate" class="logo">
<span>LibreTranslate</span>
</a>
<ul class="right hide-on-med-and-down">
<ul class="right hide-on-med-and-down top-nav position-relative">
{% set menulinks %}
<li><a href="{{ swagger_url }}">{{ _h("API Docs") }}</a></li>
{% if get_api_key_link %}
@ -72,7 +72,15 @@
{% if api_keys %}
<li><a class="noline" href="javascript:setApiKey()" title="{{ _h('Set API Key') }}"><i class="material-icons">vpn_key</i></a></li>
{% endif %}
<li><a class="noline" href="#" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a></li>
<li><a class="noline" href="#" title="{{ _h('Change language') }}"><i class="material-icons">language</i></a>
</li>
<li class="locale-panel">
<select id="locales">
<option value="en">English</option>
<option value="it">Italian</option>
</select>
<a href="#">Improve this language<i class="material-icons">create</i></a>
</li>
{% endset %}
{{ menulinks }}
</ul>