Fix file list item styling

- File list item text wraps inline with the text instead of to the PDF icon - Reduced padding between files
Friends-of-Foxley-Kenley-England · Nov 30, 2024 · eba1a86 · eba1a86
1 parent 7f4499a
commit eba1a86
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/src/pages/resources.js b/src/pages/resources.js
@@ -18,22 +18,24 @@ const ResourcesIndex = ({ data, location }) => {
 
       <p>{resourcesPageData?.subTitle}</p>
 
-      {/* https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon */}
-      {/* <FontAwesomeIcon icon="fa-regular fa-file" /> */}
-      {/* <FontAwesomeIcon icon="fa-solid fa-file-image" /> */}
-      {/* <FontAwesomeIcon icon="fa-regular fa-file-lines" /> */}
-      {/* <FontAwesomeIcon icon="fa-solid fa-file-pdf" /> */}
-      <ul className={style.pdfFileListItem}>
-        {resourcesPageData?.resourceFiles?.map(resourceFile => {
-          return (
-            <li className={style.linkText}>
-              <a href={resourceFile.url} className={style.linkText}>
-                {resourceFile.title}
-              </a>
-            </li>
-          );
-        })}
-      </ul>
+      <div className={style.fileListContainer}>
+        {/* https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon */}
+        {/* <FontAwesomeIcon icon="fa-regular fa-file" /> */}
+        {/* <FontAwesomeIcon icon="fa-solid fa-file-image" /> */}
+        {/* <FontAwesomeIcon icon="fa-regular fa-file-lines" /> */}
+        {/* <FontAwesomeIcon icon="fa-solid fa-file-pdf" /> */}
+        <ul className={style.pdfFileListItem}>
+          {resourcesPageData?.resourceFiles?.map(resourceFile => {
+            return (
+              <li className={style.linkText}>
+                <a href={resourceFile.url} className={style.linkText}>
+                  {resourceFile.title}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
     </Layout>
   );
 };

diff --git a/src/pages/resources.module.css b/src/pages/resources.module.css
@@ -1,16 +1,18 @@
+.file-list-container {
+  padding-left: var(--spacing-6);
+}
+
 .pdf-file-list-item {
-  margin-left: var(--spacing-0);
   list-style-image: url("../images/PDF_32.png");
+  list-style-position: outside;
 }
 
 .pdf-file-list-item li {
-  margin-left: var(--spacing-0);
-  padding-left: var(--spacing-0);
+  margin-bottom: 0%;
 }
 
 .link-text {
   vertical-align: middle;
-  padding-bottom: var(--fontSize-4);
   top: -15px;
   position: relative;
 }
@@ -20,13 +22,13 @@
     top: unset;
     position: unset;
     vertical-align: middle;
-    padding-bottom: var(--fontSize-4);
+    padding-bottom: var(--fontSize-3);
   }
 }
 
 @media screen and (min-width: 600px) {
-  .pdf-file-list-item {
-    margin-left: var(--spacing-4);
+  .file-list-container {
+    padding-left: var(--spacing-8);
   }
 
   .pdf-file-list-item li {