From ddb3a1520829a0edc5d3a78cd5bcb9c4e2295b43 Mon Sep 17 00:00:00 2001
From: Bickerstaff <dylan.bickerstaff@ad.cedarfair.com>
Date: Thu, 21 Sep 2017 09:27:47 -0400
Subject: [PATCH] Perfection

---
 static/css/index.css | 36 +++++++++++++++++++++++-------------
 static/js/index.js   | 12 +++++++-----
 2 files changed, 30 insertions(+), 18 deletions(-)

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());
 			}