From 9ae96833a7d22f1cef80430b08ec4ac954454065 Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Sun, 19 Jul 2020 13:51:44 +0300
Subject: [PATCH] List filenames vertically first

---
 html_resources/main.css    | 30 ++++++++++++++++++++++++++++--
 html_resources/selector.js | 13 ++++++++++---
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/html_resources/main.css b/html_resources/main.css
index 92ce2c1..60fc9b3 100644
--- a/html_resources/main.css
+++ b/html_resources/main.css
@@ -10,12 +10,31 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
   overflow-y: auto;
   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:visited{ color: rgb(150,100,200) }
 a:hover{ color: rgb(200,150,100) }
 pre:empty{ display: none }
 .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,
 .category:hover{ background-color: grey }
@@ -40,7 +59,13 @@ pre:empty{ display: none }
   background-size: contain;
 }
 .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{
   white-space: pre-wrap;
@@ -50,6 +75,7 @@ pre{
   background-color: rgb(40,50,50)
 }
 
+.categoryList:not([blurred])+.categoryList,
 .hidden{ display: none !important }
 
 .target{ display: flex; justify-content: space-between }
\ No newline at end of file
diff --git a/html_resources/selector.js b/html_resources/selector.js
index 9e40f6a..c08cb93 100644
--- a/html_resources/selector.js
+++ b/html_resources/selector.js
@@ -62,6 +62,9 @@ let currentCategory = new (function(){
       currentPrimaryNode && currentPrimaryNode.classList.remove("currentCategory");
       currentPrimaryNode = t;
       currentPrimaryNode.classList.add("currentCategory");
+      
+      currentSecondaryNode && currentSecondaryNode.classList.remove("currentCategory");
+      currentSecondaryNode = null;
     }
     if(!secondary){
       currentTopLevelFileNames = DB.query(t.textContent);
@@ -113,19 +116,23 @@ async function onCategoryClicked(categoryNode,isSecondary = false){
     
     if(fileNames.length > 9){
       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")
       }
       
-      secondaryCategoriesNode.classList.remove("hidden");
+      //secondaryCategoriesNode.classList.remove("hidden");
+      document.getElementById("categories").classList.add("blurred");
     }else{
-      secondaryCategoriesNode.classList.add("hidden");
+      //secondaryCategoriesNode.classList.add("hidden");
+      document.getElementById("categories").classList.remove("blurred");
+      
     }
   }
   
   for(let c of Array.from(document.querySelectorAll(".target"))){
     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){