v/transfer.sh
1
0
Fork 0
mirror of https://github.com/dutchcoders/transfer.sh.git synced 2020-11-18 19:53:40 -08:00
Code Issues Releases Wiki Activity

terminal progress bar

Browse Source
This commit is contained in:
Uvis Grinfelds 2014-10-24 15:09:32 +02:00
parent f770f5484c
commit 45e29d5d7d
6 changed files with 156 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
transfersh-web/images/terminal-top.svg
View File

@ -7,139 +7,31 @@
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" version="1.1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="750" width="750"
height="30" height="30"
id="svg4149" id="svg4149">
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="terminal-top.svg">
<defs <defs
id="defs4151"> id="defs4151">
<clipPath <clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath60"> id="clipPath60">
<path <path
inkscape:connector-curvature="0"
d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z"
id="path62" /> id="path62" />
</clipPath> </clipPath>
<clipPath <clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath44"> id="clipPath44">
<path <path
inkscape:connector-curvature="0"
d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z" d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z"
id="path46" /> id="path46" />
</clipPath> </clipPath>
<clipPath <clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath28"> id="clipPath28">
<path <path
inkscape:connector-curvature="0"
d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z"
id="path30" /> id="path30" />
</clipPath> </clipPath>
</defs> </defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.7"
inkscape:cx="189.78652"
inkscape:cy="256.28694"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
borderlayer="true"
inkscape:showpageshadow="false"
showborder="true"
showguides="false"
inkscape:window-width="1680"
inkscape:window-height="1023"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1">
<sodipodi:guide
position="0,0"
orientation="0,482.82629"
id="guide4830" />
<sodipodi:guide
position="482.82629,0"
orientation="-25.270071,0"
id="guide4832" />
<sodipodi:guide
position="482.82629,25.270071"
orientation="0,-482.82629"
id="guide4834" />
<sodipodi:guide
position="0,25.270071"
orientation="25.270071,0"
id="guide4836" />
<inkscape:grid
type="xygrid"
id="grid4844"
empspacing="5"
visible="true"
enabled="true"
snapvisiblegridlinesonly="true" />
<sodipodi:guide
position="0,0"
orientation="0,1000"
id="guide4884" />
<sodipodi:guide
position="1000,0"
orientation="-25,0"
id="guide4886" />
<sodipodi:guide
position="1000,25"
orientation="0,-1000"
id="guide4888" />
<sodipodi:guide
position="0,25"
orientation="25,0"
id="guide4890" />
<sodipodi:guide
position="0,0"
orientation="0,750"
id="guide4892" />
<sodipodi:guide
position="750,0"
orientation="-25,0"
id="guide4894" />
<sodipodi:guide
position="750,25"
orientation="0,-750"
id="guide4896" />
<sodipodi:guide
position="0,25"
orientation="25,0"
id="guide4898" />
<sodipodi:guide
position="0,0"
orientation="0,750"
id="guide4999" />
<sodipodi:guide
position="750,0"
orientation="-30,0"
id="guide5001" />
<sodipodi:guide
position="750,30"
orientation="0,-750"
id="guide5003" />
<sodipodi:guide
position="0,30"
orientation="30,0"
id="guide5005" />
</sodipodi:namedview>
<metadata <metadata
id="metadata4154"> id="metadata4154">
<rdf:RDF> <rdf:RDF>
@ -153,17 +45,12 @@
</rdf:RDF> </rdf:RDF>
</metadata> </metadata>
<g <g
inkscape:label="Layer 1" transform="translate(-93.957497,-365.26607)"
inkscape:groupmode="layer" id="layer1">
id="layer1" <path
transform="translate(-93.957497,-365.26607)"> d="m 85.371201,355.16455 789.901059,0 0,49.98291 -789.901059,0 z"
<rect
style="fill:#85b5bb;fill-opacity:1;stroke:none"
id="rect4487" id="rect4487"
width="789.90106" style="fill:#85b5bb;fill-opacity:1;stroke:none" />
height="49.982914"
x="85.371201"
y="355.16455" />
<g <g
transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.446)" transform="matrix(1.4512649,0,0,-1.4512649,-114.5591,1453.446)"
id="g24" id="g24"
@ -184,9 +71,8 @@
style="fill:#ff7050"> style="fill:#ff7050">
<path <path
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0"
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path38" id="path38"
inkscape:connector-curvature="0" /> style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g> </g>
</g> </g>
</g> </g>
@ -211,9 +97,8 @@
style="fill:#ffed5d"> style="fill:#ffed5d">
<path <path
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0"
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path54" id="path54"
inkscape:connector-curvature="0" /> style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g> </g>
</g> </g>
</g> </g>
@ -238,9 +123,8 @@
style="fill:#93de7f"> style="fill:#93de7f">
<path <path
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0"
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path70" id="path70"
inkscape:connector-curvature="0" /> style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</g> </g>
</g> </g>
</g> </g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

