From 2d6668a5b4f5d74fcef65fb6ec3f9c0d0bdf0848 Mon Sep 17 00:00:00 2001 From: WubzyGD 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 @@ + + + + + + \ 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