diff --git a/app/static/css/main.css b/app/static/css/main.css index ff697aa3fab56646df6e0db9ba23e42bef4b82c2..9e6b8c5f38b2ba75e1a147955f655383b9398cb3 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 5242e7879ea37919f3dba89422cf93e80b0e18a9..379c3176c1efa2b405c368dd220161122a07271f 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>