63
transfersh-web/index.html
View File

@ -45,7 +45,7 @@
<div class="wrapper"> <div class="wrapper">
<h1>transfer.sh</h1> <h1>transfer.sh</h1>
<ul> <ul>
<li><a href="#samples">Sample use cases</a> <li><a href="#samples">sample use cases</a>
</li> </li>
<li><a href="#contact">contact us</a> <li><a href="#contact">contact us</a>
</li> </li>
@ -67,11 +67,13 @@
<div id="terminal" class="terminal"> <div id="terminal" class="terminal">
<code> <code>
<span class="code-title"># Upload using cURL</span> <span class="code-title"># Upload using cURL</span>
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> <br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt
<br>
<br> <br>
<span class="code-title"># Create an alias</span> <span class="code-title"># Create an alias</span>
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt <br>$ transfer hello.txt
</code> <br>##################################################### 100.0% https://transfer.sh/eibhM/hello.txt
</code>ch
</div> </div>
<div id="web"> <div id="web">
<code> <code>
@ -80,13 +82,16 @@
<br>Drag your files here, or <a class="browse" href="#"> click to browse.</a> <br>Drag your files here, or <a class="browse" href="#"> click to browse.</a>
</code> </code>
<input type="file" multiple="multiple" style='display: none;' /> <input type="file" multiple="multiple" style='display: none;' />
<ul class='queue' style='; list-style-type: none; margin: 0;'> <ul class='queue'>
<li> <li>
</li> </li>
</ul> </ul>
<div class='all-files'> <div class='all-files'>
<br> <br>
<span class="code-title"># Download all your files</span><br/> <div>
<span class="code-title"># Download all your files</span>
<br/>
<br/>
<a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a> <a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a>
</div> </div>
</div> </div>
@ -94,9 +99,7 @@
</div> </div>
<div> <div>
<a href="#features" class="btn-cta btn-home">learn more</i> </a> <a href="#features" class="btn-cta btn-home">learn more</i> </a>
</div> </div>
</div> </div>
</section> </section>
@ -149,13 +152,15 @@
<div id="" class="terminal"> <div id="" class="terminal">
<code> <code>
<span class="code-title"># Upload is easy using cURL</span> <span class="code-title"># Upload is easy using cURL</span>
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> <br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt
<br>
<br> <br>
<span class="code-title"># Download the file</span> <span class="code-title"># Download the file</span>
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt <br>$ transfer hello.txt
<br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt
<span class="code-title"># Upload multiple files</span> <span class="code-title"># Upload multiple files</span>
<br>$ transfer hello.txt <br> <br>$ transfer hello.txt
https://transfer.sh/eibhM/hello.txt <br>https://transfer.sh/eibhM/hello.txt
<br> <br>
<br> <br>
</code> </code>
@ -166,18 +171,16 @@
<div id="" class="terminal"> <div id="" class="terminal">
<code> <code>
<span class="code-title"># Upload is easy using cURL</span> <span class="code-title"># Upload is easy using cURL</span>
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> <br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt
<br>
<br> <br>
<span class="code-title"># Download the file</span> <span class="code-title"># Download the file</span>
<br>tmpfile = $( mktemp -t transfer ) curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; cat $tmpfile; rm -f $tmpfile; }
<br> <br>
tmpfile = $( mktemp -t transfer )
curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile;
cat $tmpfile;
rm -f $tmpfile;
}<br>
<span class="code-title"># Now you can just use transfer command</span> <span class="code-title"># Now you can just use transfer command</span>
<br>$ transfer hello.txt <br> <br>$ transfer hello.txt
<br>
<br> <br>
</code> </code>
@ -196,13 +199,15 @@
<div id="" class="terminal"> <div id="" class="terminal">
<code> <code>
<span class="code-title"># Upload is easy using cURL</span> <span class="code-title"># Upload is easy using cURL</span>
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> <br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt
<br>
<br> <br>
<span class="code-title"># Download the file</span> <span class="code-title"># Download the file</span>
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt <br>$ transfer hello.txt
<br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt
<span class="code-title"># Upload multiple files</span> <span class="code-title"># Upload multiple files</span>
<br>$ transfer hello.txt <br> <br>$ transfer hello.txt
https://transfer.sh/eibhM/hello.txt <br>https://transfer.sh/eibhM/hello.txt
<br> <br>
<br> <br>
</code> </code>
@ -214,18 +219,16 @@
<div id="" class="terminal"> <div id="" class="terminal">
<code> <code>
<span class="code-title"># Upload is easy using cURL</span> <span class="code-title"># Upload is easy using cURL</span>
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> <br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt
<br>
<br> <br>
<span class="code-title"># Download the file</span> <span class="code-title"># Download the file</span>
<br>tmpfile = $( mktemp -t transfer ) curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile; cat $tmpfile; rm -f $tmpfile; }
<br> <br>
tmpfile = $( mktemp -t transfer )
curl --progress-bar --upload-file $1 https://transfer.sh/$(basename $1) >> $tmpfile;
cat $tmpfile;
rm -f $tmpfile;
}<br>
<span class="code-title"># Now you can just use transfer command</span> <span class="code-title"># Now you can just use transfer command</span>
<br>$ transfer hello.txt <br> <br>$ transfer hello.txt
<br>
<br> <br>
</code> </code>

