diff --git a/package.json b/package.json index fddd903..850bb03 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/static/src/js/app.js b/static/src/js/app.js index 0af6d63..a5cf78b 100644 --- a/static/src/js/app.js +++ b/static/src/js/app.js @@ -1 +1,2 @@ import 'bootstrap-sass/assets/javascripts/bootstrap.js'; +import './timer'; diff --git a/static/src/js/timer.js b/static/src/js/timer.js new file mode 100644 index 0000000..cef48ab --- /dev/null +++ b/static/src/js/timer.js @@ -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')); +}); diff --git a/static/src/scss/index.scss b/static/src/scss/index.scss index 87c88d1..023d320 100644 --- a/static/src/scss/index.scss +++ b/static/src/scss/index.scss @@ -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%; +} diff --git a/templates/base.html b/templates/base.html index fd23355..8659024 100644 --- a/templates/base.html +++ b/templates/base.html @@ -8,7 +8,16 @@ - {% block content %}{% endblock %} +
+
+ {% block content %}{% endblock %} +
+
+ diff --git a/templates/file.html b/templates/file.html index 51356ac..70c502c 100644 --- a/templates/file.html +++ b/templates/file.html @@ -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 %} -

{{ file }}

-

{{ token.token }}

-

{% url 'files:file_download' file.short_id token.token %}

+
+
+
+ +
+

{{ file.get_original_filename }}

+
Created at: {{ file.created }}
+
+ + Download {{ file.get_original_filename }} + +

This download link is only valid for .

+
+
+
{% endblock %}