Merge pull request #103 from idotj/main

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

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;

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}}
+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}}

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>
+							<p class="mb-0">Request</p>
-							<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
+							<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>
+							<p class="mb-0">Response</p>
-							<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(output)">
+							<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', '');
+					if (el.value === this.sourceLang){
-					else el.removeAttribute('selected');
+						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', '');
+					if (el.value === this.targetLang){
-					else el.removeAttribute('selected');
+						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>