From 53692a1ea8009bd84fcb233983acc1192c159fd7 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Tue, 21 Mar 2023 16:54:06 +0000
Subject: [PATCH] Trying to make the apps like work better on a phone.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4241 ed5197a5-7fde-0310-b194-c3ffbd925b24
---
 apps/apps/app.js | 47 +++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 41 insertions(+), 6 deletions(-)
diff --git a/apps/apps/app.js b/apps/apps/app.js
index a9cf806f..787b010e 100644
--- a/apps/apps/app.js
+++ b/apps/apps/app.js
@@ -3,22 +3,57 @@ async function main() {
 	var core_apps = await core.apps('core');
 	var doc = `<!DOCTYPE html>
 <html>
+<head>
+	<style>
+		.container {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, 8em);
+			justify-content: space-around;
+		}
+		.app {
+			height: 8em;
+			width: 8em;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			white-space: nowrap;
+		}
+		.app > a {
+			text-decoration: none;
+			max-width: 8em;
+			text-overflow: ellipsis ellipsis;
+			overflow: hidden;
+		}
+	</style>
+</head>
 <body style="background: #888">
 <h1>Apps</h1>
-<ul id="apps"></ul>
+<div id="apps" class="container"></div>
 <h1>Core Apps</h1>
-<ul id="core_apps"></ul>
+<div id="core_apps" class="container"></div>
 </body>
 <script>
 	function populate_apps(id, name, apps) {
 		var list = document.getElementById(id);
 		for (let app of Object.keys(apps).sort()) {
-			var li = list.appendChild(document.createElement('li'));
-			var a = document.createElement('a');
-			a.innerText = app;
+			let div = list.appendChild(document.createElement('div'));
+			div.classList.add('app');
+
+			let icon_a = document.createElement('a');
+			let icon = document.createElement('div');
+			icon.appendChild(document.createTextNode('📦'));
+			icon.style.fontSize = 'xxx-large';
+			icon_a.appendChild(icon);
+			icon_a.href = '/~' + name + '/' + app + '/';
+			icon_a.target = '_top';
+			div.appendChild(icon_a);
+
+			let a = document.createElement('a');
+			a.appendChild(document.createTextNode(app));
 			a.href = '/~' + name + '/' + app + '/';
 			a.target = '_top';
-			li.appendChild(a);
+			div.appendChild(a);
 		}
 	}
 	populate_apps('apps', '${core.user.credentials?.session?.name}', ${JSON.stringify(apps)});
