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.
This commit is contained in:
MrOtherGuy 2023-02-25 11:13:50 +02:00
parent c8f143e3c7
commit e129aa349c
3 changed files with 39 additions and 32 deletions

View file

@ -1,11 +1,15 @@
body{background-color: rgb(60,50,70); color: silver; margin: 0px }
#ui{ display: flex; }
:root{
background-color: rgb(60,50,70);
color: silver;
}
body{
margin: 0px
}
#site{
height: 100vh;
box-sizing: border-box;
overflow-y: auto;
flex: 1;
border-top: 2.2em solid transparent;
margin-left: 22ch;
display: flex;
flex-direction: column;
}
.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:1;
z-index:2;
left: 8ch;
}
.categoryList:hover{
position: relative;
z-index: 2;
z-index: 3;
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;
width: 1.2em;
height: 1.2em;
width: 1em;
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;
top: 0;
right: 0;
z-index: -1;
display: inline-block;
width: max-content;
align-self: flex-end;
order: -1;
}
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;
}

View file

@ -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(",")}`);
}
})();

View file

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