self-hosted/LibreTranslate
1
0
Fork 0
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-12-24 10:06:43 +02:00
Code Issues Releases Activity

fix translate text/file buttons

Browse Source
This commit is contained in:
Seth Falco 2022-01-04 20:20:02 +01:00
parent 27c4c12c1f
commit da36cd77cd
No known key found for this signature in database
GPG Key ID: DE1C217EFF01FEC8
2 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/static/css/main.css
View File

@ -56,6 +56,7 @@ h3.header {
outline: none; outline: none;
position: relative; position: relative;
} }
@-moz-document url-prefix() { @-moz-document url-prefix() {
.language-select select { .language-select select {
-moz-appearance: none; -moz-appearance: none;
@ -121,6 +122,9 @@ h3.header {
.btn-switch-type { .btn-switch-type {
background-color: #fff; background-color: #fff;
color: #42A5F5; color: #42A5F5;
display: flex;
align-items: center;
margin: .5rem;
} }
.btn-switch-type:focus { .btn-switch-type:focus {
@ -179,6 +183,22 @@ h3.header {
font-size: 1.35rem; font-size: 1.35rem;
} }
#translation-type-btns {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: -.5rem;
}
.btn-text {
display: none;
margin-left: 1em;
}
#translation-form {
padding-top: 1em;
}
.progress { .progress {
background-color: #f3f3f3; background-color: #f3f3f3;
} }
@ -236,6 +256,12 @@ h3.header {
height: 32px; height: 32px;
} }
@media (min-width: 280px) {
.btn-text {
display: inline;
}
}
@media (max-width: 760px) { @media (max-width: 760px) {
.language-select select { .language-select select {
text-align: center; text-align: center;

19
app/templates/index.html
View File

@ -37,8 +37,10 @@
<header> <header>
<nav class="blue lighten-1" role="navigation"> <nav class="blue lighten-1" role="navigation">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<a id="logo-container" href="/" class="brand-logo"> <a id="logo-container" href="/" class="brand-logo">
<img src="{{ url_for('static', filename='icon.svg') }}" class="logo"> LibreTranslate <img src="{{ url_for('static', filename='icon.svg') }}" alt="Logo for LibreTranslate" class="logo">
<span>LibreTranslate</span>
</a> </a>
<ul class="right hide-on-med-and-down"> <ul class="right hide-on-med-and-down">
<li><a href="/docs">API Docs</a></li> <li><a href="/docs">API Docs</a></li>
@ -55,7 +57,6 @@
<li><a href="javascript:setApiKey()" title="Set API Key"><i class="material-icons">vpn_key</i></a></li> <li><a href="javascript:setApiKey()" title="Set API Key"><i class="material-icons">vpn_key</i></a></li>
{% endif %} {% endif %}
</ul> </ul>
<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
</div> </div>
</nav> </nav>
</header> </header>
@ -105,11 +106,17 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<h3 class="header center">Translation API</h3> <h3 class="header center">Translation API</h3>
<div class="col s12 mb-1 center" v-if="filesTranslation === true"> <div id="translation-type-btns" class="s12 center" v-if="filesTranslation === true">
<button type="button" class="btn btn-switch-type" @click="switchType('text')" :class="{'active': translationType === 'text'}"><i class="material-icons left">title</i>Translate text</button> <button type="button" class="btn btn-switch-type" @click="switchType('text')" :class="{'active': translationType === 'text'}">
<button type="button" class="btn btn-switch-type" @click="switchType('files')" :class="{'active': translationType === 'files'}"><i class="material-icons left">description</i>Translate files</button> <i class="material-icons">title</i>
<span class="btn-text">Translate Text</span>
</button>
<button type="button" class="btn btn-switch-type" @click="switchType('files')" :class="{'active': translationType === 'files'}">
<i class="material-icons">description</i>
<span class="btn-text">Translate Files</span>
</button>
</div> </div>
<form class="col s12"> <form id="translation-form" class="col s12">
<div class="row mb-0"> <div class="row mb-0">
<div class="col s6 language-select"> <div class="col s6 language-select">
<span>Translate from</span> <span>Translate from</span>