From 6f63bab8a1b1a01f80130e53d3763eb2544fe68c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Thuret?= <contact@sebastien-thuret.fr>
Date: Sun, 24 Oct 2021 13:22:44 +0200
Subject: [PATCH] add file input

---
 app/static/css/main.css  | 17 +++++++++++++++++
 app/templates/index.html | 17 +++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/app/static/css/main.css b/app/static/css/main.css
index ff697aa..9e6b8c5 100644
--- a/app/static/css/main.css
+++ b/app/static/css/main.css
@@ -137,6 +137,23 @@ h3.header {
     color: #fff;
 }
 
+.file-dropzone {
+  font-size: 1.1rem;
+  border: 1px solid #ccc;
+  background: #f3f3f3;
+  padding: 1rem 2rem 1rem 1.5rem;
+  height: 220px;
+  position: relative;
+}
+
+.dropzone-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+}
+
 .btn-action {
   display: flex;
   align-items: center;
diff --git a/app/templates/index.html b/app/templates/index.html
index 5242e78..379c317 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -173,8 +173,21 @@
 							</div>
 						</div>
                         <div class="row" v-if="translationType === 'files'">
-                            <div class="input-field textarea-container col s12">
-                             
+                            <div class="file-dropzone">
+                                <div class="dropzone-content">
+                                    <span>Supported file format: </span>
+                                    <form action="#">
+                                        <div class="file-field input-field">
+                                            <div class="btn">
+                                                <span>File</span>
+                                                <input type="file">
+                                            </div>
+                                            <div class="file-path-wrapper hidden">
+                                                <input class="file-path validate" type="text">
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
                             </div>
                         </div>
 					</form>