1
0
mirror of https://github.com/dutchcoders/transfer.sh.git synced 2020-11-18 19:53:40 -08:00

reviews, code clean-up, responsivness

This commit is contained in:
Uvis Grinfelds 2014-10-20 11:15:41 +02:00
parent a3ae3984e9
commit 6fc6a2f40b
14 changed files with 222 additions and 110 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 910 B

View File

@ -60,13 +60,13 @@
</h2>
<div class="row">
<div id="from-terminal" class="box">
<div id="from-terminal" class="box col-md-6 col-xs-12" >
<h3>Easy sharing from the command-line</h3>
<div id="terminal">
<p style='white-space:pre'></p>
</div>
</div>
<div id="from-web" class="">
<div id="from-web" class="col-md-6 col-xs-12">
<h3>From web</h3>
<div id="web">
@ -93,74 +93,39 @@
</section>
<section id="features">
<div class="wrapper">
<div class="wrapper container">
<div class="row">
<div class="col-md-3 col-xs-3">
<i class="icon-terminal"></i>
<h3>Made for use with shell</h3>
</div>
<div class="col-md-3 col-xs-3">
<div class="col-md-3 col-xs-6">
<i class="icon-link"></i>
<h3>Share files with a URL</h3>
</div>
<div class="col-md-3 col-xs-3">
<div class="col-md-3 col-xs-6">
<i class="icon-database"></i>
<h3>Upload up to 5 GB</h3>
</div>
<div class="col-md-3 col-xs-3">
<div class="col-md-3 col-xs-6">
<i class="icon-clock"></i>
<h3>Files stored for 14 days</h3>
</div>
</div>
<div class="row">
<div class="col-md-offset-3 col-md-3 col-xs-3">
<div class="col-md-offset-3 col-md-3 col-xs-6">
<i class="icon-tag"></i>
<h3>For free</h3>
</div>
<div class="col-md-3 col-xs-3">
<div class="col-md-3 col-xs-6">
<i class="icon-lock"></i>
<h3>Encrypt your files</h3>
</div>
</div>
</div>
</section>
<section id="reviews">
<div class="wrapper">
<div class="row">
<div class="col-md-6 col-xs-6">
<meta name="twitter:widgets:link-color" content="#cc0000">
<blockquote class="twitter-tweet" lang="en">
<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>&mdash; Dave Sims (@FloifyDave) <a href="https://twitter.com/FloifyDave/status/517383101425516544">October 1, 2014</a>
</blockquote>
<script async src="http://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-md-6 col-xs-6">
<blockquote class="twitter-tweet" lang="en">
<p><a href="https://twitter.com/dutchcoders">@dutchcoders</a> love transfer.sh! any change we can *pay* for a self-hosted version?</p>&mdash; Kareem Kouddous (@kareemk) <a href="https://twitter.com/kareemk/status/517029789191118849">September 30, 2014</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<blockquote class="twitter-tweet" lang="en">
<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>&mdash; PJ Spagnolatti (@drakpz) <a href="https://twitter.com/drakpz/status/517008058841829376">September 30, 2014</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="col-md-6 col-xs-6">
<blockquote class="twitter-tweet" lang="en">
<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>&mdash; Jacob Lindgren (@jacoblindgren11) <a href="https://twitter.com/jacoblindgren11/status/516975006501203968">September 30, 2014</a>
</blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
</div>
</div>
</section>
<section id="samples">
<div class="wrapper">
@ -187,6 +152,11 @@
</div>
</div>
<a class="btn-cta" data-target="#coll" data-toggle="collapse">More examples</a>
<div class="collapse " id="coll">
<div class="row">
<div class="col-md-6">
<h3>Transfer multiple files</h3>
@ -212,6 +182,52 @@
<code>$ curl https://transfer.sh/1lDau/test.txt|gpg -o- > /tmp/hello.txt</code>
</div>
</div>
</div>
</div>
</section>
<section id="reviews">
<div class="wrapper">
<div class="row">
<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="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>
</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>
</blockquote>
</div>
</div>
<div class="row">
<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>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>
</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="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>
</blockquote>
</div>
</div>
</div>
</section>
@ -296,6 +312,8 @@
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/typed.js/js/typed.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>
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>

View File

@ -28,6 +28,14 @@ $(document).ready(function () {
}
});
// function resizePages() {
// var h = $(window).height();
// var height = h < 600 ? 600 : h;
/* $('section').css('height',height);
$('#home').css('height',height*0.98);
}
resizePages();*/
});
(function () {
@ -35,6 +43,7 @@ $(document).ready(function () {
function upload(file) {
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>'));
$(li).appendTo($('.queue'));
@ -49,7 +58,7 @@ $(document).ready(function () {
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4) {
$('.upload-progress', $(li)).hide();
$('#web').addClass('uploading');
// progress.className = (xhr.status == 200 ? "success" : "failure");
if (xhr.status == 200) {
$(li).html('<a target="_blank" href="' + xhr.responseText + '">' + xhr.responseText + '</a>');

View File

@ -16,7 +16,7 @@
//@import "../bower_components/bootstrap/less/buttons.less";
// Components
//@import "../bower_components/bootstrap/less/component-animations.less";
@import "../bower_components/bootstrap/less/component-animations.less";
//@import "../bower_components/bootstrap/less/glyphicons.less";
//@import "../bower_components/bootstrap/less/dropdowns.less";
//@import "../bower_components/bootstrap/less/button-groups.less";

View File

@ -52,7 +52,7 @@ h2 {
}
section {
padding: 50px 0
// padding: 50px 0
}
img {

View File

@ -3,13 +3,18 @@
.btn-cta {
margin: 30px 0;
}
h2 {
font-size: 20px;
}
@media (min-width: @screen-sm-min) {
padding: 50px
h2 {
font-size: 65px;
margin-top: -10px;
margin-bottom: 45px;
}
padding: 50px;
}
}
#from-terminal,

View File

@ -0,0 +1,43 @@
#reviews {
background: @light-gray;
padding: 130px 0;
.twitter-profile {
float: left;
display: block;
height: 100px;
margin-right: 20px;
border-radius: 10px;
}
}
blockquote.twitter-tweet {
display: inline-block;
font-size: 15px;
line-height: 20px;
margin: 10px 5px;
padding: 0 16px 16px 16px;
color: #000;
text-align: right;
border: 0;
}
blockquote.twitter-tweet p {
font-size: 17px;
font-weight: normal;
line-height: 20px;
text-align: left;
}
blockquote.twitter-tweet a {
color: inherit;
font-weight: normal;
text-decoration: none;
outline: 0 none;
}
blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
text-decoration: underline;
}

View File

@ -1315,6 +1315,27 @@ address {
margin-left: 0%;
}
}
.fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;
}
.fade.in {
opacity: 1;
}
.collapse {
display: none;
}
.collapse.in {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
transition: height 0.35s ease;
}
/* @import "../bower_components/bootstrap/less/navs.less";
@import "../bower_components/bootstrap/less/navbar.less"; */
@-webkit-keyframes progress-bar-stripes {
@ -1995,9 +2016,6 @@ h2 {
width: 1216px;
}
}
section {
padding: 50px 0;
}
img {
max-width: 100%;
margin: 0 auto;
@ -2008,16 +2026,20 @@ a:hover {
}
#home {
text-align: center;
padding: 50px;
}
#home .btn-cta {
margin: 30px 0;
}
#home h2 {
font-size: 20px;
}
@media (min-width: 768px) {
#home h2 {
font-size: 65px;
margin-top: -10px;
margin-bottom: 45px;
}
}
#from-terminal,
#from-web {
position: relative;
@ -2152,6 +2174,43 @@ footer img {
margin-top: -50px;
margin-bottom: 40px;
}
#reviews {
background: #f6f8f8;
padding: 130px 0;
}
#reviews .twitter-profile {
float: left;
display: block;
height: 100px;
margin-right: 20px;
border-radius: 10px;
}
blockquote.twitter-tweet {
display: inline-block;
font-size: 15px;
line-height: 20px;
margin: 10px 5px;
padding: 0 16px 16px 16px;
color: #000;
text-align: right;
border: 0;
}
blockquote.twitter-tweet p {
font-size: 17px;
font-weight: normal;
line-height: 20px;
text-align: left;
}
blockquote.twitter-tweet a {
color: inherit;
font-weight: normal;
text-decoration: none;
outline: 0 none;
}
blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
text-decoration: underline;
}
@font-face {
font-family: "transfersh";
src: url("../fonts/transfersh.eot");
@ -2228,16 +2287,7 @@ footer img {
.icon-gplus:before {
content: "p";
}
.follow-button {
display: none!important;
opacity: 0;
}
.twitter-tweet {
height: 205px;
background: #fff;
}
#reviews {
background: #36535a;
padding: 130px 0;
.uploading {
background: red;
}
/*# sourceMappingURL=/styles/main.css.map */

File diff suppressed because one or more lines are too long

View File

@ -5,27 +5,14 @@
@octicons-font-path: "../bower_components/octicons/octicons/";*/
@import "config";
@import "global";
@import "home";
@import "pages";
@import "transfersh-icons";
@import "includes/global";
@import "includes/home";
@import "includes/pages";
@import "includes/reviews";
@import "includes/transfersh-icons";
// Hide twitter follow button
.follow-button {
display:none!important;
opacity: 0;
}
.twitter-tweet {
height: 205px;
background: #fff;
}
#reviews {
background: @dark-blue;
padding: 130px 0
.uploading {
background: red;
}