commit c8eb4a1d4932c0d04429d79f228f7110e75c1347
author Akron <nils@diewald-online.de> Sat Feb 03 00:39:58 2018 +0100
committer Akron <nils@diewald-online.de> Sat Feb 03 00:39:58 2018 +0100
tree efb6dcecf8e9f327058dc6251aee0b4079cad24f
parent aeceda732df65242610d50730d9adc4fc21f933c

Fixed ordering of matchinfos

Change-Id: Iefa962eb09ea1ea9830c0a42df396d6798e39785

dev/js/src/match/info.js

diff --git a/dev/js/src/match/info.js b/dev/js/src/match/info.js
index 8779ee9..ac741ae 100644
--- a/dev/js/src/match/info.js
+++ b/dev/js/src/match/info.js
@@ -208,7 +208,9 @@
      */
     showTree : function (foundry, layer, type, cb) {
       var matchtree = d.createElement('div');
-      matchtree.classList.add('matchtree');
+      matchtree.classList.add('matchtree', 'loading');
+
+      this.element().appendChild(matchtree);
 
       // Add title line
       var h6 = matchtree.addE('h6');
@@ -217,27 +219,17 @@
 
       var tree = matchtree.addE('div');
       
-      this._element.insertBefore(matchtree, this._element.lastChild);
-
       // Add close action button
-      var actions = tree.addE('ul');
-      actions.classList.add('action', 'image');
-      var close = actions.addE('li');
-      close.className = 'close';
-      close.addE('span');
-      close.addEventListener(
-        'click', function (e) {
-          matchtree.parentNode.removeChild(matchtree);
-          e.halt();
-        }
-      );
+      var actions = this._addButton('close', matchtree, function (e) {
+        this.parentNode.removeChild(this);
+        e.halt();
+      });
 
-      tree.classList.add('loading');
+      // tree.classList.add('loading'); // alternatively
 
       // Get tree data async
       this.getTreeData(foundry, layer, type, function (treeObj) {
-
-        tree.classList.remove('loading');
+        matchtree.classList.remove('loading');
 
         // Something went wrong - probably log!!!
 
@@ -275,13 +267,15 @@
         if (cb !== undefined)
           cb(treeObj);
       });
+      matchtree.classList.remove('loading');
     },
 
 
     // Add meta information to match
     showMeta : function () {
       var metaTable = document.createElement('div');
-      metaTable.classList.add('metatable'); // , 'loading');
+      metaTable.classList.add('metatable', 'loading');
+      this.element().appendChild(metaTable);
 
       // TODO: This is part of the getMeta!
       var metaInfo = this._match.element().getAttribute('data-info');
@@ -292,10 +286,12 @@
       // There is metainfo
       if (metaInfo) {
 
+        // Load data
+        metaTable.classList.remove('loading');
+
         // Add metainfo to matchview
         var metaElem = matchMetaClass.create(this._match).element(metaInfo);
         metaTable.appendChild(metaElem);
-        this.element().appendChild(metaTable);
 
         // Add button
         this._addButton('close', metaTable, function (e) {
@@ -314,8 +310,7 @@
 
       // Append default table
       var matchtable = d.createElement('div');
-      matchtable.classList.add('matchtable'); // , 'loading');
-
+      matchtable.classList.add('matchtable', 'loading');
       var info = this.element();
       info.appendChild(matchtable);
 
@@ -323,6 +318,9 @@
       // Create the table asynchronous
       this.getTableData(undefined, function (table) {
 
+        // Load data
+        matchtable.classList.remove('loading');
+
         if (table !== null) {
           matchtable.appendChild(table.element());
 	      };
@@ -344,7 +342,7 @@
       matchtable.classList.remove('loading');
     },
 
-
+    // Add action button
     _addButton : function (buttonType, element, cb) {
       // TODO: Unless existent
       var actions = document.createElement('ul');

dev/scss/main/matchinfo.scss

diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index cdfd293..d1ccbf5 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -380,7 +380,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: stretch;
   width: auto;
   padding-bottom: 0;
@@ -430,7 +430,7 @@
 
 @media (min-width:800px) {
   div.metatable > dl > div {
-    width: 33%; // 3*
+    width: 33.3333333333333%; // 3*
   }
 }