mirrors/LibreTranslate
1
1
Fork 1
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2024-11-21 15:31:00 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add downArrow to select language + fix select language problem with small screens

Browse source
This commit is contained in:
idotj 2021-06-13 19:11:58 +02:00
parent 6e086b411b
commit 42c95b9ace
3 changed files with 72 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/static/css/main.css
View file

@ -1,5 +1,12 @@
/* Custom styles for LibreTranslate page */
html,
body,
select {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif !important;
}
h3.header {
margin-bottom: 2.5rem;
}
@ -29,14 +36,37 @@ h3.header {
font-weight: 600;
text-decoration: underline;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 1px;
background-color: transparent;
padding: 0 1.25rem 0 0.25rem;
text-indent: 0.01px;
text-overflow: "";
padding: 0;
margin: 0;
height: 2rem;
line-height: inherit;
outline: none;
position: relative;
}
@-moz-document url-prefix() {
.language-select select {
-moz-appearance: none;
text-indent: -2px;
margin-right: -8px;
}
}
.language-select:after {
content: "";
width: 0.5em;
height: 0.5em;
margin: 0 0 0.25rem -0.75rem;
border: solid black;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
z-index: -1;
}
.btn-switch-language {
color: black;
@ -123,7 +153,7 @@ h3.header {
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
clip: rect(0, 0, 0, 0);
border: 0;
}
@ -141,25 +171,25 @@ h3.header {
.page-footer .footer-copyright {
justify-content: center;
padding: 0.5rem 1rem;
}
#logo-container{
#logo-container {
height: 100%;
}
.logo{
.logo {
height: 32px;
}
@media (max-width: 991px) {
.language-select {
}
}
@media (max-width: 760px) {
.language-select select{
.language-select select {
text-align: center;
margin: auto;
padding: 0;
}
.language-select:after {
content: none;
}
.language-select span {
display: none;

2
app/static/css/main.min.css vendored
View file

@ -1 +1 @@
h3.header{margin-bottom:2.5rem}.mb-0{margin-bottom:0!important}.mt-0{margin-top:0!important}.position-relative{position:relative}.language-select{display:inline-flex;align-items:center;justify-content:flex-start}.language-select select{border:none;width:auto;cursor:pointer;font-weight:600;text-decoration:underline;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-indent:1px;text-overflow:"";padding:0;height:2rem}.btn-switch-language{color:#000;margin-left:-1.5rem;margin-right:1rem}.textarea-container{margin-top:0;position:relative}.btn-delete-text{position:absolute;right:1.5rem;top:.75rem;border:0;background:0 0;padding:0;cursor:pointer;color:#777}.btn-copy-translated:focus,.btn-delete-text:focus{background:0 0!important}.characters-limit-container{position:absolute;right:2rem;bottom:1rem;color:#777;pointer-events:none}.btn-copy-translated{position:absolute;right:2.75rem;bottom:1rem;display:flex;align-items:center;color:#777;font-size:.85rem;background:0 0;border:none;cursor:pointer;margin-right:-1.5rem}.btn-copy-translated span{padding-right:.5rem}.btn-copy-translated .material-icons{font-size:1.35rem}.progress{background-color:#f3f3f3}.progress.translate{position:absolute}.progress .indeterminate{background-color:#4682b4}.textarea-container textarea{font-size:1.25rem;resize:none;border:1px solid #ccc;background:#f3f3f3;padding:1rem 2rem 1rem 1.5rem;overflow-y:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.code{font-size:90%;padding:1rem 1.5rem;border:1px solid #ccc;background:#fbfbfb;overflow:auto;font-family:monospace;min-height:280px;width:100%;overflow:auto}.page-footer .footer-copyright{justify-content:center}#logo-container{height:100%}.logo{height:32px}@media (max-width:760px){.language-select select{text-align:center;margin:auto}.language-select span{display:none}}
body,html,select{font-size:16px;font-family:Arial,Helvetica,sans-serif!important}h3.header{margin-bottom:2.5rem}.mb-0{margin-bottom:0!important}.mt-0{margin-top:0!important}.position-relative{position:relative}.language-select{display:inline-flex;align-items:center;justify-content:flex-start}.language-select select{border:none;width:auto;cursor:pointer;font-weight:600;text-decoration:underline;-webkit-appearance:none;appearance:none;background-color:transparent;padding:0 1.25rem 0 .25rem;text-indent:.01px;text-overflow:"";margin:0;height:2rem;line-height:inherit;outline:0;position:relative}@-moz-document url-prefix(){.language-select select{-moz-appearance:none;text-indent:-2px;margin-right:-8px}}.language-select:after{content:"";width:.5em;height:.5em;margin:0 0 .25rem -.75rem;border:solid #000;border-width:0 2px 2px 0;display:inline-block;padding:3px;transform:rotate(45deg);z-index:-1}.btn-switch-language{color:#000;margin-left:-1.5rem;margin-right:1rem}.textarea-container{margin-top:0;position:relative}.btn-delete-text{position:absolute;right:1.5rem;top:.75rem;border:0;background:0 0;padding:0;cursor:pointer;color:#777}.btn-copy-translated:focus,.btn-delete-text:focus{background:0 0!important}.characters-limit-container{position:absolute;right:2rem;bottom:1rem;color:#777;pointer-events:none}.btn-copy-translated{position:absolute;right:2.75rem;bottom:1rem;display:flex;align-items:center;color:#777;font-size:.85rem;background:0 0;border:none;cursor:pointer;margin-right:-1.5rem}.btn-copy-translated span{padding-right:.5rem}.btn-copy-translated .material-icons{font-size:1.35rem}.progress{background-color:#f3f3f3}.progress.translate{position:absolute}.progress .indeterminate{background-color:#4682b4}.textarea-container textarea{font-size:1.25rem;resize:none;border:1px solid #ccc;background:#f3f3f3;padding:1rem 2rem 1rem 1.5rem;overflow-y:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.code{font-size:90%;padding:1rem 1.5rem;border:1px solid #ccc;background:#fbfbfb;overflow:auto;font-family:monospace;min-height:280px;width:100%;overflow:auto}.page-footer .footer-copyright{justify-content:center;padding:.5rem 1rem}#logo-container{height:100%}.logo{height:32px}@media (max-width:760px){.language-select select{text-align:center;margin:auto;padding:0}.language-select:after{content:none}.language-select span{display:none}}

39
app/templates/index.html
View file

@ -122,7 +122,7 @@
<i class="material-icons">swap_horiz</i>
</a>
<span>Translate into</span>
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<template v-for="option in langs">
<option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option>
</template>
@ -172,13 +172,13 @@
<div class="row center">
<div class="col s12 m12 l6 left-align">
<p>Request</p>
<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
<p class="mb-0">Request</p>
<pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
</code></pre>
</div>
<div class="col s12 m12 l6 left-align">
<p>Response</p>
<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(output)">
<p class="mb-0">Response</p>
<pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(output)">
</code></pre>
</div>
</div>
@ -337,17 +337,27 @@
}
// Update "selected" attribute (to overcome a vue.js limitation)
// but properly display checkmarks on supported browsers
// but properly display checkmarks on supported browsers.
// Also change the <select> width value depending on the <option> length
for (var i = 0; i < this.$refs.sourceLangDropdown.children.length; i++){
var el = this.$refs.sourceLangDropdown.children[i];
if (el.value === this.sourceLang) el.setAttribute('selected', '');
else el.removeAttribute('selected');
if (el.value === this.sourceLang){
el.setAttribute('selected', '');
this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
}else{
el.removeAttribute('selected');
}
}
for (var i = 0; i < this.$refs.targetLangDropdown.children.length; i++){
var el = this.$refs.targetLangDropdown.children[i];
if (el.value === this.targetLang) el.setAttribute('selected', '');
else el.removeAttribute('selected');
if (el.value === this.targetLang){
el.setAttribute('selected', '');
this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
}else{
el.removeAttribute('selected');
}
}
},
computed: {
requestCode: function(){
@ -467,6 +477,14 @@
});
function getTextWidth(text) {
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var ctx = canvas.getContext("2d");
ctx.font = 'bold 16px sans-serif';
var textWidth = Math.ceil(ctx.measureText(text).width);
return textWidth;
}
function setApiKey(){
var prevKey = localStorage.getItem("api_key") || "";
var newKey = "";
@ -475,6 +493,7 @@
localStorage.setItem("api_key", newKey);
}
// @license-end
</script>
</body>