tag-browser: assorted improvements to tag browser

This patch patch makes the link generator handle "+" characters in the
filename.
Additionally, file-target list should now have more-correct grid-layout
without producing overflowing rows.
The category list is fixed-positioned sidebar which hopefully makes
mobile rendering work better than before.

html_resources/main.css

@@ -1,11 +1,15 @@
-body{background-color: rgb(60,50,70); color: silver; margin: 0px }
+:root{
-#ui{ display: flex; }
+  background-color: rgb(60,50,70);
+  color: silver;
+}
+body{
+  margin: 0px
+}
+
 #site{
-  height: 100vh;
+  margin-left: 22ch;
-  box-sizing: border-box;
+  display: flex;
-  overflow-y: auto;
+  flex-direction: column;
-  flex: 1;
-  border-top: 2.2em solid transparent;
 }
 
 .categoryList{
@@ -13,25 +17,27 @@ body{background-color: rgb(60,50,70); color: silver; margin: 0px }
   box-sizing: border-box;
   border-inline-end: 1px solid gold;
   background-color: rgb(60,60,70);
-  max-height: 100vh;
+  height: 100vh;
   overflow-y: auto;
-  min-width: 22ch
+  min-width: 22ch;
+  position: fixed;
+  z-index: 1;
 }
 
 .categoryList.blurred{
   background-color: rgb(20,20,30);
   opacity: 0.5;
-  margin-inline-end: -13ch;
 }
-
+.categoryList.blurred ~ #site{
+  margin-left: 31ch
+}
 #secondaryCategories{
-  position: relative;
+  z-index:2;
-  z-index:1;
+  left: 8ch;
 }
 
 .categoryList:hover{
-  position: relative;
+  z-index: 3;
-  z-index: 2;
   background-color: rgb(60,60,70);
   opacity: 1;
   box-shadow: 0 0 26px 0 black;
@@ -56,20 +62,21 @@ pre:empty{ display: none }
   padding: 0.3em;
   border: 1px solid rgb(40,40,40);
   border-radius: 4px;
-  max-width: 30%;
+  max-width: calc(100% / var(--grid-columns,1) - 20px);
   cursor: pointer;
   white-space:nowrap;
   display: flex;
 }
 .target > a{
-  display:inline-block;
+  display: inline-block;
-  width: 1.2em;
+  width: 1em;
-  height: 1.2em;
+  height: 1em;
   background-image: url("ext.svg");
   background-repeat: no-repeat;
   background-size: contain;
   flex-shrink: 0;
 }
+
 .target > span{
   overflow: hidden;
   pointer-events: none;
@@ -83,7 +90,7 @@ pre:empty{ display: none }
   flex-direction: column;
   flex-wrap: wrap;
   max-height: calc(var(--grid-rows) * 2.4rem);
-  align-content: space-between;
+  align-content: start;
   margin-bottom: 0.2em;
 }
 
@@ -93,11 +100,9 @@ pre:empty{ display: none }
   border-bottom: 1px solid black;
   border-left: 1px solid black;
   background: rgb(40,37,43);
-  position: fixed;
+  width: max-content;
-  top: 0;
+  align-self: flex-end;
-  right: 0;
+  order: -1;
-  z-index: -1;
-  display: inline-block;
 }
 
 kbd{
@@ -161,17 +166,14 @@ pre > div{
   }
   .categoryList{
     opacity: 1;
-    margin-inline-end: -13ch;
   }
-  
   .banner{
     display: none;
   }
   #site{
     background-color: rgb(60,50,70);
-    position: relative;
-    border-top: none;
   }
+  #ui > #site{ margin-left: 22ch }
   #targets{
     position: relative;
   }

html_resources/selector.js

@@ -129,7 +129,12 @@ function showMatchingTargets(fileNames,setSelected = false){
       
     }
   }
-  document.getElementById("targets").setAttribute("style",`--grid-rows:${Math.ceil(fileNames.length/3)}`)
+  const container = document.getElementById("targets");
+  const width = container.getBoundingClientRect().width;
+  const horizontal_items = Math.max(1,Math.min(Math.floor(width / 180),4));
+  const real_items = fileNames.length + bonus;
+  const full_rows = Math.ceil(real_items/horizontal_items);
+  document.getElementById("targets").setAttribute("style",`--grid-rows:${full_rows};--grid-columns:${Math.ceil(real_items/full_rows)}`);
 }
 
 function onCategoryClicked(categoryNode,isSecondary = false){
@@ -253,7 +258,7 @@ const selectedTarget = new(function(){
     for(let value of selected.values()){
       t.push(value.getAttribute("title")+".css")
     }
-    history.replaceState(state_object,"",`?file=${t.join(",")}`);
+    history.replaceState(state_object,"",`?file=${t.map(encodeURIComponent).join(",")}`);
   }
 })();
 

index.html

@@ -26,7 +26,7 @@
       <div class="hint placeholder">Select a style category from the left pane</div>
     </div>
     <div>
-      <code-block data-highlight="css" data-matchlinks="[\w-\.]+\.css -> ./chrome/%s" id="previewBox" class="copy-able"></code-block>
+      <code-block data-highlight="css" data-matchlinks="[\w-\.\+]+\.css -> ./chrome/%s" id="previewBox" class="copy-able"></code-block>
     </div>
   </main>
 </div>