From da36cd77cdf6dca78777747843a8d582a9afad17 Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Tue, 4 Jan 2022 20:20:02 +0100
Subject: [PATCH] fix translate text/file buttons

---
 app/static/css/main.css  | 30 ++++++++++++++++++++++++++++--
 app/templates/index.html | 35 +++++++++++++++++++++--------------
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index 2aca92b..333528c 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -56,6 +56,7 @@ h3.header {
   outline: none;
   position: relative;
 }
+
 @-moz-document url-prefix() {
   .language-select select {
     -moz-appearance: none;
@@ -119,8 +120,11 @@ h3.header {
 }
 
 .btn-switch-type {
-    background-color: #fff;
-    color: #42A5F5;
+  background-color: #fff;
+  color: #42A5F5;
+  display: flex;
+  align-items: center;
+  margin: .5rem;
 }
 
 .btn-switch-type:focus {
@@ -179,6 +183,22 @@ h3.header {
   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 {
   background-color: #f3f3f3;
 }
@@ -236,6 +256,12 @@ h3.header {
   height: 32px;
 }
 
+@media (min-width: 280px) {
+  .btn-text {
+    display: inline;
+  }
+}
+
 @media (max-width: 760px) {
   .language-select select {
     text-align: center;
diff --git a/app/templates/index.html b/app/templates/index.html
index 6718afe..a38bd46 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -5,14 +5,14 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>LibreTranslate - Free and Open Source Machine Translation API</title>
 	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-    <meta name="description" content="Free and Open Source Machine Translation API. 100% self-hosted, offline capable and easy to setup. Run your own API server in just a few minutes.">
-    <meta name="keywords" content="translation,api">
+  <meta name="description" content="Free and Open Source Machine Translation API. 100% self-hosted, offline capable and easy to setup. Run your own API server in just a few minutes.">
+  <meta name="keywords" content="translation,api">
 
-    <meta property="og:title" content="LibreTranslate - Free and Open Source Machine Translation API" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://libretranslate.com" />
-    <meta property="og:image" content="https://user-images.githubusercontent.com/1951843/102724116-32a6df00-42db-11eb-8cc0-129ab39cdfb5.png" />
-    <meta property="og:description" name="description" class="swiftype" content="Free and Open Source Machine Translation API. 100% self-hosted, no limits, no ties to proprietary services. Run your own API server in just a few minutes."/>
+  <meta property="og:title" content="LibreTranslate - Free and Open Source Machine Translation API" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://libretranslate.com" />
+  <meta property="og:image" content="https://user-images.githubusercontent.com/1951843/102724116-32a6df00-42db-11eb-8cc0-129ab39cdfb5.png" />
+  <meta property="og:description" name="description" class="swiftype" content="Free and Open Source Machine Translation API. 100% self-hosted, no limits, no ties to proprietary services. Run your own API server in just a few minutes."/>
 
 	<script src="{{ url_for('static', filename='js/vue@2.js') }}"></script>
 	<!-- Compiled and minified CSS -->
@@ -37,8 +37,10 @@
 	<header>
 		<nav class="blue lighten-1" role="navigation">
 			<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">
-					<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>
 				<ul class="right hide-on-med-and-down">
 				<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>
 				{% endif %}
 				</ul>
-				<a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
 			</div>
 		</nav>
 	</header>
@@ -105,11 +106,17 @@
 			<div class="container">
 				<div class="row">
 					<h3 class="header center">Translation API</h3>
-                    <div class="col s12 mb-1 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('files')" :class="{'active': translationType === 'files'}"><i class="material-icons left">description</i>Translate files</button>
-                    </div>
-					<form class="col s12">
+          <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">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>
+					<form id="translation-form" class="col s12">
 						<div class="row mb-0">
 							<div class="col s6 language-select">
 								<span>Translate from</span>