From 558f58e4b203338964f5dd4aee0c1a664f156bee Mon Sep 17 00:00:00 2001
From: Seth Falco <seth@falco.fun>
Date: Tue, 4 Jan 2022 21:13:43 +0100
Subject: [PATCH] bug: optimize download btn for mobile

---
 app/static/css/main.css  | 11 +++++++++++
 app/templates/index.html | 12 ++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index 333528c..dd76da6 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -256,6 +256,17 @@ h3.header {
   height: 32px;
 }
 
+#download-btn-wrapper {
+  display: flex;
+  justify-content: center;
+  margin: 2em 0;
+}
+
+#download-btn {
+  display: flex;
+  align-items: center;
+}
+
 @media (min-width: 280px) {
   .btn-text {
     display: inline;
diff --git a/app/templates/index.html b/app/templates/index.html
index a38bd46..4efcf31 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -243,20 +243,24 @@
 				</div>
 			</div>
 		</div>
-		{% if web_version %}
+    {% if web_version %}
 		<div class="section no-pad-bot">
 			<div class="container">
 				<div class="row center">
 					<div class="col s12 m12">
 						<h3 class="header">Open Source Machine Translation API</h3>
 						<h4 class="header">100% Self-Hosted. Offline Capable. Easy to Setup.</h4>
-						<br/><a class="waves-effect waves-light btn btn-large" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer"><i class="material-icons left">cloud_download</i> Download</a>
-						<br/><br/><br/>
+            <div id="download-btn-wrapper">
+              <a id="download-btn" class="waves-effect waves-light btn btn-large" href="https://github.com/LibreTranslate/LibreTranslate" rel="noopener noreferrer">
+                <i class="material-icons">cloud_download</i>
+                <span class="btn-text">Download</span>
+              </a>
+            </div>
 					</div>
 				</div>
 			</div>
 		</div>
-		{% endif %}
+    {% endif %}
 	</div>
 	</main>