Fixed positioning of query creator

Change-Id: I634f497427d8dc100170541fae343098bc76f1cf
diff --git a/Changes b/Changes
index 2aba707..8260303 100755
--- a/Changes
+++ b/Changes
@@ -1,3 +1,6 @@
+0.23 2017-06-28
+        - Added query creator tool.
+
 0.22 2017-06-26
         - Added user authentification using Kustvakts LDAP
           connection.
diff --git a/dev/demo/query-creator.html b/dev/demo/query-creator.html
index b904441..35a3b74 100644
--- a/dev/demo/query-creator.html
+++ b/dev/demo/query-creator.html
@@ -32,7 +32,7 @@
               <th>p</th>
               <td>ART</td>
               <td>ADJA</td>
-              <td>ADJA</td>
+              <td>ADJA<br>ADJD</td>
               <td>NN</td>
             </tr>
             <tr tabindex="0">
@@ -40,7 +40,7 @@
               <th>p</th>
               <td>ART</td>
               <td>ADJA</td>
-              <td>ADJA</td>
+              <td></td>
               <td>NN</td>
             </tr>
           </tbody>
diff --git a/dev/demo/query-creator.js b/dev/demo/query-creator.js
index 244f719..8c1784e 100644
--- a/dev/demo/query-creator.js
+++ b/dev/demo/query-creator.js
@@ -7,6 +7,6 @@
 
 define(['match/querycreator', 'lib/domReady'], function (qc, domReady) {
   domReady(function () {
-    qc.create(document.getElementsByClassName('matchtable')[0]);
+    qc.create(document.getElementsByClassName('matchinfo')[0]);
   });
 });
diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index f8ac2cc..7a659ba 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -280,7 +280,7 @@
 	      matchtable.classList.remove('loading');
 
         // Add query creator
-        this._matchCreator = matchQueryCreator.create(matchtable);
+        this._matchCreator = matchQueryCreator.create(info);
       });
 
       // Get spans
diff --git a/dev/js/src/match/querycreator.js b/dev/js/src/match/querycreator.js
index ca5aaf9..d9c41de 100644
--- a/dev/js/src/match/querycreator.js
+++ b/dev/js/src/match/querycreator.js
@@ -21,8 +21,11 @@
       this._query = []
       this._matchInfo = matchInfo;
 
+      // Get the match table
+      this._matchTable = this._matchInfo.getElementsByClassName('matchtable')[0];
+
       // Listen on the match table
-      this._matchInfo.addEventListener(
+      this._matchTable.addEventListener(
         "click", this.clickOnAnno.bind(this), false
       );
 
@@ -187,7 +190,7 @@
       else {
 
         if (this._shown === false) {
-          this._matchInfo.appendChild(this._element);
+          this._matchInfo.insertBefore(this._element, this._matchTable.nextSibling);
           this._shown = true;
         };
 
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index ae73031..801503f 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -67,16 +67,6 @@
       }
     }
   }
-}
-
-div.matchtable {
-  z-index: 20;
-  margin-left: $left-distance - ($border-size / 2);
-  margin-right: $right-match-distance;
-  padding: 0;
-  overflow-x: auto;
-  overflow-y: visible;
-  width: auto;
 
   p.queryfragment {
     position:relative;
@@ -87,6 +77,13 @@
       radius: $standard-border-radius;
     }
     padding: 2pt 4pt !important;
+    margin: {
+      // left: $border-size;
+      left: $left-distance;
+      top: .5em;
+      bottom: .5em;
+      right: $right-match-distance;
+    }
     &:hover {
       cursor:pointer;
       @include choose-hover;
@@ -108,9 +105,19 @@
 	    content: $fa-to-query;
       position: absolute;
       right: 4pt;
-      top: 4pt;
+      top: $border-size;
     }
   }
+}
+
+div.matchtable {
+  z-index: 20;
+  margin-left: $left-distance - ($border-size / 2);
+  margin-right: $right-match-distance;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: visible;
+  width: auto;
 
   table {
     display: table;
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index eea8bfe..d29fa0d 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -7,7 +7,7 @@
 use File::Temp qw/tmpnam/;
 
 # Minor version - may be patched from package.json
-our $VERSION = '0.22';
+our $VERSION = '0.23';
 
 # TODO: Use CSRF!!!
 # TODO: The FAQ-Page has a contact form for new questions
diff --git a/package.json b/package.json
index 117edb7..0a87174 100755
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "Kalamar",
   "description": "Mojolicious-based Frontend for KorAP",
   "license" : "BSD-2-Clause",
-  "version": "0.22.1",
+  "version": "0.23.1",
   "repository" : {
     "type": "git",
     "url": "https://github.com/KorAP/Kalamar.git"