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

design touchups, download button as-designed

Browse source
This commit is contained in:
John Hess 2024-06-20 14:04:51 -05:00
parent 8a6bcba65b
commit e309f24e9c
5 changed files with 43 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

20
_includes/filerow.html
View file

@ -1,12 +1,14 @@
<a class="filerow" href="{{ include.href }}"> <div class="filerow">
<div class="logo-filerow"> <a href="{{ include.href }}" download="{{ include.file_name }}" class="logo-filerow">
<img src="{{ site.baseurl}}/assets/images/{{ include.icon_filename }}" alt="file extension icon"> <img src="{{ site.baseurl}}/assets/images/{{ include.icon_filename }}" alt="file extension icon">
</div> </a>
<div class="text-filerow"> <a href="{{ include.href }}" download="{{ include.file_name }}" class="text-filerow">
<div class="upper-text">{{ include.display_name }}</div> <div class="upper-text">{{ include.display_name }}</div>
<div class="lower-text">{{ include.file_name }}</div> <div class="lower-text">{{ include.file_name }}</div>
</div> </a>
<div class="empty-block"> <a href="{{ include.href }}" download="{{ include.file_name }}">
<img src="{{ site.baseurl}}/assets/images/download-icon.svg" alt="download"> <div class="empty-block">
</div> <img src="{{ site.baseurl}}/assets/images/download-icon.svg" alt="download">
</a> </div>
</a>
</div>

16
_scss/pages/home.scss
View file

@ -231,17 +231,18 @@ a:active {
.breadcrumb-name { .breadcrumb-name {
display: flex; display: flex;
align-items: center; align-items: center;
height: 34px; height: 48px;
margin: 10px; font-size: 18px;
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
height: -webkit-fill-available;
padding: 0 10px;
} }
img.back { img.back {
width: 18px; width: 18px;
height: 18px; height: 18px;
rotate: 180deg; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
} }
@ -278,7 +279,7 @@ a:active {
} }
.text-filerow .upper-text { .text-filerow .upper-text {
font-size: 14px; font-size: 16px;
line-height: 18px; line-height: 18px;
padding: 2px; padding: 2px;
color: black; color: black;
@ -290,10 +291,7 @@ a:active {
color: gray; color: gray;
} }
.empty-block { .dl-block {
display: flex;
justify-content: center;
align-items: center;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }

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

@ -35,8 +35,9 @@ div.foot {
padding-left: 12px; padding-left: 12px;
} }
.path-next { .path-next {
margin: 0 5px; margin: 0 10px 2px 10px;
height: 12px; height: 12px;
rotate: 180deg;
} }
} }
@ -45,13 +46,14 @@ div.foot {
color: black; color: black;
display: flex; display: flex;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
font-size: 14px; font-size: 16px;
} }
.breadcrumb-name { .breadcrumb-name {
display: flex; display: flex;
align-items: center; align-items: center;
height: 48px; height: 48px;
font-size: 18px;
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -61,7 +63,7 @@ div.foot {
img.back { img.back {
width: 18px; width: 18px;
height: 18px; height: 18px;
rotate: 180deg; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
} }
@ -85,9 +87,8 @@ hr.full-width {
.filerow { .filerow {
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; height: 44px;
height: 54px; margin: 10px;
margin: 0 10px;
box-sizing: border-box; box-sizing: border-box;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }
@ -115,7 +116,7 @@ hr.full-width {
} }
.text-filerow .upper-text { .text-filerow .upper-text {
font-size: 14px; font-size: 16px;
line-height: 18px; line-height: 18px;
padding: 2px; padding: 2px;
color: black; color: black;
@ -127,7 +128,7 @@ hr.full-width {
color: gray; color: gray;
} }
.empty-block { .dl-block {
width: 30px; width: 30px;
height: 30px; height: 30px;
} }

6
assets/images/next.svg
View file

@ -1,4 +1,4 @@
<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.316 2.17H1.926L5.314 5.376L1.926 8.596H0.316L3.704 5.376L0.316" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M7.70711 0.292893C8.09763 0.683417 8.09763 1.31658 7.70711 1.70711L2.41421 7L7.70711 12.2929C8.09763 12.6834 8.09763 13.3166 7.70711 13.7071C7.31658 14.0976 6.68342 14.0976 6.29289 13.7071L0.292894 7.70711C-0.0976305 7.31658 -0.0976305 6.68342 0.292894 6.29289L6.29289 0.292893C6.68342 -0.0976317 7.31658 -0.0976317 7.70711 0.292893Z" fill="black"/>
</svg> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 200 B

After

Width:  |  Height:  |  Size: 512 B

Before After
Before After

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

@ -21,7 +21,7 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
<div class="upper-text">${directory_name}</div> <div class="upper-text">${directory_name}</div>
<div class="lower-text"><span id="${href}">${number_of_items}</span> items</div> <div class="lower-text"><span id="${href}">${number_of_items}</span> items</div>
</div> </div>
<div class="empty-block"></div> <div class="dl-block"></div>
</a>`; </a>`;
}; };
@ -34,16 +34,21 @@ const getFileDivHTML = (file_name, size, date, href) => {
// turn date from "2021-09-01 12:34:56" to "Sep 1, 2021" // turn date from "2021-09-01 12:34:56" to "Sep 1, 2021"
date = new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); date = new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
return ` return `
<a class="filerow" href="${href}"> <div class="filerow">
<div class="logo-filerow"> <a href="${href}" class="logo-filerow">
<img src="${inferredBaseURL}assets/images/${icon}" alt="directory"> <img src="${inferredBaseURL}assets/images/${icon}" alt="directory">
</div> </a>
<div class="text-filerow"> <a href="${href}" class="text-filerow">
<div class="upper-text">${file_name}</div> <div class="upper-text">${file_name}</div>
<div class="lower-text">${size} | ${date}</div> <div class="lower-text">${size} | ${date}</div>
</div> </a>
<div class="empty-block"></div> <a href="${href}" download="${file_name}">
</a>`; <div class="dl-block">
<img src="${inferredBaseURL}assets/images/download-icon.svg" alt="download">
</div>
</a>
</div>
`;
}; };
const getFolderItemCount = async (folder_href) => { const getFolderItemCount = async (folder_href) => {