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

maps page

Browse source
This commit is contained in:
John Hess 2024-06-07 14:38:54 -05:00
parent 7b91e1aed0
commit f602b282d5
13 changed files with 651 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -77,7 +77,7 @@ hr.full-width {
margin: 0;
}
.container {
.filerow {
display: flex;
align-items: center;
width: 100%;
@ -87,7 +87,7 @@ hr.full-width {
font-family: "Poppins", sans-serif;
}
.logo-container {
.logo-filerow {
display: flex;
align-items: center;
justify-content: center;
@ -95,12 +95,12 @@ hr.full-width {
height: 32px;
}
.logo-container img {
.logo-filerow img {
width: 32px;
height: 32px;
}
.text-container {
.text-filerow {
display: flex;
flex-direction: column;
justify-content: center;
@ -109,14 +109,14 @@ hr.full-width {
box-sizing: border-box;
}
.text-container .upper-text {
.text-filerow .upper-text {
font-size: 14px;
line-height: 18px;
padding: 2px;
color: black;
}
.text-container .lower-text {
.text-filerow .lower-text {
font-size: 12px;
padding: 2px;
color: gray;

6
assets/images/download-icon.svg Normal file
View file

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 9L12 14M12 14L17 9M12 14L12 5" stroke="black" stroke-width="2"
stroke-linecap="round" />
<path d="M5 16L5 17C5 18.1046 5.89543 19 7 19L17 19C18.1046 19 19 18.1046 19 17V16"
stroke="black" stroke-width="2" stroke-linecap="round" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 369 B

15
assets/images/ext-pbf.svg Normal file
View file

@ -0,0 +1,15 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1788_1370)">
<rect width="32" height="32" rx="16" fill="#90EE90" />
<rect width="32" height="32" rx="16" fill="black" fill-opacity="0.2" />
<path
d="M24.5376 7.04002C23.8754 6.63815 23.0544 6.60074 22.3584 6.94085L18.3104 8.9792L14.8704 7.0144C14.2186 6.64971 13.4292 6.62816 12.7584 6.95679L7.63845 9.51679C7.26637 9.70284 6.95344 9.98877 6.73469 10.3425C6.51594 10.6964 6.4001 11.1041 6.4 11.52V23.04C6.39489 23.8216 6.7976 24.5492 7.4624 24.96C8.12458 25.3619 8.94562 25.3993 9.64157 25.0592L13.6896 23.0368L17.1296 25.0016C17.7815 25.3657 18.5707 25.3873 19.2415 25.0592L24.3615 22.4992C24.7361 22.312 25.0506 22.0236 25.2696 21.6667C25.4884 21.3098 25.6029 20.8987 25.6 20.48V8.96002C25.6051 8.17845 25.2024 7.45085 24.5376 7.04002ZM12.16 21.6384L8.784 23.3248C8.73941 23.3476 8.69014 23.3597 8.64004 23.36C8.57983 23.3615 8.52014 23.3472 8.46723 23.3184C8.37275 23.2578 8.31691 23.1522 8.32004 23.04V11.52C8.32046 11.3995 8.38848 11.2894 8.49608 11.2352L12.1601 9.40153L12.16 21.6384ZM17.92 23.2384L14.6432 21.3536C14.4677 21.254 14.2777 21.1828 14.08 21.1424V8.77437L17.3568 10.6463C17.5325 10.7448 17.7225 10.815 17.92 10.8544V23.2384ZM23.68 20.48C23.6796 20.6005 23.6116 20.7106 23.504 20.7648L19.84 22.5985V10.3617L23.216 8.6721C23.2607 8.65043 23.3101 8.63939 23.3599 8.64012C23.4201 8.63856 23.4798 8.65293 23.5327 8.68168C23.6272 8.74231 23.683 8.84793 23.6799 8.96011L23.68 20.48Z"
fill="white" />
</g>
<defs>
<clipPath id="clip0_1788_1370">
<rect width="32" height="32" rx="16" fill="white" />
</clipPath>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
assets/images/maps-header.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 856 KiB

BIN
assets/images/osm-tile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 14 KiB

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

@ -15,11 +15,11 @@ console.log("Inferred Base URL:", inferredBaseURL);
const getFolderDivHTML = (directory_name, number_of_items, href) => {
return `
<a class="container" href="${href}">
<div class="logo-container">
<a class="filerow" href="${href}">
<div class="logo-filerow">
<img src="${inferredBaseURL}assets/images/directory.svg" alt="directory">
</div>
<div class="text-container">
<div class="text-filerow">
<div class="upper-text">${directory_name}</div>
<div class="lower-text">${number_of_items} items</div>
</div>
@ -35,11 +35,11 @@ const getFileDivHTML = (file_name, size, date, href) => {
icon = "ext-" + extension + ".svg";
}
return `
<a class="container" href="${href}">
<div class="logo-container">
<a class="filerow" href="${href}">
<div class="logo-filerow">
<img src="${inferredBaseURL}assets/images/${icon}" alt="directory">
</div>
<div class="text-container">
<div class="text-filerow">
<div class="upper-text">${file_name}</div>
<div class="lower-text">${size} | ${date}</div>
</div>