From 42c95b9ace09c261cae25a88385cdc77584dbbe9 Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Sun, 13 Jun 2021 19:11:58 +0200
Subject: [PATCH] Add downArrow to select language + fix select language
problem with small screens
---
app/static/css/main.css | 54 ++++++++++++++++++++++++++++---------
app/static/css/main.min.css | 2 +-
app/templates/index.html | 39 ++++++++++++++++++++-------
3 files changed, 72 insertions(+), 23 deletions(-)
diff --git a/app/static/css/main.css b/app/static/css/main.css
index 7d9bc25..1ad6227 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -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;
diff --git a/app/static/css/main.min.css b/app/static/css/main.min.css
index ab4127e..d8bab4e 100644
--- a/app/static/css/main.min.css
+++ b/app/static/css/main.min.css
@@ -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}}
\ No newline at end of file
+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}}
\ No newline at end of file
diff --git a/app/templates/index.html b/app/templates/index.html
index a30c374..4aa4bcc 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -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>
--
GitLab