From 2d6668a5b4f5d74fcef65fb6ec3f9c0d0bdf0848 Mon Sep 17 00:00:00 2001
From: WubzyGD <wubzygd@gmail.com>
Date: Wed, 1 Dec 2021 08:45:29 -0700
Subject: [PATCH] marquee on large file names; beta feature

---
 .idea/vcs.xml                   |  6 ++++++
 scripts/fileview/load/render.js |  8 +++++++-
 styles/files.css                | 22 ++++++++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 .idea/vcs.xml

diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..9661ac7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/scripts/fileview/load/render.js b/scripts/fileview/load/render.js
index 273ca66..11c2f82 100644
--- a/scripts/fileview/load/render.js
+++ b/scripts/fileview/load/render.js
@@ -31,8 +31,14 @@ module.exports = (dir) => {
         cfc.appendChild(im);
         let cf = document.createElement('b');
         cf.className = 'file-name';
+        if (file.name.length > 20) {
+            cf.classList.add('large-file-name');
+            let lfnc = document.createElement('div');
+            lfnc.className = 'large-file-name-container';
+            cfc.appendChild(lfnc);
+            lfnc.appendChild(cf);
+        } else {cfc.appendChild(cf);}
         cf.innerHTML = file.name;
-        cfc.appendChild(cf);
         let isd = document.createElement('p');
         isd.className = 'file-type';
         isd.innerHTML = file.type;
diff --git a/styles/files.css b/styles/files.css
index b35a423..65df592 100644
--- a/styles/files.css
+++ b/styles/files.css
@@ -71,4 +71,26 @@
     background: linear-gradient(to right, #5d60ca78 20%, #17171778 35%, #17171778 35%, #5d60ca99 50%, #5d60ca99 50%, #af218878 75%, #5d60ca78 90%);
     background-size: 200% auto;
     animation: shine 10s linear infinite;
+}
+
+@keyframes scroll-text {
+    from {transform: translateX(100%);}
+    to {transform: translateX(-100%);}
+}
+
+.large-file-name {
+    position: absolute;
+    animation: scroll-text 10s linear infinite;
+    width: max-content;
+    height: max-content;
+    margin: 0 0;
+}
+
+.large-file-name-container {
+    overflow: hidden;
+    position: relative;
+    margin: 0 0;
+    padding: 0 0;
+    width: 27%;
+    height: 100%;
 }
\ No newline at end of file