marquee on large file names; beta feature

toast
Kit Kasune 3 years ago
parent 1194d633e5
commit 2d6668a5b4
  1. 6
      .idea/vcs.xml
  2. 8
      scripts/fileview/load/render.js
  3. 22
      styles/files.css

@ -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>

@ -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;

@ -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%;
}
Loading…
Cancel
Save