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

bigger touch targets

Browse source
This commit is contained in:
John Hess 2024-06-12 21:50:55 -05:00
parent c7646d99ce
commit 48f3d1d6ae
8 changed files with 14 additions and 1262 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -27,8 +27,13 @@ div.foot {
.breadcrumbs {
display: flex;
align-items: center;
margin: 10px;
height: 34px;
height: 54px;
a {
height: -webkit-fill-available;
}
.home-icon {
padding-left: 12px;
}
.path-next {
margin: 0 5px;
height: 12px;
@ -46,12 +51,12 @@ div.foot {
.breadcrumb-name {
display: flex;
align-items: center;
height: 34px;
margin: 10px;
height: 48px;
a {
display: flex;
align-items: center;
height: -webkit-fill-available;
padding: 0 10px;
}
img.back {
width: 18px;
@ -81,8 +86,8 @@ hr.full-width {
display: flex;
align-items: center;
width: 100%;
height: 44px;
margin: 10px;
height: 54px;
margin: 0 10px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}

2
assets/images/home.svg
View file

@ -1,4 +1,4 @@
<svg width="22" height="20" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.6923 18.5H17.7692C18.4492 18.5 19 17.9886 19 17.3571V8.48489C19 8.14203 18.8346 7.81775 18.5485 7.6006L12.3446 2.88714C12.0146 2.63714 11.6015 2.5 11.1762 2.5H10.8246C10.3985 2.5 9.98539 2.63714 9.6554 2.88714L3.45154 7.6006C3.16538 7.81775 3 8.14203 3 8.48489V17.3571C3 17.9886 3.55076 18.5 4.23076 18.5H7.30766C7.64766 18.5 7.92304 18.2443 7.92304 17.9286V12.7857C7.92304 12.1543 8.4738 11.6428 9.1538 11.6428H12.8461C13.5261 11.6428 14.0768 12.1543 14.0768 12.7857V17.9286C14.0768 18.2443 14.3523 18.5 14.6923 18.5Z" fill="black"/>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 659 B

After

Width:  |  Height:  |  Size: 659 B

Before After
Before After

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

@ -121,7 +121,7 @@ window.onload = function () {
const breadcrumbs = document.createElement("div");
breadcrumbs.classList.add('breadcrumbs');
let breadcrumbHTML = `
<a href="${inferredBaseURL}"><img class="home-icon" src="${inferredBaseURL}assets/images/home.svg" alt="home"></a>
<a href="${inferredBaseURL}" class="crumb"><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>
`;
const pathSteps = path.split('/');