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
parent
c8f143e3c7
commit
e129aa349c
3 changed files with 39 additions and 32 deletions
|
|
@ -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;
|
||||
display: inline-block;
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(",")}`);
|
||||
}
|
||||
})();
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue