From e309f24e9c99518af78432b5b0d6b51e54d03565 Mon Sep 17 00:00:00 2001
From: John Hess <john@jthess.com>
Date: Thu, 20 Jun 2024 14:04:51 -0500
Subject: [PATCH] design touchups, download button as-designed

---
 _includes/filerow.html            | 20 +++++++++++---------
 _scss/pages/home.scss             | 16 +++++++---------
 assets/css/butter-dir-listing.css | 17 +++++++++--------
 assets/images/next.svg            |  6 +++---
 assets/js/butter-dir-listing.js   | 21 +++++++++++++--------
 5 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/_includes/filerow.html b/_includes/filerow.html
index b6ece49..5a7e6d7 100644
--- a/_includes/filerow.html
+++ b/_includes/filerow.html
@@ -1,12 +1,14 @@
-<a class="filerow" href="{{ include.href }}">
-    <div class="logo-filerow">
+<div class="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">
-    </div>
-    <div class="text-filerow">
+    </a>
+    <a href="{{ include.href }}"  download="{{ include.file_name }}" class="text-filerow">
         <div class="upper-text">{{ include.display_name }}</div>
         <div class="lower-text">{{ include.file_name }}</div>
-    </div>
-    <div class="empty-block">
-        <img src="{{ site.baseurl}}/assets/images/download-icon.svg" alt="download">
-    </div>
-</a>
\ No newline at end of file
+    </a>
+    <a href="{{ include.href }}" download="{{ include.file_name }}">
+        <div class="empty-block">
+            <img src="{{ site.baseurl}}/assets/images/download-icon.svg" alt="download">
+        </div>
+    </a>
+</div>
\ No newline at end of file
diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss
index 8c5b34f..b785a73 100644
--- a/_scss/pages/home.scss
+++ b/_scss/pages/home.scss
@@ -231,17 +231,18 @@ a:active {
 .breadcrumb-name {
   display: flex;
   align-items: center;
-  height: 34px;
-  margin: 10px;
+  height: 48px;
+  font-size: 18px;
   a {
       display: flex;
       align-items: center;
-  
+      height: -webkit-fill-available;
+      padding: 0 10px;
   }
   img.back {
       width: 18px;
       height: 18px;
-      rotate: 180deg;
+      margin-left: 10px;
       margin-right: 10px;
   }
 }
@@ -278,7 +279,7 @@ a:active {
 }
 
 .text-filerow .upper-text {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 18px;
   padding: 2px;
   color: black;
@@ -290,10 +291,7 @@ a:active {
   color: gray;
 }
 
-.empty-block {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.dl-block {
   width: 30px;
   height: 30px;
 }
diff --git a/assets/css/butter-dir-listing.css b/assets/css/butter-dir-listing.css
index 82d1021..0cc4c09 100644
--- a/assets/css/butter-dir-listing.css
+++ b/assets/css/butter-dir-listing.css
@@ -35,8 +35,9 @@ div.foot {
         padding-left: 12px;
     }
     .path-next {
-        margin: 0 5px;
+        margin: 0 10px 2px 10px;
         height: 12px;
+        rotate: 180deg;
     }
 }
 
@@ -45,13 +46,14 @@ div.foot {
     color: black;
     display: flex;
     font-family: "Poppins", sans-serif;
-    font-size: 14px;
+    font-size: 16px;
 }
 
 .breadcrumb-name {
     display: flex;
     align-items: center;
     height: 48px;
+    font-size: 18px;
     a {
         display: flex;
         align-items: center;
@@ -61,7 +63,7 @@ div.foot {
     img.back {
         width: 18px;
         height: 18px;
-        rotate: 180deg;
+        margin-left: 10px;
         margin-right: 10px;
     }
 }
@@ -85,9 +87,8 @@ hr.full-width {
 .filerow {
     display: flex;
     align-items: center;
-    width: 100%;
-    height: 54px;
-    margin: 0 10px;
+    height: 44px;
+    margin: 10px;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
 }
@@ -115,7 +116,7 @@ hr.full-width {
 }
 
 .text-filerow .upper-text {
-    font-size: 14px;
+    font-size: 16px;
     line-height: 18px;
     padding: 2px;
     color: black;
@@ -127,7 +128,7 @@ hr.full-width {
     color: gray;
 }
 
-.empty-block {
+.dl-block {
     width: 30px;
     height: 30px;
 }
\ No newline at end of file
diff --git a/assets/images/next.svg b/assets/images/next.svg
index c04632d..5bfd8f7 100644
--- a/assets/images/next.svg
+++ b/assets/images/next.svg
@@ -1,4 +1,4 @@
-<svg width="7" height="10" viewBox="0 0 7 10" 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"/>
-</svg>
+<svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <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>
     
\ No newline at end of file
diff --git a/assets/js/butter-dir-listing.js b/assets/js/butter-dir-listing.js
index 95e2932..37361d3 100644
--- a/assets/js/butter-dir-listing.js
+++ b/assets/js/butter-dir-listing.js
@@ -21,7 +21,7 @@ const getFolderDivHTML = (directory_name, number_of_items, href) => {
             <div class="upper-text">${directory_name}</div>
             <div class="lower-text"><span id="${href}">${number_of_items}</span> items</div>
         </div>
-        <div class="empty-block"></div>
+        <div class="dl-block"></div>
     </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"
     date = new Date(date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
     return `
-    <a class="filerow" href="${href}">
-        <div class="logo-filerow">
+    <div class="filerow">
+        <a href="${href}" class="logo-filerow">
             <img src="${inferredBaseURL}assets/images/${icon}" alt="directory">
-        </div>
-        <div class="text-filerow">
+        </a>
+        <a href="${href}" class="text-filerow">
             <div class="upper-text">${file_name}</div>
             <div class="lower-text">${size} | ${date}</div>
-        </div>
-        <div class="empty-block"></div>
-    </a>`;
+        </a>
+        <a href="${href}" download="${file_name}">
+            <div class="dl-block">
+                <img src="${inferredBaseURL}assets/images/download-icon.svg" alt="download">
+            </div>
+        </a>
+    </div>
+    `;
 };
 
 const getFolderItemCount = async (folder_href) => {