libretic/transfer.sh
6
0
Fork 0
mirror of https://github.com/dutchcoders/transfer.sh.git synced 2024-12-27 21:00:19 +01:00
Code Issues Projects Releases Packages Wiki Activity

responsivness

Browse source
This commit is contained in:
Uvis Grinfelds 2014-10-20 15:08:28 +02:00
parent a048401340
commit e8564bbf95
10 changed files with 193 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
transfersh-web/favicon.ico.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 910 B

22
transfersh-web/index.html
View file

@ -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>&#10;Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p>&mdash; 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>&#10;Thanks <a href="https://twitter.com/dutchcoders">@dutchcoders</a> !</p> <a href="https://twitter.com/arvestad/status/519507976491499521">&mdash; 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">&mdash; 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">&mdash; 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">&mdash; 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">&mdash; 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">&mdash; Jacob Lindgren (@jacoblindgren11) September 30, 2014</a>
</p><a href="https://twitter.com/jacoblindgren11/status/516975006501203968">&mdash; 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">
&mdash; Dave Sims (@FloifyDave)October 1, 2014</a>
&mdash; 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>

88
transfersh-web/scripts/main.js
View file

@ -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);
}

17
transfersh-web/styles/includes/global.less
View 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 {
}
}

45
transfersh-web/styles/includes/home.less
View file

@ -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;
}

3
transfersh-web/styles/includes/pages.less
View file

@ -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;

14
transfersh-web/styles/includes/reviews.less
View file

@ -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;
}

69
transfersh-web/styles/main.css
View file

@ -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 */

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

File diff suppressed because one or more lines are too long

9
transfersh-web/styles/main.less
View file

@ -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;
}