diff options
| author | imperatormk <darko.simonovski@hotmail.com> | 2020-03-25 00:29:08 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-03-25 09:29:08 +1000 |
| commit | 363f62ae5f1255ac2580bdf32ae7b98b78cee5a3 (patch) | |
| tree | 8c6ea1928736e39376f5c9ffa45464102a798237 /templates | |
| parent | 5803bcb6fc5179c26c8b908eeb48fe923e543550 (diff) | |
Reworked upload box (#2)
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/base.html | 3 | ||||
| -rw-r--r-- | templates/upload.html | 63 |
2 files changed, 32 insertions, 34 deletions
diff --git a/templates/base.html b/templates/base.html index 854a845..a156f3b 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,6 +6,7 @@ <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" type="text/css" href="/static/theme.css">
+ <link rel="stylesheet" type="text/css" href="/static/upload.css">
{{ template "stylesheets" . }}
{{ template "css" . }}
@@ -14,7 +15,7 @@ <body>
<nav>
<a href="/">Tube</a>
- <a class="centered" href="/upload">Upload</a>
+ <a class="centered" style="text-indent: 0;" href="/upload">Upload</a>
</nav>
<main>
{{template "content" .}}
diff --git a/templates/upload.html b/templates/upload.html index 3701eec..1716b65 100644 --- a/templates/upload.html +++ b/templates/upload.html @@ -1,38 +1,35 @@ {{define "content"}} - <div id="upload"> - <form id="upload_form" enctype="multipart/form-data" method="POST" action="/upload"> - <div> - <label class="filebutton"> - Select a video to upload... - <span><input type="file" name="video_file" id="video_file" accept="video/*" onchange="fileSelected();" /></span> - </label> + <div style="text-align: center;"> + <label class="upload-container" onclick="labelClicked(event)"> + <div class="upload-wrapper"> + <form id="upload-form" class="upload-form" enctype="multipart/form-data" method="POST" action="/upload"> + <input id="video-input" type="file" accept="video/*" onchange="fileSelected()" style="display: none;"/> + <div class="upload-box"> + <img width="100" src="/static/upload-icon.png"/> + <span>Click to browse or drop file here</span> + </div> + <div class="upload-details"> + <div id="upload-file" class="upload-file"> + <span id="upload-filename"></span> + <img width="20" src="/static/close-icon.png" onclick="removeFile(event)"/> + </div> + <span id="upload-message" class="upload-message">No file selected</span> + <div id="upload-button-wrapper" class="upload-button-wrapper"> + <button id="upload-button" class="upload-button" onclick="startUploading()" type="button"> + <span id="upload-stopped">Upload</span> + <span id="upload-started" class="loader" style="display: none;"></span> + </button> + </div> + <div id="upload-progress-container" class="upload-progress-container"> + <div id="upload-progress" class="upload-progress"> + <span id="upload-progress-label" class="upload-progress-label"></span> + </div> + <div style="flex-grow: 1;"></div> + </div> + </div> + </form> </div> - - <div> - <input type="button" value="Upload" onclick="startUploading()" /> - </div> - - <div id="error">You should select valid image files only!</div> - <div id="error2">An error occurred while uploading the file</div> - <div id="abort">The upload has been canceled by the user or the browser dropped the connection</div> - <div id="warnsize">Your file is very big. We can't accept it. Please select more small file</div> - - <div id="progress_info"> - <div id="progress"></div> - <div id="progress_percent"> </div> - <div class="clear_both"></div> - <div> - <div id="speed"> </div> - <div id="remaining"> </div> - <div id="b_transfered"> </div> - <div class="clear_both"></div> - </div> - - <div id="upload_response"> - <div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div> - </div> - </div> - </form> + </label> </div> {{end}} {{define "scripts"}} |