12
transfersh-web/scripts/main.js
View File

@ -77,21 +77,21 @@ $(document).ready(function() {
$('.browse').addClass('uploading'); $('.browse').addClass('uploading');
var li = $('<li style="clear:both;"/>'); var li = $('<li style="clear:both;"/>');
li.append($('<div><div class="progress active upload-progress" style="margin-bottom: 0;"><div class="bar" style="width: 0%;">############################>span></span></div></div><p>Uploading... ' + file.name + '</p></div>')); li.append($('<div><div class="upload-progress"><span></span><div class="bar" style="width:0%;">####################################################</div></div><p>Uploading... ' + file.name + '</p></div>'));
$(li).appendTo($('.queue')); $(li).appendTo($('.queue'));
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", function(e) { xhr.upload.addEventListener("progress", function(e) {
var pc = parseInt((e.loaded / e.total * 100)); var pc = parseInt((e.loaded / e.total * 100));
/* $('.upload-progress', $(li)).show();*/ $('.upload-progress', $(li)).show();
$('.upload-progress .bar', $(li)).css('width', pc + "%"); $('.upload-progress .bar', $(li)).css('width', pc + "%");
$('.upload-progress .bar .span').append( pc + "%"); $('.upload-progress span ').empty().append(pc + "%");
}, false); }, false);
xhr.onreadystatechange = function(e) { xhr.onreadystatechange = function(e) {
if (xhr.readyState == 4) { if (xhr.readyState == 4) {
$('.upload-progress', $(li)).hide(); /* $('.upload-progress', $(li)).hide();*/
$('#web').addClass('uploading'); $('#web').addClass('uploading');
// progress.className = (xhr.status == 200 ? "success" : "failure"); // progress.className = (xhr.status == 200 ? "success" : "failure");
if (xhr.status == 200) { if (xhr.status == 200) {
@ -121,7 +121,6 @@ $(document).ready(function() {
}; };
$(document).bind("dragenter", function(event) { $(document).bind("dragenter", function(event) {
event.preventDefault(); event.preventDefault();
}).bind("dragover", function(event) { }).bind("dragover", function(event) {
event.preventDefault(); event.preventDefault();
@ -129,7 +128,6 @@ $(document).ready(function() {
$('#web').addClass('dragged'); $('#web').addClass('dragged');
}).bind("dragleave", function(event) { }).bind("dragleave", function(event) {
$('#web').removeClass('dragged'); $('#web').removeClass('dragged');
console.log('asdasd');
}).bind("drop dragdrop", function(event) { }).bind("drop dragdrop", function(event) {
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files; var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
@ -158,5 +156,3 @@ $(document).ready(function() {
}); });
}); });
})(); })();

48
transfersh-web/styles/includes/home.less
View File

@ -22,21 +22,20 @@
.code-title { .code-title {
color: @red; color: @red;
} }
padding: 35px 0 0 10px; padding: 30px 0 0 10px;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
padding: 50px 0 0 20px; padding: 30px 0 0 20px;
} }
code { code {
font-family: @font-family-mono; font-family: @font-family-mono;
} }
font-family: @font-family-mono; font-family: @font-family-mono;
font-size: 15px; font-size: 15px;
text-align: left; text-align: left;
color: #fff; color: #fff;
} }
#web { #web {
margin-top: -2px; margin-top: -2px;
.border-bottom-radius (5px); .border-bottom-radius (5px);
@ -51,10 +50,6 @@ font-family: @font-family-mono;
font-size: 14px; font-size: 14px;
border-color: #fff; border-color: #fff;
} }
.click {
margin-top: -50px;
color: #fff;
}
.queue { .queue {
margin: 0; margin: 0;
list-style: none; list-style: none;
@ -65,27 +60,8 @@ font-family: @font-family-mono;
} }
} }
.terminal { .terminal {
.border-top-radius (5px); .border-top-radius (0);
// min-height: 150px;
@media (min-width: @screen-sm-min) {
//min-height: 350px;
}
}
#web .uploading {
}
.dragged {
background: @light-gray;
}
.terminal {
.border-top-radius (0px);
background: @dark-blue; background: @dark-blue;
// background: url(../images/terminal.svg); // background: url(../images/terminal.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -93,7 +69,6 @@ font-family: @font-family-mono;
} }
.terminal-top { .terminal-top {
.border-top-radius (5px); .border-top-radius (5px);
background: url(../images/terminal-top.svg); background: url(../images/terminal-top.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
@ -101,11 +76,18 @@ font-family: @font-family-mono;
height: 30px; height: 30px;
} }
.progress {
max-width: 80%;
margin: 0 auto;
}
.upload-progress {
max-width: 80%;
.bar {
word-wrap: normal;
overflow: hidden;
}
span {
float: right;
}
}
.all-files { .all-files {
display: none; display: none;
} }

29
transfersh-web/styles/main.css
View File

@ -5502,7 +5502,7 @@ a:hover {
#web, #web,
.terminal { .terminal {
word-wrap: break-word; word-wrap: break-word;
padding: 35px 0 0 10px; padding: 30px 0 0 10px;
font-family: "Droid Sans Mono", monospace; font-family: "Droid Sans Mono", monospace;
font-size: 15px; font-size: 15px;
text-align: left; text-align: left;
@ -5515,7 +5515,7 @@ a:hover {
@media (min-width: 768px) { @media (min-width: 768px) {
#web, #web,
.terminal { .terminal {
padding: 50px 0 0 20px; padding: 30px 0 0 20px;
} }
} }
#web code, #web code,
@ -5539,10 +5539,6 @@ a:hover {
font-size: 14px; font-size: 14px;
border-color: #fff; border-color: #fff;
} }
#web .click {
margin-top: -50px;
color: #fff;
}
#web .queue { #web .queue {
margin: 0; margin: 0;
list-style: none; list-style: none;
@ -5552,15 +5548,8 @@ a:hover {
color: #fff; color: #fff;
} }
.terminal { .terminal {
border-top-right-radius: 5px; border-top-right-radius: 0;
border-top-left-radius: 5px; border-top-left-radius: 0;
}
.dragged {
background: #f6f8f8;
}
.terminal {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
background: #36535a; background: #36535a;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -5573,9 +5562,15 @@ a:hover {
background-size: cover; background-size: cover;
height: 30px; height: 30px;
} }
.progress { .upload-progress {
max-width: 80%; max-width: 80%;
margin: 0 auto; }
.upload-progress .bar {
word-wrap: normal;
overflow: hidden;
}
.upload-progress span {
float: right;
} }
.all-files { .all-files {
display: none; display: none;

2
transfersh-web/styles/main.css.map
View File

File diff suppressed because one or more lines are too long