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 %} +