Browse Source

terminal progress bar

tags/v1.0.0
Uvis Grinfelds 9 years ago
parent
commit
45e29d5d7d
6 changed files with 159 additions and 299 deletions
  1. +10
    -126
      transfersh-web/images/terminal-top.svg
  2. +73
    -70
      transfersh-web/index.html
  3. +47
    -51
      transfersh-web/scripts/main.js
  4. +16
    -34
      transfersh-web/styles/includes/home.less
  5. +12
    -17
      transfersh-web/styles/main.css
  6. +1
    -1
      transfersh-web/styles/main.css.map

+ 10
- 126
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"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="750" width="750"
height="30" height="30"
id="svg4149"
version="1.1"
inkscape:version="0.48.3.1 r9886"
sodipodi:docname="terminal-top.svg">
id="svg4149">
<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"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-93.957497,-365.26607)">
<rect
style="fill:#85b5bb;fill-opacity:1;stroke:none"
transform="translate(-93.957497,-365.26607)"
id="layer1">
<path
d="m 85.371201,355.16455 789.901059,0 0,49.98291 -789.901059,0 z"
id="rect4487" id="rect4487"
width="789.90106"
height="49.982914"
x="85.371201"
y="355.16455" />
style="fill:#85b5bb;fill-opacity:1;stroke:none" />
<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>


+ 73
- 70
transfersh-web/index.html View File

@@ -17,7 +17,7 @@


<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,300' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<!-- build:js scripts/vendor/modernizr.js --> <!-- build:js scripts/vendor/modernizr.js -->
<script src="bower_components/modernizr/modernizr.js"></script> <script src="bower_components/modernizr/modernizr.js"></script>
<!-- endbuild --> <!-- endbuild -->
@@ -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>
@@ -65,40 +65,43 @@


</div> </div>
<div id="terminal" class="terminal"> <div id="terminal" class="terminal">
<code>
<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>
<span class="code-title"># Create an alias</span>
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt
</code>
<code>
<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>
<span class="code-title"># Create an alias</span>
<br>$ transfer hello.txt
<br>##################################################### 100.0% https://transfer.sh/eibhM/hello.txt
</code>ch
</div> </div>
<div id="web"> <div id="web">
<code> <code>
<br>
<br>
<span class="code-title"># Upload from web</span> <span class="code-title"># Upload from web</span>
<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/>
<a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a>
<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>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>


<div>
<a href="#features" class="btn-cta btn-home">learn more</i> </a>
<div>
<a href="#features" class="btn-cta btn-home">learn more</i> </a>
</div>
</div> </div>
</div>
</section> </section>




@@ -146,41 +149,41 @@
<div class="row"> <div class="row">
<div class="col-md-6 "> <div class="col-md-6 ">
<h3>Uploading</h3> <h3>Uploading</h3>
<div id="" class="terminal">
<code>
<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>
<span class="code-title"># Download the file</span>
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt
<span class="code-title"># Upload multiple files</span>
<br>$ transfer hello.txt <br>
https://transfer.sh/eibhM/hello.txt
<br>
<br>
</code>
<div id="" class="terminal">
<code>
<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>
<span class="code-title"># Download the file</span>
<br>$ transfer hello.txt
<br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt
<span class="code-title"># Upload multiple files</span>
<br>$ transfer hello.txt
<br>https://transfer.sh/eibhM/hello.txt
<br>
<br>
</code>
</div> </div>
</div> </div>
<div class="col-md-6 "> <div class="col-md-6 ">
<h3>Create an alias and add to .bashrc</h3> <h3>Create an alias and add to .bashrc</h3>
<div id="" class="terminal">
<code>
<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>
<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>
<div id="" class="terminal">
<code>
<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>
<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>


<span class="code-title"># Now you can just use transfer command</span>
<br>$ transfer hello.txt <br>
<br>
<span class="code-title"># Now you can just use transfer command</span>
<br>$ transfer hello.txt
<br>
<br>


</code>
</code>
</div> </div>
</div> </div>


@@ -190,49 +193,49 @@
<a class="btn-cta" data-target="#coll" data-toggle="collapse">More examples</a> <a class="btn-cta" data-target="#coll" data-toggle="collapse">More examples</a>


<div class="collapse " id="coll"> <div class="collapse " id="coll">
<div class="row">
<div class="col-md-6 ">
<h3>Uploading</h3>
<div id="" class="terminal">
<div class="row">
<div class="col-md-6 ">
<h3>Uploading</h3>
<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>
https://transfer.sh/eibhM/hello.txt
<br>$ transfer hello.txt
<br>https://transfer.sh/eibhM/hello.txt
<br> <br>
<br> <br>
</code> </code>
</div>
</div>


