From ce82e9b1471123e188d2c6137b587dd035b709e4 Mon Sep 17 00:00:00 2001
From: James Mills <prologic@shortcircuit.net.au>
Date: Sun, 22 Mar 2020 22:31:22 +1000
Subject: [PATCH] Try to improve the style of the input type=file
---
app/rice-box.go | 16 ++++++++--------
static/theme.css | 30 ++++++++++++++++++++++++++++++
templates/upload.html | 6 ++++--
3 files changed, 42 insertions(+), 10 deletions(-)
diff --git a/app/rice-box.go b/app/rice-box.go
index 1316a4e..d00278d 100644
--- a/app/rice-box.go
+++ b/app/rice-box.go
@@ -23,15 +23,15 @@ func init() {
}
file4 := &embedded.EmbeddedFile{
Filename: "upload.html",
- FileModTime: time.Unix(1584875538, 0),
+ FileModTime: time.Unix(1584879674, 0),
- Content: string("{{define \"content\"}}\n <div id=\"upload\">\n <form id=\"upload_form\" enctype=\"multipart/form-data\" method=\"POST\" action=\"/upload\">\n <div>\n <div><label for=\"video_file\">Please select video file</label></div>\n <div><input type=\"file\" name=\"video_file\" id=\"video_file\" accept=\"video/*\" onchange=\"fileSelected();\" /></div>\n </div>\n\n <div>\n <input type=\"button\" value=\"Upload\" onclick=\"startUploading()\" />\n </div>\n\n <div id=\"error\">You should select valid image files only!</div>\n <div id=\"error2\">An error occurred while uploading the file</div>\n <div id=\"abort\">The upload has been canceled by the user or the browser dropped the connection</div>\n <div id=\"warnsize\">Your file is very big. We can't accept it. Please select more small file</div>\n\n <div id=\"progress_info\">\n <div id=\"progress\"></div>\n <div id=\"progress_percent\"> </div>\n <div class=\"clear_both\"></div>\n <div>\n <div id=\"speed\"> </div>\n <div id=\"remaining\"> </div>\n <div id=\"b_transfered\"> </div>\n <div class=\"clear_both\"></div>\n </div>\n\n <div id=\"upload_response\"></div>\n </div>\n </form>\n </div>\n{{end}}\n{{define \"scripts\"}}\n <script type=\"application/javascript\" src=\"/static/upload.js\"></script>\n{{end}}\n"),
+ Content: string("{{define \"content\"}}\n <div id=\"upload\">\n <form id=\"upload_form\" enctype=\"multipart/form-data\" method=\"POST\" action=\"/upload\">\n <div>\n <label class=\"filebutton\">\n Select a video to upload...\n <span><input type=\"file\" name=\"video_file\" id=\"video_file\" accept=\"video/*\" onchange=\"fileSelected();\" /></span>\n </label>\n </div>\n\n <div>\n <input type=\"button\" value=\"Upload\" onclick=\"startUploading()\" />\n </div>\n\n <div id=\"error\">You should select valid image files only!</div>\n <div id=\"error2\">An error occurred while uploading the file</div>\n <div id=\"abort\">The upload has been canceled by the user or the browser dropped the connection</div>\n <div id=\"warnsize\">Your file is very big. We can't accept it. Please select more small file</div>\n\n <div id=\"progress_info\">\n <div id=\"progress\"></div>\n <div id=\"progress_percent\"> </div>\n <div class=\"clear_both\"></div>\n <div>\n <div id=\"speed\"> </div>\n <div id=\"remaining\"> </div>\n <div id=\"b_transfered\"> </div>\n <div class=\"clear_both\"></div>\n </div>\n\n <div id=\"upload_response\"></div>\n </div>\n </form>\n </div>\n{{end}}\n{{define \"scripts\"}}\n <script type=\"application/javascript\" src=\"/static/upload.js\"></script>\n{{end}}\n"),
}
// define dirs
dir1 := &embedded.EmbeddedDir{
Filename: "",
- DirModTime: time.Unix(1584875538, 0),
+ DirModTime: time.Unix(1584879674, 0),
ChildFiles: []*embedded.EmbeddedFile{
file2, // "base.html"
file3, // "index.html"
@@ -46,7 +46,7 @@ func init() {
// register embeddedBox
embedded.RegisterEmbeddedBox(`../templates`, &embedded.EmbeddedBox{
Name: `../templates`,
- Time: time.Unix(1584875538, 0),
+ Time: time.Unix(1584879674, 0),
Dirs: map[string]*embedded.EmbeddedDir{
"": dir1,
},
@@ -75,9 +75,9 @@ func init() {
}
file8 := &embedded.EmbeddedFile{
Filename: "theme.css",
- FileModTime: time.Unix(1584787907, 0),
+ FileModTime: time.Unix(1584879783, 0),
- Content: string(":root {\n --main-title-color: #ae81ff;\n --link-hover-color: #ae81ff;\n}\n\n/* normalize */\n* {\n font-weight: inherit;\n font-size: inherit;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n color: #c5c8c6;\n background: #1e1e1e;\n padding-bottom: 10px;\n}\n\nnav {\n z-index: 100;\n color: var(--main-title-color);\n text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7);\n font-weight: 700;\n font-size: 20px;\n text-indent: 20px;\n line-height: 50px;\n width: 100%;\n height: 50px;\n background: #171717;\n border-bottom: 1px solid #272727;\n}\n\nmain {\n width: 1156px;\n margin:0 auto;\n margin-top: 15px;\n white-space: nowrap;\n}\n\n#player {\n width: 854px;\n display: inline-block;\n vertical-align: top;\n}\n\n/* 480p */\n#video {\n width: 100%;\n height: 480px;\n background: #000;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#player > h1 {\n margin-top: 10px;\n}\n\n#player > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n#player > p {\n margin-top: 10px;\n font-size: 80%;\n width: 100%;\n white-space: normal;\n}\n\n#playlist {\n font-size: 13px;\n display: inline-block;\n margin-left: 10px;\n width: 290px;\n background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#playlist > a {\n display: block;\n padding: 10px;\n position: relative;\n min-height: 54px;\n}\n\n#playlist > a:hover {\n color: var(--link-hover-color);\n}\n\n#playlist > a.playing {\n background: #383a3e;\n}\n\n#playlist > a + a {\n border-top: 1px solid #1e1e1e;\n}\n\n#playlist > a > img {\n width: 70px;\n}\n\n#playlist > a > div {\n position: absolute;\n top: 10px;\n right: 10px;\n bottom: 10px;\n left: 90px;\n}\n\n#playlist > a > div > h1 {\n white-space: normal;\n}\n\n#playlist > a > div > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n/* 360p */\n@media only screen and (max-width: 1180px) {\n main {\n width: 940px;\n }\n #player {\n width: 640px;\n }\n #video {\n height: 360px;\n }\n}\n\n/* 240p */\n@media only screen and (max-width: 965px) {\n main {\n width: 726px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n}\n\n/* 240p with shifted playlist */\n@media only screen and (max-width: 750px) {\n main {\n width: 426px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n #playlist {\n width: 426px;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* responsive width with shifted playlist */\n@media only screen and (max-width: 440px) {\n main {\n width: 100%;\n }\n #player {\n width: 100%;\n }\n #video {\n height: auto;\n }\n #playlist {\n width: 100%;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* Upload */\n.upload_form_cont {\n background: -moz-linear-gradient(#ffffff, #f2f2f2);\n background: -ms-linear-gradient(#ffffff, #f2f2f2);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));\n background: -webkit-linear-gradient(#ffffff, #f2f2f2);\n background: -o-linear-gradient(#ffffff, #f2f2f2);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')\";\n background: linear-gradient(#ffffff, #f2f2f2);\n color:#000;\n overflow:hidden;\n}\n#upload_form {\n float:left;\n padding:20px;\n width:700px;\n}\n#upload_form > div {\n margin-bottom:10px;\n}\n#speed,#remaining {\n float:left;\n width:100px;\n}\n#b_transfered {\n float:right;\n text-align:right;\n}\n.clear_both {\n clear:both;\n}\ninput {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\ninput[type=button] {\n background: -moz-linear-gradient(#ffffff, #dfdfdf);\n background: -ms-linear-gradient(#ffffff, #dfdfdf);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));\n background: -webkit-linear-gradient(#ffffff, #dfdfdf);\n background: -o-linear-gradient(#ffffff, #dfdfdf);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')\";\n background: linear-gradient(#ffffff, #dfdfdf);\n}\n#video_file {\n width:400px;\n}\n#progress_info {\n font-size:10pt;\n}\n#fileinfo,#error,#error2,#abort,#warnsize {\n color:#aaa;\n display:none;\n font-size:10pt;\n font-style:italic;\n margin-top:10px;\n}\n#progress {\n border:1px solid #ccc;\n display:none;\n float:left;\n height:14px;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n background: -moz-linear-gradient(#66cc00, #4b9500);\n background: -ms-linear-gradient(#66cc00, #4b9500);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));\n background: -webkit-linear-gradient(#66cc00, #4b9500);\n background: -o-linear-gradient(#66cc00, #4b9500);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')\";\n background: linear-gradient(#66cc00, #4b9500);\n}\n#progress_percent {\n float:right;\n}\n#upload_response {\n margin-top: 10px;\n padding: 20px;\n overflow: hidden;\n display: none;\n border: 1px solid #ccc;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n box-shadow: 0 0 5px #ccc;\n background: -moz-linear-gradient(#bbb, #eee);\n background: -ms-linear-gradient(#bbb, #eee);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));\n background: -webkit-linear-gradient(#bbb, #eee);\n background: -o-linear-gradient(#bbb, #eee);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')\";\n background: linear-gradient(#000000, #1e1e1e);\n}\n"),
+ Content: string(":root {\n --main-title-color: #ae81ff;\n --link-hover-color: #ae81ff;\n}\n\n/* normalize */\n* {\n font-weight: inherit;\n font-size: inherit;\n border: none;\n outline: none;\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\na {\n color: inherit;\n text-decoration: none;\n}\n\nbody {\n font-family: Arial, sans-serif;\n font-size: 16px;\n font-weight: 400;\n color: #c5c8c6;\n background: #1e1e1e;\n padding-bottom: 10px;\n}\n\nnav {\n z-index: 100;\n color: var(--main-title-color);\n text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.7);\n font-weight: 700;\n font-size: 20px;\n text-indent: 20px;\n line-height: 50px;\n width: 100%;\n height: 50px;\n background: #171717;\n border-bottom: 1px solid #272727;\n}\n\nmain {\n width: 1156px;\n margin:0 auto;\n margin-top: 15px;\n white-space: nowrap;\n}\n\n#player {\n width: 854px;\n display: inline-block;\n vertical-align: top;\n}\n\n/* 480p */\n#video {\n width: 100%;\n height: 480px;\n background: #000;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#player > h1 {\n margin-top: 10px;\n}\n\n#player > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n#player > p {\n margin-top: 10px;\n font-size: 80%;\n width: 100%;\n white-space: normal;\n}\n\n#playlist {\n font-size: 13px;\n display: inline-block;\n margin-left: 10px;\n width: 290px;\n background: #282a2e;\n box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2);\n}\n\n#playlist > a {\n display: block;\n padding: 10px;\n position: relative;\n min-height: 54px;\n}\n\n#playlist > a:hover {\n color: var(--link-hover-color);\n}\n\n#playlist > a.playing {\n background: #383a3e;\n}\n\n#playlist > a + a {\n border-top: 1px solid #1e1e1e;\n}\n\n#playlist > a > img {\n width: 70px;\n}\n\n#playlist > a > div {\n position: absolute;\n top: 10px;\n right: 10px;\n bottom: 10px;\n left: 90px;\n}\n\n#playlist > a > div > h1 {\n white-space: normal;\n}\n\n#playlist > a > div > h2 {\n margin-top: 5px;\n color: #676867;\n font-size: 90%;\n}\n\n/* 360p */\n@media only screen and (max-width: 1180px) {\n main {\n width: 940px;\n }\n #player {\n width: 640px;\n }\n #video {\n height: 360px;\n }\n}\n\n/* 240p */\n@media only screen and (max-width: 965px) {\n main {\n width: 726px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n}\n\n/* 240p with shifted playlist */\n@media only screen and (max-width: 750px) {\n main {\n width: 426px;\n }\n #player {\n width: 426px;\n }\n #video {\n height: 240px;\n }\n #playlist {\n width: 426px;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* responsive width with shifted playlist */\n@media only screen and (max-width: 440px) {\n main {\n width: 100%;\n }\n #player {\n width: 100%;\n }\n #video {\n height: auto;\n }\n #playlist {\n width: 100%;\n margin-top: 10px;\n margin-left: 0;\n display: block;\n }\n}\n\n/* Upload */\n.upload_form_cont {\n background: -moz-linear-gradient(#ffffff, #f2f2f2);\n background: -ms-linear-gradient(#ffffff, #f2f2f2);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));\n background: -webkit-linear-gradient(#ffffff, #f2f2f2);\n background: -o-linear-gradient(#ffffff, #f2f2f2);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')\";\n background: linear-gradient(#ffffff, #f2f2f2);\n color:#000;\n overflow:hidden;\n}\n#upload_form {\n float:left;\n padding:20px;\n width:700px;\n}\n#upload_form > div {\n margin-bottom:10px;\n}\n#speed,#remaining {\n float:left;\n width:100px;\n}\n#b_transfered {\n float:right;\n text-align:right;\n}\n.clear_both {\n clear:both;\n}\ninput {\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n border:1px solid #ccc;\n font-size:14pt;\n padding:5px 10px;\n}\ninput[type=button] {\n background: -moz-linear-gradient(#ffffff, #dfdfdf);\n background: -ms-linear-gradient(#ffffff, #dfdfdf);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));\n background: -webkit-linear-gradient(#ffffff, #dfdfdf);\n background: -o-linear-gradient(#ffffff, #dfdfdf);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dfdfdf')\";\n background: linear-gradient(#ffffff, #dfdfdf);\n}\n#video_file {\n width:400px;\n}\n#progress_info {\n font-size:10pt;\n}\n#fileinfo,#error,#error2,#abort,#warnsize {\n color:#aaa;\n display:none;\n font-size:10pt;\n font-style:italic;\n margin-top:10px;\n}\n#progress {\n border:1px solid #ccc;\n display:none;\n float:left;\n height:14px;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n background: -moz-linear-gradient(#66cc00, #4b9500);\n background: -ms-linear-gradient(#66cc00, #4b9500);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #66cc00), color-stop(100%, #4b9500));\n background: -webkit-linear-gradient(#66cc00, #4b9500);\n background: -o-linear-gradient(#66cc00, #4b9500);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#66cc00', endColorstr='#4b9500')\";\n background: linear-gradient(#66cc00, #4b9500);\n}\n#progress_percent {\n float:right;\n}\n#upload_response {\n margin-top: 10px;\n padding: 20px;\n overflow: hidden;\n display: none;\n border: 1px solid #ccc;\n border-radius:10px;\n -moz-border-radius:10px;\n -ms-border-radius:10px;\n -o-border-radius:10px;\n -webkit-border-radius:10px;\n box-shadow: 0 0 5px #ccc;\n background: -moz-linear-gradient(#bbb, #eee);\n background: -ms-linear-gradient(#bbb, #eee);\n background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbb), color-stop(100%, #eee));\n background: -webkit-linear-gradient(#bbb, #eee);\n background: -o-linear-gradient(#bbb, #eee);\n filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee');\n -ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')\";\n background: linear-gradient(#000000, #1e1e1e);\n}\n\n.fileContainer {\n overflow: hidden;\n position: relative;\n}\n\nlabel.filebutton {\n width:120px;\n height:40px;\n overflow:hidden;\n position:relative;\n background:linear-gradient(#000000, #1e1e1e);\n box-shadow: 0 0 5px #ccc;\n}\n\nlabel span input {\n z-index: 999;\n line-height: 0;\n font-size: 50px;\n position: absolute;\n top: -2px;\n left: -700px;\n opacity: 0;\n filter: alpha(opacity = 0);\n -ms-filter: \"alpha(opacity=0)\";\n cursor: pointer;\n _cursor: hand;\n margin: 0;\n padding:0;\n}\n"),
}
file9 := &embedded.EmbeddedFile{
Filename: "upload.js",
@@ -89,7 +89,7 @@ func init() {
// define dirs
dir5 := &embedded.EmbeddedDir{
Filename: "",
- DirModTime: time.Unix(1584787907, 0),
+ DirModTime: time.Unix(1584879783, 0),
ChildFiles: []*embedded.EmbeddedFile{
file6, // "defaulticon.jpg"
file7, // "favicon.ico"
@@ -105,7 +105,7 @@ func init() {
// register embeddedBox
embedded.RegisterEmbeddedBox(`../static`, &embedded.EmbeddedBox{
Name: `../static`,
- Time: time.Unix(1584787907, 0),
+ Time: time.Unix(1584879783, 0),
Dirs: map[string]*embedded.EmbeddedDir{
"": dir5,
},
diff --git a/static/theme.css b/static/theme.css
index 8c5d22f..a2f269a 100644
--- a/static/theme.css
+++ b/static/theme.css
@@ -302,3 +302,33 @@ input[type=button] {
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#eee')";
background: linear-gradient(#000000, #1e1e1e);
}
+
+.fileContainer {
+ overflow: hidden;
+ position: relative;
+}
+
+label.filebutton {
+ width:120px;
+ height:40px;
+ overflow:hidden;
+ position:relative;
+ background:linear-gradient(#000000, #1e1e1e);
+ box-shadow: 0 0 5px #ccc;
+}
+
+label span input {
+ z-index: 999;
+ line-height: 0;
+ font-size: 50px;
+ position: absolute;
+ top: -2px;
+ left: -700px;
+ opacity: 0;
+ filter: alpha(opacity = 0);
+ -ms-filter: "alpha(opacity=0)";
+ cursor: pointer;
+ _cursor: hand;
+ margin: 0;
+ padding:0;
+}
diff --git a/templates/upload.html b/templates/upload.html
index bd9e814..a6e09df 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -2,8 +2,10 @@
<div id="upload">
<form id="upload_form" enctype="multipart/form-data" method="POST" action="/upload">
<div>
- <div><label for="video_file">Please select video file</label></div>
- <div><input type="file" name="video_file" id="video_file" accept="video/*" onchange="fileSelected();" /></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>
<div>