From 9d109374e96ae5b5be3892d2544de0597256942c Mon Sep 17 00:00:00 2001
From: Gordon Williams <gw@pur3.co.uk>
Date: Sun, 3 Nov 2019 11:50:00 +0000
Subject: [PATCH] responsive

---
 index.html |  4 ++--
 index.js   | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index f4485d452..e881dc32a 100644
--- a/index.html
+++ b/index.html
@@ -63,7 +63,7 @@
             <button class="btn btn-primary input-group-btn">Search</button>
           </div>-->
         </div>
-        <div class="panel-body"><!-- apps go here --></div>
+        <div class="panel-body columns"><!-- apps go here --></div>
       </div>
     </div>
 
@@ -72,7 +72,7 @@
         <div class="panel-header" style="text-align:right">
           <button class="btn input-group-btn" id="myappsrefresh">Refresh...</button>
         </div>
-        <div class="panel-body"><!-- apps go here --></div>
+        <div class="panel-body columns"><!-- apps go here --></div>
       </div>
     </div>
 
diff --git a/index.js b/index.js
index 25519dfc9..d4c5ed37a 100644
--- a/index.js
+++ b/index.js
@@ -67,7 +67,7 @@ function showTab(tabname) {
 // =========================================== Library
 function refreshLibrary() {
   var panelbody = document.querySelector("#librarycontainer .panel-body");
-  panelbody.innerHTML = appJSON.map((app,idx) => `<div class="tile">
+  panelbody.innerHTML = appJSON.map((app,idx) => `<div class="tile column col-6 col-sm-12 col-xs-12">
     <div class="tile-icon">
       <figure class="avatar"><img src="apps/${app.icon?app.icon:"apps/unknown.png"}" alt="${escapeHtml(app.name)}"></figure>
     </div>
@@ -79,7 +79,7 @@ function refreshLibrary() {
       <button class="btn btn-link btn-action btn-lg"><i class="icon ${appsInstalled.includes(app.id)?"icon-delete":"icon-upload"}" appid="${app.id}"></i></button>
     </div>
   </div>
-  `);
+  `).join("");
   // set badge up top
   var tab = document.querySelector("#tab-librarycontainer a");
   tab.classList.add("badge");
@@ -151,14 +151,14 @@ function showLoadingIndicator() {
   tab.classList.add("badge");
   tab.setAttribute("data-badge", "");
   // Loading indicator
-  panelbody.innerHTML = '<div class="tile"><div class="tile-content" style="min-height:48px;"><div class="loading loading-lg"></div></div></div>';
+  panelbody.innerHTML = '<div class="tile column col-12"><div class="tile-content" style="min-height:48px;"><div class="loading loading-lg"></div></div></div>';
 }
 
 function refreshMyApps() {
   var panelbody = document.querySelector("#myappscontainer .panel-body");
   var tab = document.querySelector("#tab-myappscontainer a");
   tab.setAttribute("data-badge", appsInstalled.length);
-  panelbody.innerHTML = appsInstalled.map(appNameToApp).sort(appSorter).map(app => `<div class="tile">
+  panelbody.innerHTML = appsInstalled.map(appNameToApp).sort(appSorter).map(app => `<div class="tile column col-6 col-sm-12 col-xs-12">
     <div class="tile-icon">
       <figure class="avatar"><img src="apps/${app.icon}" alt="${escapeHtml(app.name)}"></figure>
     </div>
@@ -170,7 +170,7 @@ function refreshMyApps() {
       <button class="btn btn-link btn-action btn-lg"><i class="icon icon-delete" appid="${app.id}"></i></button>
     </div>
   </div>
-  `);
+  `).join("");
   htmlToArray(panelbody.getElementsByTagName("button")).forEach(button => {
     button.addEventListener("click",event => {
       var icon = event.target;