Place buttons beneath each other

2 files changed, 15 insertions, 2 deletions

diff --git a/public/css/luoparsetrainer.css b/public/css/luoparsetrainer.css
index d9fddaa..9b72da1 100644
--- a/public/css/luoparsetrainer.css
+++ b/public/css/luoparsetrainer.css
@@ -57,12 +57,19 @@ body {
 }
 
 #trainer-input-fancy {
+	display: inline-block;
 	margin-bottom: 20px;
 }
 
 #trainer-input-fancy button {
 	margin-bottom: 3px;
 	min-width: 7em;
+	width: 100%;
+}
+
+#trainer-input-fancy button.ptc {
+	margin-right: 3px;
+	width: 30%;
 }
 
 #trainer-input-help {
diff --git a/public/js/luoparsetrainer.js b/public/js/luoparsetrainer.js
index 790c3ee..5353b6f 100644
--- a/public/js/luoparsetrainer.js
+++ b/public/js/luoparsetrainer.js
@@ -110,6 +110,8 @@ $(document).ready(function(){
 		for (k in buts) {
 			var but = $('<button></button>');
 			but.addClass('btn btn-default').attr('role', 'button');
+			if (Object.keys(buts).length > 6)
+				but.addClass('ptc');
 			but.text(buts[k]).val(k);
 			but.click(val, function(ev){
 				var ip = $('#trainer-input-'+input_count);
@@ -132,10 +134,14 @@ $(document).ready(function(){
 				}
 			});
 
-			input_field.append(but).append('&nbsp;');
+			input_field.append(but);
 
-			if (Object.keys(buts).length > 6 && !(++i % 3))
+			if (Object.keys(buts).length > 6) {
+				if (!(++i % 3))
+					input_field.append($('<br>'));
+			} else {
 				input_field.append($('<br>'));
+			}
 		}
 	}