</div>
<div class="col-md-6 ">
<h3>Create an alias and add to .bashrc</h3>
<div id="" class="terminal">
</div>
<div class="col-md-6 ">
<h3>Create an alias and add to .bashrc</h3>
<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>
</div>
</div> </div>
</div>


</div>
</div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h3>Transfer multiple files</h3> <h3>Transfer multiple files</h3>


+ 47
- 51
transfersh-web/scripts/main.js View File

@@ -1,49 +1,49 @@
$(document).ready(function() { $(document).ready(function() {


/* hljs.initHighlightingOnLoad();*/
/* hljs.initHighlightingOnLoad();*/
// Terminal typing animation // Terminal typing animation
/* $("#terminal-code").typed({
strings: ["# Upload using this \n acurl --upload-file ./hello.txt https://transfer.sh/hello.txt\n######################################################\nhttps://transfer.sh/66nb8/hello.txt \n "],
typeSpeed: 0, // typing speed
backSpeed: 0, // backspacing speed
startDelay: 0, // time before typing starts
backDelay: 500, // pause before backspacing
loop: false, // loop on or off (true or false)
loopCount: false, // number of loops, false = infinite
showCursor: true,
attr: null, // attribute to type, null = text for everything except inputs, which default to placeholder
callback: function(){ } // call function after typing is done
});*/
/*
var typewriter = require('typewriter');
var twSpan = document.getElementById('terminal-code');
var tw = typewriter(twSpan).withAccuracy(100)
.withMinimumSpeed()
.withMaximumSpeed(25)
.build();
tw.put('$ ')
.put('<span class="hljs-comment"># Upload using cURL </span>')
.waitRange(500, 1000)
.put('<br/>')
.type('$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt')
.put('<br/>')
.put('https://transfer.sh/66nb8/hello.txt ')
.put('<br/>')
.waitRange(500, 1000)
.put('<br/>')
.waitRange(500, 1000)
.put('<span class="hljs-comment"># Upload using alias</span>')
.put('<br/>')
.type('transfer hello.txt')
.put('<br/>')
.type('####################################################')
.put(' 100.0%')
.put('<br/>')
.put('https://transfer.sh/eibhM/hello.txt ')*/
/* $("#terminal-code").typed({
strings: ["# Upload using this \n acurl --upload-file ./hello.txt https://transfer.sh/hello.txt\n######################################################\nhttps://transfer.sh/66nb8/hello.txt \n "],
typeSpeed: 0, // typing speed
backSpeed: 0, // backspacing speed
startDelay: 0, // time before typing starts
backDelay: 500, // pause before backspacing
loop: false, // loop on or off (true or false)
loopCount: false, // number of loops, false = infinite
showCursor: true,
attr: null, // attribute to type, null = text for everything except inputs, which default to placeholder
callback: function(){ } // call function after typing is done
});*/
/*
var typewriter = require('typewriter');
var twSpan = document.getElementById('terminal-code');
var tw = typewriter(twSpan).withAccuracy(100)
.withMinimumSpeed()
.withMaximumSpeed(25)
.build();
tw.put('$ ')
.put('<span class="hljs-comment"># Upload using cURL </span>')
.waitRange(500, 1000)
.put('<br/>')
.type('$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt')
.put('<br/>')
.put('https://transfer.sh/66nb8/hello.txt ')
.put('<br/>')
.waitRange(500, 1000)
.put('<br/>')
.waitRange(500, 1000)
.put('<span class="hljs-comment"># Upload using alias</span>')
.put('<br/>')
.type('transfer hello.txt')
.put('<br/>')
.type('####################################################')
.put(' 100.0%')
.put('<br/>')
.put('https://transfer.sh/eibhM/hello.txt ')*/


// Smooth scrolling // Smooth scrolling
$('a[href*=#]:not([href=#])').click(function() { $('a[href*=#]:not([href=#])').click(function() {
@@ -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() {
}); });
}); });
})(); })();



+ 16
- 34
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);
// min-height: 150px;
@media (min-width: @screen-sm-min) {
//min-height: 350px;
}


}

#web .uploading {
}

.dragged {
background: @light-gray;
}


.terminal {
.border-top-radius (0px);
.border-top-radius (0);
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 {


.upload-progress {
max-width: 80%; max-width: 80%;
margin: 0 auto;
.bar {
word-wrap: normal;
overflow: hidden;
}
span {
float: right;
}
} }

.all-files { .all-files {
display: none; display: none;
} }


+ 12
- 17
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-left-radius: 5px;
}
.dragged {
background: #f6f8f8;
}
.terminal {
border-top-right-radius: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0;
border-top-left-radius: 0;
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;


+ 1
- 1
transfersh-web/styles/main.css.map
File diff suppressed because it is too large
View File


Loading…
Cancel
Save