List filenames vertically first
This commit is contained in:
parent
f9b151ccfd
commit
9ae96833a7
2 changed files with 38 additions and 5 deletions
|
@ -10,12 +10,31 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
min-width: 18ch
|
min-width: 18ch
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.categoryList[blurred]{
|
||||||
|
background-color: rgb(20,20,30);
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-inline-end: -13ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#secondaryCategories{
|
||||||
|
position: relative;
|
||||||
|
z-index:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.categoryList:hover{
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
background-color: rgb(60,60,70);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
a{ color: rgb(100,150,200); margin-inline-start: 1ch }
|
a{ color: rgb(100,150,200); margin-inline-start: 1ch }
|
||||||
a:visited{ color: rgb(150,100,200) }
|
a:visited{ color: rgb(150,100,200) }
|
||||||
a:hover{ color: rgb(200,150,100) }
|
a:hover{ color: rgb(200,150,100) }
|
||||||
pre:empty{ display: none }
|
pre:empty{ display: none }
|
||||||
.category{ padding: 0.2em 1em; cursor: pointer; text-transform: capitalize }
|
.category{ padding: 0.2em 1em; cursor: pointer; text-transform: capitalize }
|
||||||
#categories > .category::after{ content: " (" attr(data-value) ")"}
|
#categories > .category[data-value]::after{ content: " (" attr(data-value) ")"}
|
||||||
|
|
||||||
.currentCategory,
|
.currentCategory,
|
||||||
.category:hover{ background-color: grey }
|
.category:hover{ background-color: grey }
|
||||||
|
@ -40,7 +59,13 @@ pre:empty{ display: none }
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
.target:hover{ background-color: rgb(80,80,90) }
|
.target:hover{ background-color: rgb(80,80,90) }
|
||||||
#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }
|
/*#targets{ display: grid; grid-template-columns: 1fr 1fr 1fr }*/
|
||||||
|
#targets{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-height: calc(var(--grid-rows) * 2.4rem);
|
||||||
|
}
|
||||||
|
|
||||||
pre{
|
pre{
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
@ -50,6 +75,7 @@ pre{
|
||||||
background-color: rgb(40,50,50)
|
background-color: rgb(40,50,50)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.categoryList:not([blurred])+.categoryList,
|
||||||
.hidden{ display: none !important }
|
.hidden{ display: none !important }
|
||||||
|
|
||||||
.target{ display: flex; justify-content: space-between }
|
.target{ display: flex; justify-content: space-between }
|
|
@ -62,6 +62,9 @@ let currentCategory = new (function(){
|
||||||
currentPrimaryNode && currentPrimaryNode.classList.remove("currentCategory");
|
currentPrimaryNode && currentPrimaryNode.classList.remove("currentCategory");
|
||||||
currentPrimaryNode = t;
|
currentPrimaryNode = t;
|
||||||
currentPrimaryNode.classList.add("currentCategory");
|
currentPrimaryNode.classList.add("currentCategory");
|
||||||
|
|
||||||
|
currentSecondaryNode && currentSecondaryNode.classList.remove("currentCategory");
|
||||||
|
currentSecondaryNode = null;
|
||||||
}
|
}
|
||||||
if(!secondary){
|
if(!secondary){
|
||||||
currentTopLevelFileNames = DB.query(t.textContent);
|
currentTopLevelFileNames = DB.query(t.textContent);
|
||||||
|
@ -113,19 +116,23 @@ async function onCategoryClicked(categoryNode,isSecondary = false){
|
||||||
|
|
||||||
if(fileNames.length > 9){
|
if(fileNames.length > 9){
|
||||||
let matchingSecondaries = getSecondaryCategories(fileNames);
|
let matchingSecondaries = getSecondaryCategories(fileNames);
|
||||||
for(let child of Array.from(secondaryCategories.children)){
|
for(let child of Array.from(secondaryCategoriesNode.children)){
|
||||||
matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden")
|
matchingSecondaries.includes(child.textContent) ? child.classList.remove("hidden") : child.classList.add("hidden")
|
||||||
}
|
}
|
||||||
|
|
||||||
secondaryCategoriesNode.classList.remove("hidden");
|
//secondaryCategoriesNode.classList.remove("hidden");
|
||||||
|
document.getElementById("categories").classList.add("blurred");
|
||||||
}else{
|
}else{
|
||||||
secondaryCategoriesNode.classList.add("hidden");
|
//secondaryCategoriesNode.classList.add("hidden");
|
||||||
|
document.getElementById("categories").classList.remove("blurred");
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
for(let c of Array.from(document.querySelectorAll(".target"))){
|
for(let c of Array.from(document.querySelectorAll(".target"))){
|
||||||
fileNames.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
|
fileNames.includes(getText(c)) ? c.classList.remove("hidden") : c.classList.add("hidden");
|
||||||
}
|
}
|
||||||
|
document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onTargetClicked(targetNode){
|
async function onTargetClicked(targetNode){
|
||||||
|
|
Loading…
Reference in a new issue