diff --git a/static/css/index.css b/static/css/index.css index ab346ab..6481372 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,14 +1,20 @@ +html { + height:100%; + width:100%; +} body { user-select:none; font-family:arial; text-align:center; - margin:20px; + height:100%; + width:100%; + margin:0px; +} +#numbers, #input, h1, input[type=text] { + max-width:700px; + min-width:200px; margin-left:auto; margin-right:auto; - min-width:300px; - max-width:700px; - padding-left:20px; - padding-right:20px; } #input, input[type=text] { text-align:center; @@ -60,7 +66,7 @@ body { #info { position:fixed; top:10px; - right:10px; + right:30px; width:20px; height:20px; background-color:lightgray; @@ -86,7 +92,7 @@ body { img.l { position:fixed; bottom:10px; - right:10px; + right:30px; z-index:10; } #legend, #question { @@ -101,13 +107,16 @@ img.l { } #legend { text-align:left; - padding:30px; + padding:0px 30px 30px 30px; width:calc(100% - 60px); - height:calc(100% - 60px); + height:calc(100% - 30px); overflow:auto; } -body.blur { - overflow:hidden; +#main { + height:100%; + width:100%; + overflow:auto; + overflow-y:scroll; } #main.blur { filter:blur(5px); @@ -137,9 +146,10 @@ input[type=text] { background-color:whitesmoke; outline:none; border:0px; - width:100%; + width:calc(100% - 20px); height:40px; - padding:0px; + padding-left:10px; + padding-right:10px; line-height:40px; border-radius:20px; margin-top:30px; diff --git a/static/js/index.js b/static/js/index.js index b235b44..f2683bb 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -187,8 +187,8 @@ function loadNumberTags(num) { } function alertToSend() { //Show alert before sending data descriptionMode = true; - $('#question').show().siblings('#main, body').addClass('blur'); - $('#question > span').click(function() { //Listen for click on yes. + $('#question').show().siblings('#main').addClass('blur'); + $('#question').on('click', 'span', function() { //Listen for click on yes. if($(this).hasClass('yes')) { sendTagsAndDescription(); } @@ -202,7 +202,7 @@ function alertToSend() { //Show alert before sending data }).focus(); } function closeAlert() { - $('#question').hide().unbind().siblings('#main, body').removeClass('blur'); //Unbind all events and remove alert + $('#question').hide().unbind().siblings('#main').removeClass('blur'); //Unbind all events and remove alert descriptionMode = false; } function sendTagsAndDescription() { //Send all tags to database @@ -296,7 +296,7 @@ autoFillTag(); $(document).ready(function() { $('#info').click(function() { //On click info button $('#legend').toggle(); - $('#main, body').toggleClass('blur'); + $('#main').toggleClass('blur'); }); $('input[type=text]').click(function() { //If description input is clicked descriptionMode = true; @@ -369,7 +369,6 @@ $(document).on('keydown', function (e) { $('#input span:last').addClass('type'); //Make the last one typeable } else { $('#input .type').text($('#input .type').text().slice(0, -1)); //Remove one character from end of selected bubble - console.log('bs'); } } else { $('#input .type').append(e.key.toLowerCase()); //Type the key @@ -383,6 +382,9 @@ $(document).on('keydown', function (e) { if($('#input span:first').text().match(/^\d+$/)) { // If only a number numberModeOn(); } + if(typeFilled() && !numberMode && !typeValid() && e.keyCode !== 8) { //If type is valid, or in number mode, or type has no text + $('#input .type').text($('#input .type').text().slice(0, -1)); //Remove one character from end of selected bubble + } if($('#input span:first')[0] == $('#input .type')[0] && numberMode) { //If first bubble is number and changed loadNumberTags($('#input .type').text()); }