diff --git a/counter/static/css/main.css b/counter/static/css/main.css index 0bc9c4b..4ce5cd1 100644 --- a/counter/static/css/main.css +++ b/counter/static/css/main.css @@ -69,37 +69,72 @@ form .card-action button { margin-right: auto; } +.edit-arrowcount.title { + font-size: 3rem; +} + +.edit-arrowcount.ends { + text-align: center; + margin: .5rem; + margin-bottom: calc(20px - .5rem); +} + +.edit-arrowcount.ends button { + font-size: 1.5rem; + font-weight: bold; + width: 5.5rem; + height: 4rem; + display: inline-block; + margin: .4rem; +} + #edit-arrowcount-form input, #edit-target-form input { - text-align: center + text-align: center; } #edit-arrowcount-form #id_count, #edit-target-form #id_target { - font-size: 3em; + font-size: 2.5em; padding: .25em 0; } -.count-up, .count-down { +.edit-arrowcount.onebyone { + display: inline-block; width: 100%; + text-align: center; +} + +.count-up, .count-down { + height: 7rem; + font-size: 5rem; + text-align: center; + padding: 0; + font-family: 'Verdana', sans-serif; } .count-up { - height: 8rem; + width: calc(70% - .45rem - 2px); + margin-right: .4rem; } .count-down { - height: 5rem; + width: calc(30% - .45rem - 1px); + margin-left: .4rem; } -.count-up .material-icons { - font-size: 7rem; - line-height: 8rem; -} +@media screen and (max-width: 359px) { + .count-up, .count-down { + width: 100%; + margin-left: 0; + margin-right: 0; + } -.count-down .material-icons { - font-size: 4.5rem; - line-height: 5rem; + .count-down { + height: 4rem; + font-size: 3rem; + margin-top: 1rem; + } } .inline-block { diff --git a/counter/static/js/count_edit.js b/counter/static/js/count_edit.js index 8bb6cd0..ab94ab6 100644 --- a/counter/static/js/count_edit.js +++ b/counter/static/js/count_edit.js @@ -1,4 +1,5 @@ 'use strict'; +// vim: set ts=2 sw=2 et tw=80: var acForm = $('#edit-arrowcount-form'), input = acForm.find('#id_count'); @@ -16,14 +17,35 @@ function arrowCountUpdateAjax() { }); } -$('.count-up').click(function() { +function arrowCountFetchAjax(next) { + $.ajax({ + url: acForm.attr('data-fetch-ajax'), + method: 'GET', + success: function(e) { + if(!e.success) { + M.toast({html: gettext('Error while updating') + ': ' + e.error}) + } else { + next(e.count); + } + } + }); +} + +$('#id_count').keypress(function() { var count = parseInt(input.val(), 10); if(!isNaN(count) && count >= 0) { - input.val(count + 1); arrowCountUpdateAjax(); } }); +$('.count-up').click(function(e) { + var increment = parseInt(e.currentTarget.getAttribute("data-increment")); + arrowCountFetchAjax(function (count) { + input.val(count + increment); + arrowCountUpdateAjax(); + }); +}); + $('.count-down').click(function() { var count = parseInt(input.val(), 10); if(!isNaN(count) && count > 0) { diff --git a/counter/templates/counter/edit.html b/counter/templates/counter/edit.html index 1c1fe1f..6649754 100644 --- a/counter/templates/counter/edit.html +++ b/counter/templates/counter/edit.html @@ -11,8 +11,9 @@ {% endblock %} {% block content %} -