mirror of
https://github.com/dutchcoders/transfer.sh.git
synced 2024-11-27 06:30:19 +01:00
responsivness
This commit is contained in:
Uvis Grinfelds
parent
a048401340
commit
e8564bbf95
10 changed files with 193 additions and 76 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 910 B |
|
|
@ -60,7 +60,7 @@
|
|||
</h2>
|
||||
|
||||
<div class="row">
|
||||
<div id="from-terminal" class="box col-md-6 col-xs-12">
|
||||
<div id="from-terminal" class="animated fadeIn box col-md-6 col-xs-12">
|
||||
<h3>Easy sharing from the command-line</h3>
|
||||
<div id="terminal">
|
||||
<p style='white-space:pre'></p>
|
||||
|
|
@ -79,8 +79,9 @@
|
|||
<li>
|
||||
</li>
|
||||
</ul>
|
||||
<div class='span8 all-files' style='margin: 0; opacity: 0;'>
|
||||
download all files link <a class="download-zip" href="#">zip</a> <a class="download-tar" href="#">tar.gz</a>
|
||||
<div class='all-files' >
|
||||
<h4>Download your files:</h4>
|
||||
<a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
|
|
@ -95,7 +96,7 @@
|
|||
<section id="features">
|
||||
<div class="wrapper container">
|
||||
<div class="row">
|
||||
<div class="col-md-3 col-xs-3">
|
||||
<div class="col-md-3 col-xs-6">
|
||||
<i class="icon-terminal"></i>
|
||||
<h3>Made for use with shell</h3>
|
||||
</div>
|
||||
|
|
@ -192,9 +193,9 @@
|
|||
<div class="row">
|
||||
|
||||
<div class="col-md-8 col-md-offset-2 col-xs-12">
|
||||
<blockquote class="twitter-tweet xl" lang="en">
|
||||
<blockquote class="twitter-tweet tweet-xl" lang="en">
|
||||
<img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
|
||||
<p>transfer.sh is my latest fav service! Try simple command-line and web file sharing! <a href="https://t.co/FSrsb1JKJd">https://t.co/FSrsb1JKJd</a> Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p>— Lars Arvestad (@arvestad) <a href="https://twitter.com/arvestad/status/519507976491499521">October 7, 2014</a>
|
||||
<p>transfer.sh is my latest fav service! Try simple command-line and web file sharing! <a href="https://t.co/FSrsb1JKJd">https://t.co/FSrsb1JKJd</a> Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p> <a href="https://twitter.com/arvestad/status/519507976491499521">— Lars Arvestad (@arvestad)</a>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -207,14 +208,14 @@
|
|||
|
||||
<blockquote class="twitter-tweet" lang="en">
|
||||
<img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
|
||||
<p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> love transfer.sh! any change we can *pay* for a self-hosted version?</p><a href="https://twitter.com/kareemk/status/517029789191118849">— Kareem Kouddous (@kareemk) September 30, 2014</a>
|
||||
<p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> love transfer.sh! any change we can *pay* for a self-hosted version?</p><a href="https://twitter.com/kareemk/status/517029789191118849">— Kareem Kouddous (@kareemk) </a>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-12">
|
||||
<blockquote class="twitter-tweet" lang="en">
|
||||
<img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
|
||||
<p><a href="http://t.co/JomAmqWYEB">http://t.co/JomAmqWYEB</a> by <a href="https://twitter.com/dutchcoders">@dutchcoders</a> is pure awesomeness! any chance of source on github? :-)</p><a href="https://twitter.com/drakpz/status/517008058841829376">— PJ Spagnolatti (@drakpz) September 30, 2014</a>
|
||||
<p><a href="http://t.co/JomAmqWYEB">http://t.co/JomAmqWYEB</a> by <a href="https://twitter.com/dutchcoders">@dutchcoders</a> is pure awesomeness! any chance of source on github? :-)</p><a href="https://twitter.com/drakpz/status/517008058841829376">— PJ Spagnolatti (@drakpz)</a>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
|
|
@ -226,7 +227,7 @@
|
|||
<blockquote class="twitter-tweet" lang="en">
|
||||
<img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
|
||||
<p>Love transfer.sh! Will be using it from now on! Thanks for the amazing service we can use from the CLI <a href="https://twitter.com/dutchcoders">@dutchcoders</a>
|
||||
</p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">— Jacob Lindgren (@jacoblindgren11) September 30, 2014</a>
|
||||
</p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">— Jacob Lindgren (@jacoblindgren11) </a>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
|
|
@ -235,7 +236,7 @@
|
|||
<img class="twitter-profile" src="https://pbs.twimg.com/profile_images/2456827599/eun7gkvkmq2g7ymuliue_reasonably_small.jpeg" alt="">
|
||||
<p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> Thanks for transfer.sh. Just used it for a production purpose for a customer. So great, so easy, so https. :)</p>
|
||||
<a href="https://twitter.com/FloifyDave/status/517383101425516544">
|
||||
— Dave Sims (@FloifyDave)October 1, 2014</a>
|
||||
— Dave Sims (@FloifyDave)</a>
|
||||
</blockquote>
|
||||
|
||||
</div>
|
||||
|
|
@ -323,6 +324,7 @@
|
|||
<!-- build:js scripts/main.js -->
|
||||
<script src="bower_components/jquery/dist/jquery.js"></script>
|
||||
<script src="bower_components/typed.js/js/typed.js"></script>
|
||||
<script src="bower_components/realistic-typewriter.js/build/typewriter-bundle.min.js"></script>
|
||||
<script src="bower_components/uri.js/src/URI.min.js"></script>
|
||||
<script src="bower_components/bootstrap/js/transition.js"></script>
|
||||
<script src="bower_components/bootstrap/js/collapse.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,43 @@
|
|||
$(document).ready(function () {
|
||||
$(document).ready(function() {
|
||||
|
||||
// Terminal typing animation
|
||||
$("#from-terminal p").typed({
|
||||
strings: ["curl --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
|
||||
});
|
||||
/* $("#from-terminal p").typed({
|
||||
strings: ["curl --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');
|
||||
|
||||
var tw = typewriter(twSpan).withAccuracy(95)
|
||||
.withMinimumSpeed(5)
|
||||
.withMaximumSpeed(17)
|
||||
.build();
|
||||
tw.put('$ ')
|
||||
.waitRange(500, 1000)
|
||||
.type('curl --upload-file ./hello.txt https://transfer.sh/hello.txt\n#######################')
|
||||
.put('<br/>')
|
||||
.waitRange(1000, 1500)
|
||||
.put('ls: realistic-typewriter.js: No such file or directory<br/>')
|
||||
.put('$ ')
|
||||
.waitRange(1000, 1500)
|
||||
.type('exit')
|
||||
.put('<br/>')
|
||||
.wait(500)
|
||||
.put('logout<br/><br/>')
|
||||
.put('[Process completed]<br/>');
|
||||
|
||||
// Smooth scrolling
|
||||
$('a[href*=#]:not([href=#])').click(function () {
|
||||
$('a[href*=#]:not([href=#])').click(function() {
|
||||
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
|
||||
var target = $(this.hash);
|
||||
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
|
||||
|
|
@ -29,19 +51,21 @@ $(document).ready(function () {
|
|||
});
|
||||
|
||||
|
||||
// function resizePages() {
|
||||
// var h = $(window).height();
|
||||
// var height = h < 600 ? 600 : h;
|
||||
/* $('section').css('height',height);
|
||||
// function resizePages() {
|
||||
// var h = $(window).height();
|
||||
// var height = h < 600 ? 600 : h;
|
||||
/* $('section').css('height',height);
|
||||
$('#home').css('height',height*0.98);
|
||||
}
|
||||
resizePages();*/
|
||||
});
|
||||
|
||||
(function () {
|
||||
(function() {
|
||||
var files = Array()
|
||||
|
||||
function upload(file) {
|
||||
|
||||
$('.browse').addClass('uploading');
|
||||
var li = $('<li style="clear:both;"/>');
|
||||
|
||||
li.append($('<div><div class="progress active upload-progress" style="margin-bottom: 0;"><div class="progress-bar bar" style="width: 0%;"></div></div><p>Uploading... ' + file.name + '</p></div>'));
|
||||
|
|
@ -49,13 +73,13 @@ $(document).ready(function () {
|
|||
|
||||
var xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener("progress", function (e) {
|
||||
xhr.upload.addEventListener("progress", function(e) {
|
||||
var pc = parseInt((e.loaded / e.total * 100));
|
||||
$('.upload-progress', $(li)).show();
|
||||
$('.upload-progress .bar', $(li)).css('width', pc + "%");
|
||||
}, false);
|
||||
|
||||
xhr.onreadystatechange = function (e) {
|
||||
xhr.onreadystatechange = function(e) {
|
||||
if (xhr.readyState == 4) {
|
||||
$('.upload-progress', $(li)).hide();
|
||||
$('#web').addClass('uploading');
|
||||
|
|
@ -72,7 +96,7 @@ $(document).ready(function () {
|
|||
$(".download-zip").attr("href", URI("(" + files.join(",") + ").zip").absoluteTo(location.href).toString());
|
||||
$(".download-tar").attr("href", URI("(" + files.join(",") + ").tar.gz").absoluteTo(location.href).toString());
|
||||
|
||||
$(".all-files").css("opacity", "1");
|
||||
$(".all-files").addClass('show');
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -86,15 +110,21 @@ $(document).ready(function () {
|
|||
xhr.send(file);
|
||||
};
|
||||
|
||||
$(document).bind("dragenter", function (event) {
|
||||
$(document).bind("dragenter", function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
}).bind("dragover", function (event) {
|
||||
}).bind("dragover", function(event) {
|
||||
event.preventDefault();
|
||||
// show drop indicator
|
||||
}).bind("dragleave", function (event) {}).bind("drop dragdrop", function (event) {
|
||||
$('#web').addClass('dragged');
|
||||
}).bind("dragleave", function(event) {
|
||||
$('#web').removeClass('dragged');
|
||||
console.log('asdasd');
|
||||
|
||||
}).bind("drop dragdrop", function(event) {
|
||||
var files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files;
|
||||
|
||||
$.each(files, function (index, file) {
|
||||
$.each(files, function(index, file) {
|
||||
console.debug(file);
|
||||
upload(file);
|
||||
});
|
||||
|
|
@ -103,15 +133,15 @@ $(document).ready(function () {
|
|||
event.preventDefault();
|
||||
});
|
||||
|
||||
$('a.browse').on('click', function (event) {
|
||||
$('a.browse').on('click', function(event) {
|
||||
$("input[type=file]").click();
|
||||
return (false);
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('input[type=file]').on('change', function (event) {
|
||||
$.each(this.files, function (index, file) {
|
||||
$('input[type=file]').on('change', function(event) {
|
||||
$.each(this.files, function(index, file) {
|
||||
if (file instanceof Blob) {
|
||||
upload(file);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,17 +8,28 @@
|
|||
|
||||
#navigation {
|
||||
ul {
|
||||
float: right;
|
||||
list-style: none;
|
||||
margin: 30px 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-family: @font-family-mono;
|
||||
float:left;
|
||||
margin-bottom: 15px;
|
||||
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
ul {
|
||||
float: right;
|
||||
margin: 30px 0;
|
||||
}
|
||||
h1 {
|
||||
float: left
|
||||
}
|
||||
}
|
||||
a {
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
#home {
|
||||
text-align: center;
|
||||
.btn-cta {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
font-size: 40x;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
|
|
@ -27,6 +25,7 @@
|
|||
}
|
||||
|
||||
#web {
|
||||
.transition(all @animation-duration ease);
|
||||
border: 1px dashed @blue;
|
||||
padding-top: 10px;
|
||||
i {
|
||||
|
|
@ -41,11 +40,33 @@
|
|||
}
|
||||
|
||||
#web, #terminal {
|
||||
min-height: 250px;
|
||||
min-height: 150px;
|
||||
@media (min-width: @screen-sm-min) {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#web .uploading {
|
||||
|
||||
i {
|
||||
.transition(font @animation-duration ease);
|
||||
font-size: 40px;
|
||||
}
|
||||
p.click {
|
||||
margin-top: -10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dragged {
|
||||
background: @light-gray;
|
||||
}
|
||||
|
||||
|
||||
#terminal {
|
||||
padding: 40px 20px;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
background: @dark-blue;
|
||||
|
|
@ -54,10 +75,20 @@
|
|||
background-size: 100% auto;
|
||||
font-family: @font-family-mono;
|
||||
font-size: 11px;
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.all-files {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.all-files .show {
|
||||
display:block;
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
font-family: @font-family-mono;
|
||||
font-size: 12px;
|
||||
}
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
#share {
|
||||
|
|
@ -77,7 +78,7 @@ footer {
|
|||
#contact {
|
||||
text-align: center;
|
||||
i {
|
||||
font-size: 60px;
|
||||
font-size: 160px;
|
||||
color: @blue;
|
||||
}
|
||||
padding:100px 0;
|
||||
|
|
|
|||
|
|
@ -21,11 +21,10 @@ blockquote.twitter-tweet {
|
|||
|
||||
text-align: right;
|
||||
border: 0;
|
||||
.xl {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
blockquote.twitter-tweet p {
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
|
|
@ -43,4 +42,9 @@ blockquote.twitter-tweet a {
|
|||
blockquote.twitter-tweet a:hover,
|
||||
blockquote.twitter-tweet a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote.tweet-xl p {
|
||||
font-size: 22px;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
|
@ -1941,17 +1941,25 @@ td.visible-print {
|
|||
padding: 0.2em 0;
|
||||
}
|
||||
#navigation ul {
|
||||
float: right;
|
||||
list-style: none;
|
||||
margin: 30px 0;
|
||||
}
|
||||
#navigation li {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
}
|
||||
#navigation h1 {
|
||||
text-align: center;
|
||||
font-family: "Source code Pro", monospace;
|
||||
float: left;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#navigation ul {
|
||||
float: right;
|
||||
margin: 30px 0;
|
||||
}
|
||||
#navigation h1 {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
|
|
@ -2031,7 +2039,7 @@ a:hover {
|
|||
margin: 30px 0;
|
||||
}
|
||||
#home h2 {
|
||||
font-size: 20px;
|
||||
font-size: 40x;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#home {
|
||||
|
|
@ -2062,6 +2070,8 @@ a:hover {
|
|||
font-size: 30px;
|
||||
}
|
||||
#web {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px dashed #85b5bb;
|
||||
padding-top: 10px;
|
||||
border-radius: 5px;
|
||||
|
|
@ -2076,10 +2086,31 @@ a:hover {
|
|||
}
|
||||
#web,
|
||||
#terminal {
|
||||
min-height: 250px;
|
||||
min-height: 150px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#web,
|
||||
#terminal {
|
||||
min-height: 270px;
|
||||
}
|
||||
}
|
||||
#web .uploading i {
|
||||
-webkit-transition: font 0.3s ease;
|
||||
transition: font 0.3s ease;
|
||||
font-size: 30px;
|
||||
}
|
||||
#web .uploading p.click {
|
||||
margin-top: -10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.dragged {
|
||||
background: #f6f8f8;
|
||||
}
|
||||
.browse .uploading i {
|
||||
font-size: 30px;
|
||||
}
|
||||
#terminal {
|
||||
padding: 40px 20px;
|
||||
padding: 10px;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
background: #36535a;
|
||||
|
|
@ -2089,10 +2120,21 @@ a:hover {
|
|||
font-family: "Source code Pro", monospace;
|
||||
font-size: 11px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
#terminal {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.all-files {
|
||||
display: none;
|
||||
}
|
||||
.all-files .show {
|
||||
display: block;
|
||||
}
|
||||
#features {
|
||||
background: #f6f8f8;
|
||||
text-align: center;
|
||||
|
|
@ -2110,6 +2152,9 @@ a:hover {
|
|||
color: #85b5bb;
|
||||
font-size: 100px;
|
||||
}
|
||||
#samples {
|
||||
padding: 50px 0;
|
||||
}
|
||||
#samples h4 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -2165,7 +2210,7 @@ footer img {
|
|||
padding: 150px 0;
|
||||
}
|
||||
#contact i {
|
||||
font-size: 60px;
|
||||
font-size: 160px;
|
||||
color: #85b5bb;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -2198,9 +2243,6 @@ blockquote.twitter-tweet {
|
|||
text-align: right;
|
||||
border: 0;
|
||||
}
|
||||
blockquote.twitter-tweet .xl {
|
||||
font-size: 18px;
|
||||
}
|
||||
blockquote.twitter-tweet p {
|
||||
font-size: 17px;
|
||||
font-weight: normal;
|
||||
|
|
@ -2217,6 +2259,10 @@ blockquote.twitter-tweet a:hover,
|
|||
blockquote.twitter-tweet a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
blockquote.tweet-xl p {
|
||||
font-size: 22px;
|
||||
line-height: 25px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "transfersh";
|
||||
src: url("../fonts/transfersh.eot");
|
||||
|
|
@ -2293,7 +2339,4 @@ blockquote.twitter-tweet a:focus {
|
|||
.icon-gplus:before {
|
||||
content: "p";
|
||||
}
|
||||
.uploading {
|
||||
background: red;
|
||||
}
|
||||
/*# sourceMappingURL=/styles/main.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +1,8 @@
|
|||
@import "bootstrap.less";
|
||||
|
||||
/*
|
||||
@import "../bower_components/octicons/octicons/octicons.less";
|
||||
|
||||
@octicons-font-path: "../bower_components/octicons/octicons/";*/
|
||||
@import "../bower_components/";
|
||||
|
||||
@import "config";
|
||||
@import "includes/global";
|
||||
@import "includes/home";
|
||||
|
|
@ -12,7 +11,3 @@
|
|||
@import "includes/transfersh-icons";
|
||||
|
||||
|
||||
.uploading {
|
||||
background: red;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue