archive/static-share
Archived
1
Fork 0
Code Releases Packages Activity

add basic style for file download page

Browse source
This commit is contained in:
Jake Howard 2016-09-06 22:10:43 +01:00
parent 2a9abc8a54
commit d5a67aa86e
Signed by: jake
GPG key ID: 57AFB45680EDD477
6 changed files with 80 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -23,6 +23,7 @@
},
"homepage": "https://github.com/RealOrangeOne/static-share#readme",
"dependencies": {
"bootstrap-material-design": "=0.5.10",
"bootstrap-sass": "=3.3.7",
"font-awesome": "=4.6.3",
"jquery": "=2.1.4"

1
static/src/js/app.js
View file

@ -1 +1,2 @@
import 'bootstrap-sass/assets/javascripts/bootstrap.js';
import './timer';

27
static/src/js/timer.js Normal file
View file

@ -0,0 +1,27 @@
function timer(display) {
let duration = parseInt(display.data('duration'), 10);
let minutes, seconds;
const intervalId = setInterval(function () {
minutes = parseInt(duration / 60, 10);
seconds = parseInt(duration % 60, 10);
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
const time = minutes + ':' + seconds;
display.text(time);
console.log(time);
duration--;
if (duration < 0) {
clearInterval(intervalId);
$('.download-button').addClass('btn-danger').removeClass('btn-primary').removeAttr('href');
$('.timer-message').text('Link invalid - refresh the page to generate a new download link');
}
}, 1000);
}
$(document).ready(function () {
timer($('.timer'));
});

25
static/src/scss/index.scss
View file

@ -2,8 +2,33 @@
$icon-font-path: "../fonts/";
@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
@import "node_modules/bootstrap-material-design/dist/css/bootstrap-material-design";
$fa-font-path: $icon-font-path;
@import "node_modules/font-awesome/scss/font-awesome";
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic");
#section-wrapper {
padding: 50px 0;
}
.thumbnail.file {
text-align: center;
padding: 20px;
img {
width: 300px;
}
.btn {
border-radius: 0;
}
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}

9
templates/base.html
View file

@ -8,7 +8,16 @@
<script src="{% static 'js/jquery.js' %}"></script>
</head>
<body>
<section id="section-wrapper">
<div class="container">
{% block content %}{% endblock %}
</div>
</section>
<footer>
<div class="container">
<p>Powered by Static-Share</p>
</div>
</footer>
<script src="{% static 'js/app.js' %}"></script>
</body>
</html>

20
templates/file.html
View file

@ -1,9 +1,21 @@
{% extends 'base.html' %}
{% block title %}file {{ file.get_original_filename }}{% endblock %}
{% block title %}Download {{ file.get_original_filename }}{% endblock %}
{% block content %}
<h1>{{ file }}</h1>
<h1>{{ token.token }}</h1>
<h2>{% url 'files:file_download' file.short_id token.token %}</h2>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="thumbnail file">
<img src="{{ file.get_type_image }}" />
<div class="caption">
<h3>{{ file.get_original_filename }}</h3>
<h5>Created at: {{ file.created }}</h5>
</div>
<a class="btn btn-primary btn-block btn-lg download-button" href="{% url 'files:file_download' file.short_id token.token %}">
Download {{ file.get_original_filename }}
</a>
<p class="timer-message">This download link is only valid for <span class="timer" data-duration="{{ token.valid_time.seconds }}"></span>.</p>
</div>
</div>
</div>
{% endblock %}