mirror of
https://github.com/LibreTranslate/LibreTranslate.git
synced 2024-11-21 23:41:01 +00:00
Add downArrow to select language + fix select language problem with small screens
This commit is contained in:
idotj
parent
6e086b411b
commit
42c95b9ace
3 changed files with 72 additions and 23 deletions
|
|
@ -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
2
app/static/css/main.min.css
vendored
|
|
@ -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}}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue