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');

5
simulated-usb-butter/johns_folder/index.html
View file

@ -24,8 +24,9 @@ layout: empty
<tr class="d"><td class="n"><a href="../">..</a>/</td><td class="m">&nbsp;</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr class="d"><td class="n"><a href="johns_subfolder1/">johns_subfolder1</a>/</td><td class="m">2024-Apr-30 17:11:52</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr class="d"><td class="n"><a href="johns_subfolder2/">johns_subfolder2</a>/</td><td class="m">2024-Apr-30 17:11:54</td><td class="s">- &nbsp;</td><td class="t">Directory</td></tr>
<tr><td class="n"><a href="lub.zip">lub.zip</a></td><td class="m">2024-May-01 15:38:22</td><td class="s">30.3M</td><td class="t">application/zip</td></tr>
<tr><td class="n"><a href="test.txt">test.txt</a></td><td class="m">2024-Mar-07 14:55:59</td><td class="s">0.0K</td><td class="t">text/plain;charset=utf-8</td></tr>
<tr><td class="n"><a href="lub.pdf">lub.pdf</a></td><td class="m">2024-May-01 15:38:22</td><td class="s">30.3M</td><td class="t">application/zip</td></tr>
<tr><td class="n"><a href="test.apk">test.apk</a></td><td class="m">2024-Mar-07 14:55:59</td><td class="s">0.0K</td><td class="t">text/plain;charset=utf-8</td></tr>
<tr><td class="n"><a href="foo.img">foo.img</a></td><td class="m">2024-Mar-07 14:55:59</td><td class="s">0.0K</td><td class="t">text/plain;charset=utf-8</td></tr>
</tbody>
</table>
</div>