add basic style for file download page
This commit is contained in:
parent
2a9abc8a54
commit
d5a67aa86e
GPG key ID:
57AFB45680EDD477
6 changed files with 80 additions and 5 deletions
|
|
@ -23,6 +23,7 @@
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/RealOrangeOne/static-share#readme",
|
"homepage": "https://github.com/RealOrangeOne/static-share#readme",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap-material-design": "=0.5.10",
|
||||||
"bootstrap-sass": "=3.3.7",
|
"bootstrap-sass": "=3.3.7",
|
||||||
"font-awesome": "=4.6.3",
|
"font-awesome": "=4.6.3",
|
||||||
"jquery": "=2.1.4"
|
"jquery": "=2.1.4"
|
||||||
|
|
|
||||||
|
|
@ -1 +1,2 @@
|
||||||
import 'bootstrap-sass/assets/javascripts/bootstrap.js';
|
import 'bootstrap-sass/assets/javascripts/bootstrap.js';
|
||||||
|
import './timer';
|
||||||
|
|
|
||||||
27
static/src/js/timer.js
Normal file
27
static/src/js/timer.js
Normal 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'));
|
||||||
|
});
|
||||||
|
|
@ -2,8 +2,33 @@
|
||||||
|
|
||||||
$icon-font-path: "../fonts/";
|
$icon-font-path: "../fonts/";
|
||||||
@import "node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";
|
@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;
|
$fa-font-path: $icon-font-path;
|
||||||
@import "node_modules/font-awesome/scss/font-awesome";
|
@import "node_modules/font-awesome/scss/font-awesome";
|
||||||
|
|
||||||
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,300,300italic,400italic,700italic");
|
@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%;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,16 @@
|
||||||
<script src="{% static 'js/jquery.js' %}"></script>
|
<script src="{% static 'js/jquery.js' %}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<section id="section-wrapper">
|
||||||
|
<div class="container">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>Powered by Static-Share</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
<script src="{% static 'js/app.js' %}"></script>
|
<script src="{% static 'js/app.js' %}"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,21 @@
|
||||||
{% extends 'base.html' %}
|
{% extends 'base.html' %}
|
||||||
|
|
||||||
{% block title %}file {{ file.get_original_filename }}{% endblock %}
|
{% block title %}Download {{ file.get_original_filename }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1>{{ file }}</h1>
|
<div class="row">
|
||||||
<h1>{{ token.token }}</h1>
|
<div class="col-sm-6 col-sm-offset-3">
|
||||||
<h2>{% url 'files:file_download' file.short_id token.token %}</h2>
|
<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 %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Reference in a new issue