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
This commit is contained in:
Cory McWilliams 2023-03-21 16:54:06 +00:00
parent ebef51b4ea
commit 53692a1ea8

View File

@ -3,22 +3,57 @@ async function main() {
var core_apps = await core.apps('core'); var core_apps = await core.apps('core');
var doc = `<!DOCTYPE html> var doc = `<!DOCTYPE html>
<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"> <body style="background: #888">
<h1>Apps</h1> <h1>Apps</h1>
<ul id="apps"></ul> <div id="apps" class="container"></div>
<h1>Core Apps</h1> <h1>Core Apps</h1>
<ul id="core_apps"></ul> <div id="core_apps" class="container"></div>
</body> </body>
<script> <script>
function populate_apps(id, name, apps) { function populate_apps(id, name, apps) {
var list = document.getElementById(id); var list = document.getElementById(id);
for (let app of Object.keys(apps).sort()) { for (let app of Object.keys(apps).sort()) {
var li = list.appendChild(document.createElement('li')); let div = list.appendChild(document.createElement('div'));
var a = document.createElement('a'); div.classList.add('app');
a.innerText = 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.href = '/~' + name + '/' + app + '/';
a.target = '_top'; a.target = '_top';
li.appendChild(a); div.appendChild(a);
} }
} }
populate_apps('apps', '${core.user.credentials?.session?.name}', ${JSON.stringify(apps)}); populate_apps('apps', '${core.user.credentials?.session?.name}', ${JSON.stringify(apps)});