fliegerjohn/mobile-config-firefox
1
0
Fork 1
mirror of https://codeberg.org/claui/mobile-config-firefox.git synced 2024-11-13 21:00:16 +00:00
Code Issues Projects Releases Packages Wiki Activity

List filenames vertically first

Browse source
This commit is contained in:
MrOtherGuy 2020-07-19 13:51:44 +03:00
parent f9b151ccfd
commit 9ae96833a7
2 changed files with 38 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
html_resources/main.css
View file

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

13
html_resources/selector.js
View file

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