Simpler layout of the info boxes

Remove the use of a table

2 files changed, 17 insertions, 24 deletions

diff --git a/src/leaflet-soton.css b/src/leaflet-soton.css
index 336d273..56a8eb1 100644
--- a/src/leaflet-soton.css
+++ b/src/leaflet-soton.css
@@ -6,6 +6,11 @@
     font: 25px/16px Arial, Helvetica, sans-serif;
 }
 
+.ls-popup-uri {
+    float: right;
+    text-decoration: none;
+}
+
 .ls-levelselector {
     line-height: 18px;
     color: #555;
diff --git a/src/leaflet-soton.js b/src/leaflet-soton.js
index b2d2a43..dd2193c 100644
--- a/src/leaflet-soton.js
+++ b/src/leaflet-soton.js
@@ -1479,21 +1479,21 @@ SELECT * WHERE {\
     }
 
     function getTemplateWrapper(properties, contentFunction) {
-        var table = document.createElement('table');
-
-        table.classList.add("ls-content-table");
-
-        table.setAttribute('style', 'width: 100%');
+        var div = document.createElement("div");
 
-        var headingRow = document.createElement('tr');
-        table.appendChild(headingRow);
+        if ('uri' in properties) {
+            var link = document.createElement('a');
+            link.setAttribute('href', properties.uri);
+            link.setAttribute('target', '_blank');
+            link.className = 'ls-popup-uri';
+            link.textContent = "(More Information)";
 
-        var titleData = document.createElement('td');
-        headingRow.appendChild(titleData);
+            div.appendChild(link);
+        }
 
         var title = document.createElement('h2');
         title.classList.add("ls-popup-title");
-        titleData.appendChild(title);
+        div.appendChild(title);
 
         var titleText = "";
 
@@ -1507,21 +1507,9 @@ SELECT * WHERE {\
 
         title.textContent = titleText;
 
-        var moreInfo = L.DomUtil.create('td', '', headingRow);
-        moreInfo.setAttribute('align', 'right');
-
-        if ('uri' in properties) {
-            createBlankLink(properties.uri, '(More Information)', moreInfo);
-        }
-
-        var contentRow = L.DomUtil.create('tr', '', table);
+        contentFunction(div);
 
-        var contentData = L.DomUtil.create('td', '', contentRow);
-        contentData.setAttribute('colspan', '2');
-
-        contentFunction(contentData);
-
-        return table;
+        return div;
     }
 
     var createTabs = function(tabs, container) {