lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix grid view

Browse Source
This commit is contained in:
lelo 2025-03-20 20:58:03 +01:00
parent 6e2644485f
commit 8e3d5cb7c3
2 changed files with 33 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/app.css
View File

@ -78,8 +78,8 @@ li {
} }
/* mouse symbol for links */ /* mouse symbol for links */
li.directory-item, li.file-item, div.directory-item, li.directory-item, li.file-item,
li.directory-item a, li.file-item a { div.directory-item a, li.directory-item a, li.file-item a {
cursor: pointer; cursor: pointer;
} }

39
static/app.js
View File

@ -27,19 +27,29 @@ function renderContent(data) {
}); });
document.getElementById('breadcrumbs').innerHTML = breadcrumbHTML; document.getElementById('breadcrumbs').innerHTML = breadcrumbHTML;
// Build the HTML for directories and files.
// Render directories.
let contentHTML = ''; let contentHTML = '';
if (data.directories.length > 0) { if (data.directories.length > 0) {
contentHTML += '<ul>'; contentHTML += '<ul>';
data.directories.forEach(dir => { // Check if every directory name is short (≤15 characters)
contentHTML += ` const areAllShort = data.directories.every(dir => dir.name.length <= 15);
<li class="directory-item"> if (areAllShort) {
📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a> contentHTML += '<div class="directories-grid">';
</li>`; data.directories.forEach(dir => {
}); contentHTML += `<div class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></div>`;
contentHTML += '</ul>'; });
contentHTML += '</div>';
} else {
contentHTML += '<ul>';
data.directories.forEach(dir => {
contentHTML += `<li class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></li>`;
});
contentHTML += '</ul>';
}
} }
// Render files.
if (data.files.length > 0) { if (data.files.length > 0) {
contentHTML += '<ul>'; contentHTML += '<ul>';
data.files.forEach((file, idx) => { data.files.forEach((file, idx) => {
@ -64,6 +74,19 @@ function renderContent(data) {
// Insert the generated HTML into a container in the DOM. // Insert the generated HTML into a container in the DOM.
document.getElementById('content').innerHTML = contentHTML; document.getElementById('content').innerHTML = contentHTML;
// Now attach the event listeners for directories.
document.querySelectorAll('div.directory-item').forEach(li => {
li.addEventListener('click', function(e) {
// Only trigger if the click did not start on an <a>.
if (!e.target.closest('a')) {
const anchor = li.querySelector('a.directory-link');
if (anchor) {
anchor.click();
}
}
});
});
// Now attach the event listeners for directories. // Now attach the event listeners for directories.
document.querySelectorAll('li.directory-item').forEach(li => { document.querySelectorAll('li.directory-item').forEach(li => {
li.addEventListener('click', function(e) { li.addEventListener('click', function(e) {