butter/butter-kanglam-ui
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix icons, add second header

Browse source
This commit is contained in:
John Hess 2024-06-05 14:58:48 -05:00
parent d56a303896
commit 28d91b68db
3 changed files with 35 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
assets/css/butter-dir-listing.css
View file

@ -43,6 +43,24 @@ div.foot {
font-size: 14px;
}
.folder-name {
display: flex;
align-items: center;
height: 34px;
margin: 10px;
a {
display: flex;
align-items: center;
}
img.back {
width: 18px;
height: 18px;
rotate: 180deg;
margin-right: 10px;
}
}
h2 {
font-size: 18px;
font-weight: 500;

18
assets/js/butter-dir-listing.js
View file

@ -8,7 +8,7 @@
console.log("butter-dir-listing.js loaded!");
const supported_extensions = [".apk"];
const supported_extensions = ["apk", "deb", "img", "pdf"];
const usbRoot = "usb-butter/";
const inferredBaseURL = window.location.pathname.split("/" + usbRoot)[0] + "/";
console.log("Inferred Base URL:", inferredBaseURL);
@ -30,8 +30,9 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
const getFileDivHTML = (file_name, size, date, href) => {
icon = "ext-unknown.svg";
extension = file_name.split('.').pop();
console.log("Extension:", extension);
if (supported_extensions.includes(extension)) {
icon = "ext" + extension + ".svg";
icon = "ext-" + extension + ".svg";
}
return `
<a class="container" href="${href}">
@ -113,11 +114,13 @@ window.onload = function () {
<a href="${inferredBaseURL}"><img class="home-icon" src="${inferredBaseURL}assets/images/home.svg" alt="home"></a>
<a href="${inferredBaseURL}${usbRoot}" class="crumb"><img class="path-next" src="${inferredBaseURL}assets/images/next.svg">Explore</a>
`;
pathSteps = path.split('/');
const pathSteps = path.split('/');
let thisDirsName = "Explore";
let pathToHere = usbRoot;
pathSteps.forEach((step, index) => {
pathToHere += step + '/';
if (step !== "") {
pathToHere += step + '/';
thisDirsName = step;
breadcrumbHTML += `
<a href="${inferredBaseURL}${pathToHere}" class="crumb"><img class="path-next" src="${inferredBaseURL}assets/images/next.svg">${step}</a>`;
}
@ -130,6 +133,13 @@ window.onload = function () {
fullWithHR.classList.add('full-width');
listDiv.parentNode.insertBefore(fullWithHR, listDiv);
// Secondary header
const secondaryHeader = document.createElement('div');
secondaryHeader.classList.add('folder-name');
secondaryHeader.innerHTML = `<a href="../"><img class="back" src="${inferredBaseURL}assets/images/next.svg"></a>`;
secondaryHeader.innerHTML += `${thisDirsName}`;
listDiv.parentNode.insertBefore(secondaryHeader, listDiv);
// Create a folder listing
const folderListing = document.createElement("div");
folderListing.classList.add('folder-list');